PureBoard

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

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

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

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

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

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

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