Gadget Element
Gadget Element
How can i get the div element of an gadget for js? Actually a findElementByID can't work for all gadgets as some of them doesnt store an ID. GadgetID() in some way?
Re: Gadget Element
I don't know if all SB gadgets are DIV-based gadget.
Code: Select all
Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
Protected gadgetObject=GadgetID(Gadget)
!if (v_gadgetObject && v_gadgetObject.div) { return v_UseJquery? $(v_gadgetObject.div):v_gadgetObject.div; }
EndProcedure
Re: Gadget Element
Thank you eddy, but is that the object to access like this?
Code: Select all
! myDiv.style.color = 'red';
Re: Gadget Element
like that:
Code: Select all
#Window = 0
Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
Protected gadgetObject=GadgetID(Gadget)
!if (v_gadgetObject && v_gadgetObject.div) { return v_UseJquery? $(v_gadgetObject.div):v_gadgetObject.div; }
EndProcedure
OpenWindow(#Window, 0, 0, 0, 0, "noty", #PB_Window_Background)
ButtonGadget(1, 10, 10, 100, 30, "OK")
ButtonGadget(2, 10, 40, 100, 30, "RUN")
;***** change button background color ********
buttonDIV=GadgetElement(1,#False)
!v_buttonDIV.firstChild.firstChild.style.backgroundColor='red'; // using DOM properties
buttonJquery=GadgetElement(2,#True)
!v_buttonJquery.find('.dijitButtonNode').css({'backgroundColor':'red'}); // using Jquery methods
Last edited by eddy on Sat Apr 12, 2014 6:52 pm, edited 4 times in total.
Re: Gadget Element
ButtonGadgets (for example) consist of several divs and spans.Alexi wrote:Thank you eddy, but is that the object to access like this?
Code: Select all
! myDiv.style.color = 'red';
Code: Select all
<div style="position: absolute; left: 10px; top: 10px; width: 100px; height: 30px;">
<span class="dijit dijitReset dijitInline dijitButton" role="presentation" widgetid="dijit_form_Button_0">
<span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:__onClick" role="presentation">
<span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_0_label" tabindex="0" id="dijit_form_Button_0" style="-webkit-user-select: none; width: 98px; height: 28px;">
<span class="dijitReset dijitInline dijitIcon dijitNoIcon" data-dojo-attach-point="iconNode">
</span>
<span class="dijitReset dijitToggleButtonIconChar">●</span>
<span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_0_label" data-dojo-attach-point="containerNode" style="display: table-cell; width: 98px; height: 28px; color: red;">Button1</span>
</span>
</span>
<input type="button" value="" class="dijitOffScreen" data-dojo-attach-event="onclick:_onClick" tabindex="-1" role="presentation" data-dojo-attach-point="valueNode">
</span>
</div>
Code: Select all
Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
Protected gadgetObject=GadgetID(Gadget)
!if (v_gadgetObject && v_gadgetObject.div) { return v_UseJquery? $(v_gadgetObject.div):v_gadgetObject.div; }
EndProcedure
OpenWindow(0, 10, 10, 300, 300, "")
ButtonGadget(0, 10, 10, 100, 30, "Button1")
ButtonGadget(1, 10, 50, 100, 30, "Button2")
GE1 = GadgetElement(0,#True)
GE2 = GadgetElement(1,#True)
! v_GE1.find(".dijitButtonText").css("color", "red");
! v_GE2.find(".dijitButtonText").css("color", "blue");
Re: Gadget Element
These examples no longer seem to work (buttongadget color doesn't change for me)
Could anyone have a look please?
Could anyone have a look please?
Re: Gadget Element
At some point after 2014 (I don't remember exactly when) Fred changed the variable notation.
SB-Help wrote:Here are the naming rules to use when accessing SpiderBasic items: - JavaScript variable name is the same in lowercase with a 'v_' prefix.
Code: Select all
Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
Protected gadgetObject=GadgetID(Gadget)
!if (v_gadgetobject && v_gadgetobject.div) { return v_usejquery? $(v_gadgetobject.div):v_gadgetobject.div; }
EndProcedure
OpenWindow(0, 10, 10, 300, 300, "")
ButtonGadget(0, 10, 10, 100, 30, "Button1")
ButtonGadget(1, 10, 50, 100, 30, "Button2")
GE1 = GadgetElement(0,#True)
GE2 = GadgetElement(1,#True)
! v_ge1.find(".dijitButtonText").css("color", "red");
! v_ge2.find(".dijitButtonText").css("color", "blue");
Re: Gadget Element
That was it! Thanks again.