Wednesday, July 21, 2010

Dojo Slider in XPages

Create an Xpage and copy paste the following code into the source tab of the same. Preview the XPage and you will see a slider created using dojo as displayed in the following figure.

Step 1: Associate the following styles to the XPage
      @import "../resources/dojo.css";
      @import "../dijit/themes/tundra/tundra.css";
Step 2: Add the following scripts to the page

Step 3: Add the following mark up to the page
    <div id="horizontalSlider" dojoType="dijit.form.HorizontalSlider"
       value="5" minimum="-10" maximum="10" discreteValues="11"
       onChange="dojo.byId('horizontalSlider').value = arguments[0];document.getElementById('#{id:SliderValue}').value=arguments[0]"
       style="width: 250px"
    <xp:inputText id="SliderValue"></xp:inputText>  

Step 4: Now preview the page and see how it works on the browser

Hope this helps :)

No comments:

Post a Comment