Code: Select all
EnableExplicit
IncludeFile "./path/to/your/jQuery.sbi" ; -> download from: https://github.com/spiderbytes/jQuery
Procedure ButtonClick(e)
Protected ClickedElement
! v_clickedelement = $(v_e.currentTarget);
Protected Iam.s = jQuery::GetStringData(ClickedElement, "WhoAmI")
! alert(v_iam);
EndProcedure
Procedure NavBarLinkClick(e)
! alert("NavBarLinkClick");
EndProcedure
Procedure Main()
Protected Body, MainContainer
Body = jQuery::Element("body")
MainContainer = jQuery::Element("<div />") ; Create a div element (the main-container)
jQuery::SetAttribute(MainContainer, "id", "mainContainer")
jQuery::AddClass(MainContainer, "container")
jQuery::Append(Body, MainContainer) ; ... and append it to the body-element
; -----------------
; NavBar
; -----------------
Protected NavBar, NavWrapper, a, ul, li
Protected Counter
NavBar = jQuery::Element("<nav />")
jQuery::Append(MainContainer, NavBar)
NavWrapper = jQuery::Element("<div />")
jQuery::AddClass(NavWrapper, "nav-wrapper")
jQuery::Append(NavBar, NavWrapper)
a = jQuery::Element("<a />")
jQuery::SetAttribute(a, "href", "#")
jQuery::AddClass(a, "brand-logo")
jQuery::SetText(a, "Logo")
jQuery::Append(NavWrapper, a)
ul = jQuery::Element("<ul />")
jQuery::SetAttribute(ul, "id", "nav-mobile")
jQuery::AddClass(ul, "right hide-on-med-and-down")
jQuery::Append(NavWrapper, ul)
; Create 3 Links:
For Counter = 1 To 3
li = jQuery::Element("<li />")
jQuery::Append(ul, li)
a = jQuery::Element("<a />")
jQuery::SetAttribute(a, "href", "#")
jQuery::SetText(a, "Link No." + Str(Counter))
jQuery::Append(li, a)
jQuery::On(a, "click", @NavBarLinkClick())
Next
; -----------------
; Collapsible (Accordion)
; -----------------
Protected Collapsible, CollapsibleHeader, CollapsibleBody, i, span
Collapsible = jQuery::Element("<ul />")
jQuery::AddClass(Collapsible, "collapsible")
jQuery::Append(MainContainer, Collapsible)
For Counter = 1 To 3
li = jQuery::Element("<li />")
jQuery::Append(Collapsible, li)
CollapsibleHeader = jQuery::Element("<div />")
jQuery::AddClass(CollapsibleHeader, "collapsible-header")
jQuery::SetText(CollapsibleHeader, "Collapsible No." + Str(Counter))
jQuery::Append(li, CollapsibleHeader)
i = jQuery::Element("<i />")
jQuery::AddClass(i, "material-icons")
jQuery::SetText(i, "filter_drama")
jQuery::Prepend(CollapsibleHeader, i)
CollapsibleBody = jQuery::Element("<div />")
jQuery::AddClass(CollapsibleBody, "collapsible-body")
jQuery::Append(li, CollapsibleBody)
span = jQuery::Element("<span />")
jQuery::SetText(span, "Lorem ipsum dolor sit amet.")
jQuery::Prepend(CollapsibleBody, span)
Next
; Initialize the corresponding Materialize-JS-Funktion
jQuery::CallByName(Collapsible, "collapsible")
; -------------
Protected Button
For Counter = 1 To 3
Button = jQuery::Element("<a />")
jQuery::AddClass(Button, "waves-effect waves-light btn")
jQuery::SetText(Button, "Button No." + Str(Counter))
jQuery::SetStringData(Button, "WhoAmI", "I'm Button No." + Str(Counter))
jQuery::Append(MainContainer, Button)
jQuery::On(Button, "click", @ButtonClick())
Next
; -------------
EndProcedure
; Remove SpiderBasic (Dojo) - Styles:
! $('link[rel="stylesheet"], style').remove();
! $('*').removeAttr('style');
CloseDebugOutput()
! $(".spiderwindow").remove();
Define Meta, Head, Link
Head = jQuery::Element("head")
Meta = jQuery::Element("<meta />")
jQuery::SetAttribute(Meta, "name", "viewport")
jQuery::SetAttribute(Meta, "content", "width=device-width, initial-scale=1.0")
jQuery::Append(Head, Meta)
Link = jQuery::Element("<link />")
jQuery::SetAttribute(Link, "rel", "stylesheet")
jQuery::SetAttribute(Link, "type", "text/css")
jQuery::SetAttribute(Link, "href", "https://fonts.googleapis.com/icon?family=Material+Icons")
jQuery::Append(Head, Link)
Link = jQuery::Element("<link />")
jQuery::SetAttribute(Link, "rel", "stylesheet")
jQuery::SetAttribute(Link, "type", "text/css")
jQuery::SetAttribute(Link, "href", "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css")
jQuery::Append(Head, Link)
jQuery::LoadScript("https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js", @Main())
Greetings ... Peter