Aktuelle Zeit: 16.12.2018 17:26

Alle Zeiten sind UTC + 1 Stunde [ Sommerzeit ]




Ein neues Thema erstellen Auf das Thema antworten  [ 76 Beiträge ]  Gehe zu Seite 1, 2, 3, 4, 5 ... 8  Nächste
Autor Nachricht
 Betreff des Beitrags: SpiderBasic Library - Liste neuer Funktionen
BeitragVerfasst: 12.10.2018 23:16 
Offline
Moderator
Benutzeravatar

Registriert: 05.10.2006 18:55
Wohnort: Rupture Farms
Springe zum nächsten Beitrag (Hilfslink für RSBasic)

Hallo,

da immer wieder gefragt wird, wie man was umstylen kann und nicht jeder sich mit CSS auskennt, dachte ich mir, ich erstelle einen Sammelthread mit vielen Beispielcodes, um beispielsweise das Aussehen jedes Elements (Fenster, Gadgets, ...) zu verändern.

Wenn jemand auch ein Beispielcode hat, kann dieser hier gerne gepostet werden. Bitte darauf achten, dass die Beispielcodes vollständig und direkt ohne Anpassung ausführbar sind. Wenn z.B. Grafiken u.ä. benötigt werden, dann diese bitte auch im Code einbinden oder erstellen.
Ich werde in diesem Startbeitrag ein Inhaltsverzeichnis bauen und stets aktualisieren. Einzelne Beispielcodes werden in separaten Beiträgen gepostet und im Inhaltsverzeichnis in der jeweiligen Kategorie verlinkt.
Wenn jemand gerne etwas umsetzen möchte, aber nicht weiß, wie, dann die Frage bitte in einem separaten Thread stellen. Feedbacks und Änderungsvorschläge können hier gepostet werden.
Ich habe erstmal nur ein Beispielcode erstellt, aber ich werde zukünftig viele weitere Beispielcodes hinzufügen.

Liste der Beispielcodes:

_________________
BildBildBildBildBildBild


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: SpiderBasic Library - Liste individueller Style-Beispiel
BeitragVerfasst: 12.10.2018 23:17 
Offline
Moderator
Benutzeravatar

Registriert: 05.10.2006 18:55
Wohnort: Rupture Farms
Reserviert

_________________
BildBildBildBildBildBild


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: SpiderBasic Library - Liste individueller Style-Beispiel
BeitragVerfasst: 13.10.2018 10:27 
Offline
Moderator
Benutzeravatar

Registriert: 05.10.2006 18:55
Wohnort: Rupture Farms
Gadget > ListIconGadget > Schriftfarbe und Hintergrundfarbe der Spalten und Zeilen ändern
Gadget > TreeGadget > Schriftfarbe und Hintergrundfarbe der Einträge ändern
Code:
EnableExplicit

Procedure SetGadgetItemColor(gadget, item, colortype, color, column)
  Protected styles.s
  Protected id.s
  Protected sb_id.s
  Protected hexcolor.s
 
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  ;RGB in Hex konvertieren
  hexcolor = "#" + RSet(Hex(Red(color)), 2, "0") + RSet(Hex(Green(color)), 2, "0") + RSet(Hex(Blue(color)), 2, "0")
 
  ;SB-Hauptelement ermitteln
  ! v_sb_id = spider_GadgetID(v_gadget).gadget.id;
 
  ;Unterstützte Gadgets und deren Style-Erstellungen
  Select GadgetType(gadget)
    Case #PB_GadgetType_ListIcon
      If item = -1
        styles = "#" + id + " #" + sb_id + "-header .dgrid-column-" + column
      Else
        styles = "#" + id + " #" + sb_id + "-row-" + item + " .dgrid-column-" + column
      EndIf
    Case #PB_GadgetType_Tree
      item = item + 2
      If column = 0
        styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeRow"
      Else
        styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeNodeContainer > .dijitTreeNode:nth-child(" + column + ")"
      EndIf
  EndSelect
 
  Select colortype
    Case #PB_Gadget_FrontColor
      styles + " { color: " + hexcolor + "; }"
    Case #PB_Gadget_BackColor
      styles + " { background-color: " + hexcolor + "; }"
  EndSelect
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
 
EndProcedure

;================================================== Beispielcode ==================================================

