how to focus dojo slider to a particular value and then disabling dojo slider so that value not changes on clicking?

How to focus dojo slider to a particular value (say 2.5 )on the slider and then disabling dojo slider so that value not changes on clicking on the dojo slider?ie i want to focus dojo slider to a particular value and then make it disable.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">

    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="../cmic/dojo/dojo/dojo.js"
        djConfig="parseOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require("dijit.form.Slider");
            dojo.require("dijit.form.TextBox"); // this we only include to make the textinput look prettier
            dojo.addOnLoad(function() {

                var slider = new dijit.form.HorizontalSlider({
                    name: "slider",
                    value: 0,
                    minimum: 0,
                    maximum: 10,
                    intermediateChanges: true,
                    style: "width:700px;",
                    onChange: function(value) {
                     dojo.byId("sliderValue").value = value;
                    }
                },
                "slider");
            });
        </script>
        <link rel="stylesheet" type="text/css" href="../cmic/dojo/dijit/themes/claro/claro.css"
        />
    </head>

    <body class=" claro ">

        <div id="slider"  intermediateChanges="true" showButtons="false" style="width:400px;color:#606060;">
        <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
            style="height:1.5em;color:#585858;font-size:75%;color:gray;">
        <li>0
                </li>
             <li>
                    2
                </li>
                <li>
                    4
                </li>
                <li>
                    6
                </li>
             <li>
                    8
                </li>
                <li>10
                </li>
            </ol>



        <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
            style="height:1.5em;font-size:90%;color:#606060;margin:-1em 0px 0px 7.00em;">

               <li>
                    Outstanding
                </li>
                <li>
                    Highly effective
                </li>
                <li>
                    &nbsp&nbspEffective
                </li>
                <li>
                       &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbspNeeds Improvement
                </li>
                <li>
                      &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbspNot Acceptable
                </li>
               <li>

                </li></ol>


    </div>
        <p>
            <input type="text" id="sliderValue" dojoType="dijit.form.TextBox" />
        </p>
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>

</html>
View Answers









Related Tutorials/Questions & Answers:
Advertisements

Questions by Category