SpiderBasic Library - Liste neuer Funktionen

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

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Gadget > (Alle Gadgets) > Schatten in unterschiedlichen Farben hinzufügen

Code: Alles auswählen

EnableExplicit

Procedure SetGadgetShadow(gadget, x, y, blur, size, color)
  Protected styles.s
  Protected 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")
  
  styles = "#" + id + " "
  
  Select GadgetType(gadget)
    Case #PB_GadgetType_Panel
      styles + ".dijitTabPaneWrapper, #" + id + " .dijitTabListContainer-top .dijitTab"
    Case #PB_GadgetType_TrackBar
      styles = ""
      styles + ".claro #" + id + " .dijitSliderImageHandle { box-shadow: none; } .dijitSliderBarContainerH, #" + id + " .dijitSliderLeftBumper, #" + id + " .dijitSliderRightBumper, #" + id + " .dijitSliderImageHandle"
  EndSelect
  
  Select GadgetType(gadget)
    Case #PB_GadgetType_Frame,
         #PB_GadgetType_Option,
         #PB_GadgetType_CheckBox,
         #PB_GadgetType_HyperLink,
         #PB_GadgetType_Text
      styles + " { text-shadow: " + x + "px " + y + "px " + blur + "px " + hexcolor + "; }"
    Default
      styles + " { box-shadow: " + x + "px " + y + "px " + blur + "px " + size + "px " + hexcolor + "; }"
  EndSelect
  
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
  
EndProcedure

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

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  TextGadget(1, 10, 10, 100, 20, "Hello World", 0)
  StringGadget(2, 150, 20, 200, 20, "", 0)
  ButtonGadget(3, 370, 20, 100, 20, "Button", 0)
  TextGadget(4, 10, 30, 100, 40, "PureBaic with CSS is cool :-)", 0)
  CheckBoxGadget(5, 10, 70, 100, 20, "Click me", 0)
  ListIconGadget(6, 150, 60, 320, 200, "Column", 200, 0)
  AddGadgetItem(6, -1, "Item")
  TrackBarGadget(7, 150, 320, 320, 20, 0, 100, 0)
  
  SetGadgetShadow(1, 0, 0, 10, 0, RGB(0, 255, 0))
  SetGadgetShadow(2, 0, 0, 10, 0, RGB(100, 100, 100))
  SetGadgetShadow(3, 0, 0, 10, 0, RGB(100, 100, 100))
  SetGadgetShadow(4, 0, 0, 5, 20, RGB(0, 0, 255))
  SetGadgetShadow(5, 0, 0, 10, 20, RGB(255, 255, 0))
  SetGadgetShadow(6, 0, 0, 10, 0, RGB(100, 100, 100))
  SetGadgetShadow(7, 0, 0, 10, 0, RGB(100, 100, 100))
  
EndIf
Bild
RSBasic
Admin
Beiträge: 7893
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Gadget > (Alle Gadgets) > Gadget animiert einblenden und ausblenden

Code: Alles auswählen

EnableExplicit

#SB_Gadget_Animation_Linear = 1
#SB_Gadget_Animation_Ease = 2
#SB_Gadget_Animation_EaseIn = 3
#SB_Gadget_Animation_EaseOut = 4
#SB_Gadget_Animation_EaseInOut = 5

Procedure HideGadgetEx(gadget, state)
  Protected id.s
  Protected hasanimation.s
  
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  !   v_hasanimation = GadgetElement.hasClass("HasAnimation");
  ! }
  
  If id <> "" And hasanimation <> ""
    If state = 1
      ! GadgetElement.addClass("HideGadget");
    Else
      ! GadgetElement.removeClass("HideGadget");
    EndIf
  Else
    HideGadget(gadget, state)
  EndIf
  
EndProcedure

Macro HideGadget(gadget, state)
  HideGadgetEx(gadget, state)
EndMacro

Procedure SetGadgetAnimation(gadget, effect, duration.f, delay.f)
  Protected styles.s
  Protected id.s
  Protected animation_effect.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");
  ! }
  
  Select effect
    Case #SB_Gadget_Animation_Linear
      animation_effect = "linear"
    Case #SB_Gadget_Animation_Ease
      animation_effect = "ease"
    Case #SB_Gadget_Animation_EaseIn
      animation_effect = "ease-in"
    Case #SB_Gadget_Animation_EaseOut
      animation_effect = "ease-out"
    Case #SB_Gadget_Animation_EaseInOut
      animation_effect = "ease-in-out"
  EndSelect
  
  styles = ""
  styles + "#" + id + " { -webkit-transition: all " + duration + "s " + animation_effect + " " + delay + "s; transition: all " + duration + "s " + animation_effect + " " + delay + "s; opacity: 1; visibility: visible; } "
  styles + "#" + id + " * { -webkit-transition: all " + duration + "s " + animation_effect + " " + delay + "s; transition: all " + duration + "s " + animation_effect + " " + delay + "s; opacity: 1; visibility: visible; } "
  styles + "#" + id + ".HideGadget { opacity: 0; visibility: hidden; }"
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
  ! GadgetElement.addClass("HasAnimation");
  