Define a

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ListIconGadget(1, 10, 10, WindowWidth(0)-20, WindowHeight(0)-20, "Spalte 1", 200, #PB_ListIcon_GridLines)
  AddGadgetColumn(1, 1, "Spalte 2", 200)
 
  For a=1 To 50
    AddGadgetItem(1, -1, "Item " + Str(a) + Chr(10) + "More Text")
  Next
 
  SetGadgetItemColor(1, -1, #PB_Gadget_BackColor, RGB(0, 0, 255), 1)
  SetGadgetItemColor(1, -1, #PB_Gadget_FrontColor, RGB(255, 255, 255), 1)
  SetGadgetItemColor(1, 5, #PB_Gadget_FrontColor, RGB(255, 0, 0), 0)
  SetGadgetItemColor(1, 6, #PB_Gadget_FrontColor, RGB(0, 100, 0), 1)
  SetGadgetItemColor(1, 7, #PB_Gadget_BackColor, RGB(100, 100, 100), 0)
  SetGadgetItemColor(1, 7, #PB_Gadget_BackColor, RGB(100, 100, 100), 1)
  SetGadgetItemColor(1, 7, #PB_Gadget_FrontColor, RGB(255, 255, 255), 0)
  SetGadgetItemColor(1, 7, #PB_Gadget_FrontColor, RGB(255, 255, 255), 1)
 
;   TreeGadget(1, 10, 10, WindowWidth(0)-20, WindowHeight(0)-20, 0)
;   
;   For a=1 To 50
;     AddGadgetItem(1, -1, "Item " + Str(a), 0, 0)
;     AddGadgetItem(1, -1, "SubItem 1", 0, 1)
;     AddGadgetItem(1, -1, "SubItem 2", 0, 1)
;     AddGadgetItem(1, -1, "SubItem 3", 0, 1)
;     AddGadgetItem(1, -1, "SubItem 4", 0, 1)
;     AddGadgetItem(1, -1, "SubItem 5", 0, 1)
;   Next
;   
;   SetGadgetItemColor(1, 1, #PB_Gadget_FrontColor, RGB(255, 255, 255), 0)
;   SetGadgetItemColor(1, 1, #PB_Gadget_BackColor, RGB(255, 0, 0), 0)
;   SetGadgetItemColor(1, 3, #PB_Gadget_FrontColor, RGB(255, 255, 255), 0)
;   SetGadgetItemColor(1, 3, #PB_Gadget_BackColor, RGB(100, 100, 100), 0)
;   SetGadgetItemColor(1, 3, #PB_Gadget_FrontColor, RGB(255, 255, 255), 2)
;   SetGadgetItemColor(1, 3, #PB_Gadget_BackColor, RGB(0, 0, 255), 2)
 
EndIf

_________________
BildBildBildBildBildBild


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: SpiderBasic Library - Liste individueller Style-Beispiel
BeitragVerfasst: 14.10.2018 17:20 
Offline
Moderator
Benutzeravatar

Registriert: 05.10.2006 18:55
Wohnort: Rupture Farms
Es gibt jetzt SetGadgetBorder(), um den Rahmen eines beliebigen Gadgets zu erstellen, zu ändern oder zu entfernen. Dabei kann man die Position (ob nur oben, rechts, unten, links oder alle Seiten), die Rahmenbreite, Farbe, den Typ (ob Linie, gepunktet, ...) und die Ecken (ob normal oder abgerundet) festlegen.

Gadget > (Alle Gadgets) > Rahmenposition, Rahmenbreite, Rahmenfarbe, Rahmenart, Rahmen-Ecken ändern
Code:
EnableExplicit

#SB_Gadget_Border_Position_All = 1
#SB_Gadget_Border_Position_Top = 2
#SB_Gadget_Border_Position_Right = 3
#SB_Gadget_Border_Position_Bottom = 4
#SB_Gadget_Border_Position_Left = 5

#SB_Gadget_Border_Type_Dashed = 1
#SB_Gadget_Border_Type_Dotted = 2
#SB_Gadget_Border_Type_Double = 3
#SB_Gadget_Border_Type_Groove = 4
#SB_Gadget_Border_Type_Inset = 5
#SB_Gadget_Border_Type_Outset = 6
#SB_Gadget_Border_Type_Ridge = 7
#SB_Gadget_Border_Type_Solid = 8

Procedure SetGadgetBorder(gadget, position, width, color, type, radius)
  Protected styles.s
  Protected id.s
  Protected hexcolor.s
  Protected border_position.s
  Protected border_type.s
 
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  ;RGB in Hex konvertieren
  hexcolor = "#" + RSet(Hex(Red(color)), 2, "0") + RSet(Hex(Green(color)), 2, "0") + RSet(Hex(Blue(color)), 2, "0")
 
  Select position
    Case #SB_Gadget_Border_Position_All
      border_position = "border"
    Case #SB_Gadget_Border_Position_Top
      border_position = "border-top"
    Case #SB_Gadget_Border_Position_Right
      border_position = "border-right"
    Case #SB_Gadget_Border_Position_Bottom
      border_position = "border-bottom"
    Case #SB_Gadget_Border_Position_Left
      border_position = "border-left"
  EndSelect
 
  Select type
    Case #SB_Gadget_Border_Type_Dashed
      border_type = "Dashed"
    Case #SB_Gadget_Border_Type_Dotted
      border_type = "Dotted"
    Case #SB_Gadget_Border_Type_Double
      border_type = "Double"
    Case #SB_Gadget_Border_Type_Groove
      border_type = "Groove"
    Case #SB_Gadget_Border_Type_Inset
      border_type = "Inset"
    Case #SB_Gadget_Border_Type_Outset
      border_type = "Outset"
    Case #SB_Gadget_Border_Type_Ridge
      border_type = "Ridge"
    Case #SB_Gadget_Border_Type_Solid
      border_type = "Solid"
  EndSelect
 
  styles = "#" + id + " "
 
  ;Unterstützte Gadgets und deren Style-Erstellungen
  Select GadgetType(gadget)
    Case #PB_GadgetType_Button
      styles + ".dijitButtonNode"
    Case #PB_GadgetType_ButtonImage
      styles + ".dijitButtonNode"
    Case #PB_GadgetType_Calendar
      styles + ".dijitCalendar"
    Case #PB_GadgetType_Canvas
      styles + ""
    Case #PB_GadgetType_CheckBox
      styles + ""
    Case #PB_GadgetType_ComboBox
      styles + ".dijitComboBox"
    Case #PB_GadgetType_Container
      styles + ""
    Case #PB_GadgetType_Date
      styles + ".dijitTextBox"
    Case #PB_GadgetType_Editor
      styles + ".dijitTextBox"
    Case #PB_GadgetType_Frame
      styles + ".sbFrameBorder"
    Case #PB_GadgetType_HyperLink
      styles + ""
    Case #PB_GadgetType_Image
      styles + ""
    Case #PB_GadgetType_ListIcon
      styles + ".dgrid"
    Case #PB_GadgetType_ListView
      styles + ".dgrid"
    Case #PB_GadgetType_Option
      styles + ""
    Case #PB_GadgetType_Panel
      styles = ""
      styles + ".claro #" + id + " .dijitTabPaneWrapper, .claro #" + id + " .dijitTabContainerTop-tabs, .claro #" + id + " .dijitTabContainerBottom-tabs, .claro #" + id + " .dijitTabContainerLeft-tabs, .claro #" + id + " .dijitTabContainerRight-tabs { border-color: " + hexcolor + "; } .claro #" + id + " .dijitTab { border: 1px " + border_type + " " + hexcolor + "; } .claro #" + id + " .dijitTabChecked { border-color: " + hexcolor + "; border-bottom: 1px solid #ffffff; }"
      styles + ".flat #" + id + " .dijitTabContainerTop-tabs .dijitTabChecked { border-bottom: 1px solid #fff; } .flat  #" + id + " .dijitTabPaneWrapper, .flat  #" + id + " .dijitTab"
    Case #PB_GadgetType_ProgressBar
      styles + ".dijitProgressBar"
    Case #PB_GadgetType_ScrollArea
      styles + ""
    Case #PB_GadgetType_Spin
      styles + ".dijitSpinner"
      ProcedureReturn 0
    Case #PB_GadgetType_Splitter
      styles + ""
    Case #PB_GadgetType_String
      styles + ".dijitTextBox"
    Case #PB_GadgetType_Text
      styles + ""
    Case #PB_GadgetType_TrackBar
      styles + ""
    Case #PB_GadgetType_Tree
      styles + ""
    Case #PB_GadgetType_Web
      styles + ""
    Default
      ProcedureReturn 0
  EndSelect
 
  styles + " { " + border_position + ": " + width + "px " + border_type + " " + hexcolor + "; border-radius: " + radius + "px; overflow: hidden; }"
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
 
EndProcedure

;================================================== Beispielcode ==================================================

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  FrameGadget(1, 10, 10, 480, 380, "Frame", 0)
  StringGadget(2, 20, 30, 200, 20, "", 0)
  ButtonGadget(3, 230, 30, 100, 20, "Button", 0)
 
  SetGadgetBorder(1, #SB_Gadget_Border_Position_All, 2, RGB(255, 0, 0), #SB_Gadget_Border_Type_Solid, 10)
  SetGadgetBorder(2, #SB_Gadget_Border_Position_All, 1, RGB(0, 0, 255), #SB_Gadget_Border_Type_Dashed, 5)
  SetGadgetBorder(3, #SB_Gadget_Border_Position_All, 2, RGB(0, 150, 0), #SB_Gadget_Border_Type_Solid, 10)
 
EndIf

_________________
BildBildBildBildBildBild


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: SpiderBasic Library - Liste individueller Style-Beispiel
BeitragVerfasst: 14.10.2018 17:48 
Offline
Moderator
Benutzeravatar

Registriert: 05.10.2006 18:55
Wohnort: Rupture Farms
Gadget > (Alle Gadgets) > Transparent einstellen
Code:
EnableExplicit

Procedure SetGadgetTransparent(gadget, value.f)
  Protected styles.s
  Protected id.s
 
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  styles = "#" + id + " { opacity: " + value + "; }"
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
 
EndProcedure

;================================================== Beispielcode ==================================================

CreateImage(1, 100, 100, 24, RGB(255, 0, 0))
CreateImage(2, 100, 100, 24, RGB(0, 255, 0))
CreateImage(3, 100, 100, 24, RGB(0, 0, 255))

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ImageGadget(1, 50, 50, 100, 100, ImageID(1), 0)
  ImageGadget(2, 75, 25, 100, 100, ImageID(2), 0)
  ImageGadget(3, 100, 75, 100, 100, ImageID(3), 0)
  TextGadget(4, 100, 30, 200, 20, "Long transparent text", 0)
 
  SetGadgetTransparent(1, 0.5)
  SetGadgetTransparent(2, 0.5)
  SetGadgetTransparent(3, 0.5)
  SetGadgetTransparent(4, 0.5)
 
EndIf

_________________
BildBildBildBildBildBild


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: SpiderBasic Library - Liste individueller Style-Beispiel
BeitragVerfasst: 14.10.2018 17:59 
Offline

Registriert: 27.11.2016 18:13
Wohnort: Erzgebirge
Ich bin schwer begeistert!

Dank dir (RSBasic) steige ich auch langsam immer mehr hinter die Verwendung von CSS-Styling mit SpiderBasic.


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: SpiderBasic Library - Liste individueller Style-Beispiel
BeitragVerfasst: 14.10.2018 20:06 
Offline
Moderator
Benutzeravatar

Registriert: 05.10.2006 18:55
Wohnort: Rupture Farms
Gadget > (Alle Gadgets) > Gadget drehen
Code:
EnableExplicit

Procedure SetGadgetRotate(gadget, degree)
  Protected styles.s
  Protected id.s
 
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  styles = "#" + id + " { transform:rotate(" + degree + "deg); }"
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
 
EndProcedure

;================================================== Beispielcode ==================================================

LoadFont(1, "", 50)

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  TextGadget(1, 10, 100, 100, 20, "Welcome", 0)
  ButtonGadget(2, 150, 100, 200, 200, "Button", 0)
  ProgressBarGadget(3, 250, 180, 350, 50, 0, 100, 0)
 
  SetGadgetFont(1, FontID(1))
  SetGadgetFont(2, FontID(1))
  SetGadgetState(3, 60)
 
  SetGadgetRotate(1, 90)
  SetGadgetRotate(2, 45)
  SetGadgetRotate(3, 100)
 
EndIf

_________________
BildBildBildBildBildBild


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: SpiderBasic Library - Liste individueller Style-Beispiel
BeitragVerfasst: 14.10.2018 20:11 
Offline
Moderator
Benutzeravatar

Registriert: 05.10.2006 18:55
Wohnort: Rupture Farms
Gadget > (Alle Gadgets) > Z-Index festlegen
Code:
EnableExplicit

Procedure SetGadgetZIndex(gadget, zindex)
  Protected styles.s
  Protected id.s
 
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  styles = "#" + id + " { z-index: " + zindex + "; }"
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
 
EndProcedure

;================================================== Beispielcode ==================================================

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ButtonGadget(1, 50, 50, 100, 100, "Button 1", 0)
  ButtonGadget(2, 75, 75, 100, 100, "Button 2", 0)
  ButtonGadget(3, 100, 100, 100, 100, "Button 3", 0)
 
  SetGadgetZIndex(1, 3)
  SetGadgetZIndex(2, 2)
  SetGadgetZIndex(3, 1)
 
EndIf

_________________
BildBildBildBildBildBild


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: SpiderBasic Library - Liste individueller Style-Beispiel
BeitragVerfasst: 14.10.2018 20:11 
Offline

Registriert: 27.11.2016 18:13
Wohnort: Erzgebirge
Vielleicht sollte hier auch einmal diese tolle Include-Datei für SpiderBasic erwähnt werden.

https://github.com/spiderbytes/jQuery (Von Peter/Kiffi)

Hier ein Beispiel:

Code:
IncludeFile "jQuery.sbi"

Procedure KnopfKlick(e)
  ! alert("SpiderBasic fetzt!");
EndProcedure

UseModule jQuery
 
  Define Knopf
 
  Knopf = Element("<button />")
 
  SetAttribute(Knopf, "border", "1")
  SetText(Knopf, "Drück mich!")
  SetCSS(Knopf, "background-color", "red")
  SetCss(Knopf, "color", "white")
  SetCSS(Knopf, "position", "absolute")
  SetCSS(Knopf, "top", "100px")
  SetCSS(Knopf, "left", "100px")
  SetCss(Knopf, "width", "100px")
  SetCss(Knopf, "height", "100px")
  SetCss(Knopf, "border-radius", "50px")
 
  On(Knopf, "click", @KnopfKlick())
 
  Body = Element("Body")
 
  Append(Body, Knopf)
 
UnuseModule jQuery



Anbei:
Für allgemeine CSS-Nachforschungen <Link>


Zuletzt geändert von ccode_new am 14.10.2018 20:39, insgesamt 1-mal geändert.

Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: SpiderBasic Library - Liste individueller Style-Beispiel
BeitragVerfasst: 14.10.2018 20:21 
Offline
Moderator
Benutzeravatar

Registriert: 05.10.2006 18:55
Wohnort: Rupture Farms
@ccode_new
Auf jeden Fall. :allright:



Gadget > (Alle Gadgets) > Außenabstand festlegen
Code:
EnableExplicit

Procedure SetGadgetMargin(gadget, top, right, bottom, left)
  Protected styles.s
  Protected id.s
 
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  styles = "#" + id + " { margin: " + top + "px " + right + "px " + bottom + "px " + left + "px; }"
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
 
EndProcedure

;================================================== Beispielcode ==================================================

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ButtonGadget(1, 0, 0, 200, 200, "Button mit Außenabstand", 0)
  ButtonGadget(2, 300, 0, 200, 200, "Button ohne Außenabstand", 0)
 
  SetGadgetMargin(1, 100, 0, 0, 100)
 
EndIf

_________________
BildBildBildBildBildBild


Nach oben
 Profil  
Mit Zitat antworten  
Beiträge der letzten Zeit anzeigen:  Sortiere nach  
Ein neues Thema erstellen Auf das Thema antworten  [ 76 Beiträge ]  Gehe zu Seite 1, 2, 3, 4, 5 ... 8  Nächste

Alle Zeiten sind UTC + 1 Stunde [ Sommerzeit ]


Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast


Sie dürfen keine neuen Themen in diesem Forum erstellen.
Sie dürfen keine Antworten zu Themen in diesem Forum erstellen.
Sie dürfen Ihre Beiträge in diesem Forum nicht ändern.
Sie dürfen Ihre Beiträge in diesem Forum nicht löschen.

Suche nach:
Gehe zu:  

 


Powered by phpBB © 2008 phpBB Group | Deutsche Übersetzung durch phpBB.de
subSilver+ theme by Canver Software, sponsor Sanal Modifiye