SpiderBasic Library - Liste neuer Funktionen

Hier könnt ihr alle Fragen zu SpiderBasic austauschen.
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

SpiderBasic Library - Liste neuer Funktionen

Beitrag von RSBasic »

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:
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Reserviert
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Gadget > ListIconGadget > Schriftfarbe und Hintergrundfarbe der Spalten und Zeilen ändern
Gadget > TreeGadget > Schriftfarbe und Hintergrundfarbe der Einträge ändern

Code: Alles auswählen

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
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

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: Alles auswählen

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
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Gadget > (Alle Gadgets) > Transparent einstellen

Code: Alles auswählen

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
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
ccode_new
Beiträge: 1214
Registriert: 27.11.2016 18:13
Wohnort: Erzgebirge

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von ccode_new »

Ich bin schwer begeistert!

Dank dir (RSBasic) steige ich auch langsam immer mehr hinter die Verwendung von CSS-Styling mit SpiderBasic.
Betriebssysteme: div. Windows, Linux, Unix - Systeme

no Keyboard, press any key
no mouse, you need a cat
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Gadget > (Alle Gadgets) > Gadget drehen

Code: Alles auswählen

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
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Gadget > (Alle Gadgets) > Z-Index festlegen

Code: Alles auswählen

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
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
ccode_new
Beiträge: 1214
Registriert: 27.11.2016 18:13
Wohnort: Erzgebirge

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von ccode_new »

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: Alles auswählen

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.
Betriebssysteme: div. Windows, Linux, Unix - Systeme

no Keyboard, press any key
no mouse, you need a cat
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

@ccode_new
Auf jeden Fall. :allright:



Gadget > (Alle Gadgets) > Außenabstand festlegen

Code: Alles auswählen

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
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Antworten