EndProcedure

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

Procedure GadgetEvent()
  Select EventGadget()
    Case 2
      HideGadget(1, 0)
    Case 3
      HideGadget(1, 1)
  EndSelect
  
EndProcedure

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ButtonGadget(1, 10, 10, 210, 200, "Button", 0)
  ButtonGadget(2, 10, 220, 100, 100, "Show", 0)
  ButtonGadget(3, 120, 220, 100, 100, "Hide", 0)
  
  SetGadgetAnimation(1, #SB_Gadget_Animation_Linear, 0.5, 0)
  
  BindEvent(#PB_Event_Gadget, @GadgetEvent())
  
EndIf
Bild
RSBasic
Admin
Beiträge: 7893
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Gadget > (Alle Gadgets) > Gadget animiert verschieben

Code: Alles auswählen

EnableExplicit

#SB_Gadget_Animation_Linear = 1
#SB_Gadget_Animation_Ease = 2
#SB_Gadget_Animation_EaseIn = 3
#SB_Gadget_Animation_EaseOut = 4
#SB_Gadget_Animation_EaseInOut = 5

Procedure SetGadgetAnimation(gadget, effect, duration.f, delay.f)
  Protected styles.s
  Protected id.s
  Protected animation_effect.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");
  ! }
 
  Select effect
    Case #SB_Gadget_Animation_Linear
      animation_effect = "linear"
    Case #SB_Gadget_Animation_Ease
      animation_effect = "ease"
    Case #SB_Gadget_Animation_EaseIn
      animation_effect = "ease-in"
    Case #SB_Gadget_Animation_EaseOut
      animation_effect = "ease-out"
    Case #SB_Gadget_Animation_EaseInOut
      animation_effect = "ease-in-out"
  EndSelect
 
  styles = ""
  styles + "#" + id + " { -webkit-transition: all " + duration + "s " + animation_effect + " " + delay + "s; transition: all " + duration + "s " + animation_effect + " " + delay + "s; opacity: 1; visibility: visible; } "
  styles + "#" + id + " * { -webkit-transition: all " + duration + "s " + animation_effect + " " + delay + "s; transition: all " + duration + "s " + animation_effect + " " + delay + "s; opacity: 1; visibility: visible; } "
  styles + "#" + id + ".HideGadget { opacity: 0; visibility: hidden; }"
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
  ! GadgetElement.addClass("HasAnimation");
 
EndProcedure

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

Procedure GadgetEvent()
  Select EventGadget()
    Case 2
      ResizeGadget(1, 280, #PB_Ignore, #PB_Ignore, #PB_Ignore)
  EndSelect
 
EndProcedure

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ButtonGadget(1, 10, 10, 210, 200, "Button", 0)
  ButtonGadget(2, 10, 220, 100, 100, "Move", 0)
  
  SetGadgetAnimation(1, #SB_Gadget_Animation_EaseInOut, 1, 0)
 
  BindEvent(#PB_Event_Gadget, @GadgetEvent())
 
EndIf
Bild
RSBasic
Admin
Beiträge: 7893
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Gadget > (Alle Gadgets) > Gadget animiert vergrößern und verkleinern

Code: Alles auswählen

EnableExplicit

#SB_Gadget_Animation_Linear = 1
#SB_Gadget_Animation_Ease = 2
#SB_Gadget_Animation_EaseIn = 3
#SB_Gadget_Animation_EaseOut = 4
#SB_Gadget_Animation_EaseInOut = 5

Procedure SetGadgetAnimation(gadget, effect, duration.f, delay.f)
  Protected styles.s
  Protected id.s
  Protected animation_effect.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");
  ! }
 
  Select effect
    Case #SB_Gadget_Animation_Linear
      animation_effect = "linear"
    Case #SB_Gadget_Animation_Ease
      animation_effect = "ease"
    Case #SB_Gadget_Animation_EaseIn
      animation_effect = "ease-in"
    Case #SB_Gadget_Animation_EaseOut
      animation_effect = "ease-out"
    Case #SB_Gadget_Animation_EaseInOut
      animation_effect = "ease-in-out"
  EndSelect
 
  styles = ""
  styles + "#" + id + " { -webkit-transition: all " + duration + "s " + animation_effect + " " + delay + "s; transition: all " + duration + "s " + animation_effect + " " + delay + "s; opacity: 1; visibility: visible; } "
  styles + "#" + id + " * { -webkit-transition: all " + duration + "s " + animation_effect + " " + delay + "s; transition: all " + duration + "s " + animation_effect + " " + delay + "s; opacity: 1; visibility: visible; } "
  styles + "#" + id + ".HideGadget { opacity: 0; visibility: hidden; }"
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
  ! GadgetElement.addClass("HasAnimation");
 
EndProcedure

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

Procedure GadgetEvent()
  Select EventGadget()
    Case 2
      ResizeGadget(1, #PB_Ignore, #PB_Ignore, 480, 270)
  EndSelect
 
EndProcedure

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ButtonGadget(1, 10, 10, 100, 100, "Button", 0)
  ButtonGadget(2, 10, 290, 480, 100, "Size", 0)
  
  SetGadgetAnimation(1, #SB_Gadget_Animation_EaseInOut, 1, 0)
 
  BindEvent(#PB_Event_Gadget, @GadgetEvent())
 
EndIf
Bild
RSBasic
Admin
Beiträge: 7893
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Gadget > (Alle Gadgets) > Gadget in 3D drehen

Code: Alles auswählen

EnableExplicit

Procedure SetGadgetRotate3D(gadget, x, y, z, degree, perspective_width = 0)
  Protected id.s
 
  ;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 setzen
  ! GadgetElement.css("perspective", v_perspective_width + "px");
  ! GadgetElement.children().css("transform", "rotate3d(" + v_x + ", " + v_y + ", " + v_z + ", " + v_degree + "deg)");
  
EndProcedure

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

Global angle

LoadFont(1, "", 25)

Procedure TimerEvents()
  Select EventTimer()
    Case 1
      angle + 1
      SetGadgetRotate3D(1, 1, 0, 0, angle, 600)
      SetGadgetRotate3D(2, 0, 1, 0, angle)
      SetGadgetRotate3D(3, 0, 0, 1, angle)
      SetGadgetRotate3D(4, 1, 1, 0, angle)
      If angle = 360
        angle = 0
      EndIf
      
  EndSelect
EndProcedure

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ButtonGadget(1, 50, 50, 150, 150, "Button", 0)
  ButtonGadget(2, 300, 50, 150, 150, "Button", 0)
  ButtonGadget(3, 50, 250, 150, 150, "Button", 0)
  ButtonGadget(4, 300, 250, 150, 150, "Button", 0)
 
  SetGadgetFont(1, FontID(1))
  SetGadgetFont(2, FontID(1))
  SetGadgetFont(3, FontID(1))
  SetGadgetFont(4, FontID(1))
 
  AddWindowTimer(0, 1, 50)
  BindEvent(#PB_Event_Timer, @TimerEvents())
 
EndIf
Bild
Benutzeravatar
dige
Beiträge: 1090
Registriert: 08.09.2004 08:53

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag von dige »

@RSBasic: vielen Dank!! Echt Super!!!

Bei SetGadgetItemColor() ist mir aufgefallen, dass das Färben immer langsamer wird:

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
        Select colortype
          Case #PB_Gadget_FrontColor
            styles = "#" + id + " #" + sb_id + "-header .dgrid-column-" + column + " { color: " + hexcolor + "; }"
          Case #PB_Gadget_BackColor
            styles = "#" + id + " #" + sb_id + "-header .dgrid-column-" + column + " { background-color: " + hexcolor + "; }"
        EndSelect
      Else
        Select colortype
          Case #PB_Gadget_FrontColor
            styles = "#" + id + " #" + sb_id + "-row-" + item + " .dgrid-column-" + column + " { color: " + hexcolor + "; }"
          Case #PB_Gadget_BackColor
            styles = "#" + id + " #" + sb_id + "-row-" + item + " .dgrid-column-" + column + " { background-color: " + hexcolor + "; }"
        EndSelect
      EndIf
    Case #PB_GadgetType_Tree
      item = item + 2
      If column = 0
        Select colortype
          Case #PB_Gadget_FrontColor
            styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeRow { color: " + hexcolor + "; }"
          Case #PB_Gadget_BackColor
            styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeRow { background-color: " + hexcolor + "; }"
        EndSelect
      Else
        Select colortype
          Case #PB_Gadget_FrontColor
            styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeNodeContainer > .dijitTreeNode:nth-child(" + column + ") { color: " + hexcolor + "; }"
          Case #PB_Gadget_BackColor
            styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeNodeContainer > .dijitTreeNode:nth-child(" + column + ") { background-color: " + hexcolor + "; }"
        EndSelect
      EndIf
  EndSelect
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
 
EndProcedure

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

Define a, time, n

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 250
    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)
  
  For n = 1 To 10
  
  time = ElapsedMilliseconds()
  
  For a=1 To 250
    If Random(2, 1) = 1
      SetGadgetItemColor(1, a, #PB_Gadget_BackColor, #Red, 0)
    Else
      SetGadgetItemColor(1, a, #PB_Gadget_BackColor, -1, 0)
    EndIf
  Next
  
  Debug ElapsedMilliseconds() - time
  Next

 
EndIf
"Papa, mein Wecker funktioniert nicht! Der weckert immer zu früh."
RSBasic
Admin
Beiträge: 7893
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag von RSBasic »

Das liegt daran, dass er bei jeder einzelnen Zelle, die von dir farbig geändert werden soll, einen neuen CSS-Eintrag im Style-Block im Head-Bereich hinzufügt, was ja normal ist, aber in deinem Beispiel bei 2500 Styles wird die Javascript-Funktion appendChild immer langsamer, da er jedes Mal an das Ende dieses Elements springen muss. Ob es eine schnellere Funktion gibt, ist mir nicht bekannt.
Bild
Benutzeravatar
dige
Beiträge: 1090
Registriert: 08.09.2004 08:53

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag von dige »

Also ist der Code prinzipiell nur für das einmalige Einfärben einer Listbox geeignet? Bestünde denn die Möglichkeit, statt jedes Mal einen Knoten hinzuzufügen, den bereits bestehenden zu ändern?
"Papa, mein Wecker funktioniert nicht! Der weckert immer zu früh."
Benutzeravatar
TroaX
Beiträge: 546
Registriert: 08.03.2013 14:27
Computerausstattung: PC: Ryzen 9 3950X, 64 GB RAM, 3060TI, 2.5 TB SSD, 3 FHD Displays | Lappi: Ryzen 7 4800H, 16 GB RAM, 1 TB SSD, 1650TI | Both: Win 10 Pro
Wohnort: ERB in NRW

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag von TroaX »

Versehentlich Doppelpost
Zuletzt geändert von TroaX am 15.10.2018 13:31, insgesamt 1-mal geändert.
PC: AMD Ryzen 9 3950X | 64 GB RAM | RTX 3060 TI | 2,5 TB NVMe SSD | 2 TB SATA SSD | WIN 10 | 3x FHD Display
Mobil: AMD Ryzen 7 4800H | 16 GB RAM | GTX 1650 TI | 1 TB NVMe SSD | Win 10
Server: MSI Cubi N | Pentium Silver N5000 | 8 GB RAM | 1 TB HDD | Debian/Yunohost + Nextcloud
Programmierung: PureBasic | B4J | B4A | PHP | Python
Benutzeravatar
TroaX
Beiträge: 546
Registriert: 08.03.2013 14:27
Computerausstattung: PC: Ryzen 9 3950X, 64 GB RAM, 3060TI, 2.5 TB SSD, 3 FHD Displays | Lappi: Ryzen 7 4800H, 16 GB RAM, 1 TB SSD, 1650TI | Both: Win 10 Pro
Wohnort: ERB in NRW

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag von TroaX »

Mit CSS 3 wird sowas in der Regel mit den Pseudo-Funktionen (Selektor-Funktionen) zur Kaskaden Navigierung erledigt z.B. :nth-child()

http://maddesigns.de/nth-child-pseudo-s ... 3-550.html

Wenn man das mit Spiderbasic versucht, zu abstrahieren, kann es zu diesem Effekt kommen, weil oftmals durch häufige Methoden-Aufrufe im Javascript dieser Vorgang sehr rechenintensiv wird und somit dieser Prozess sehr lange dauern könnte.
PC: AMD Ryzen 9 3950X | 64 GB RAM | RTX 3060 TI | 2,5 TB NVMe SSD | 2 TB SATA SSD | WIN 10 | 3x FHD Display
Mobil: AMD Ryzen 7 4800H | 16 GB RAM | GTX 1650 TI | 1 TB NVMe SSD | Win 10
Server: MSI Cubi N | Pentium Silver N5000 | 8 GB RAM | 1 TB HDD | Debian/Yunohost + Nextcloud
Programmierung: PureBasic | B4J | B4A | PHP | Python
Antworten