Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
<html>
        <head>
                <title>Dojo Spinner Widget Test</title>

                <style type="text/css">
                        @import "../../../dojo/resources/dojo.css";
                        @import "../../../dijit/themes/tundra/tundra.css";
                        @import "../../../dijit/themes/dijit.css";
                        @import "../../../dijit/tests/css/dijitTests.css";
                </style>

                <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>

                <script type="text/javascript">
                        dojo.require("dojox.widget.TimeSpinner");
                        dojo.require("dojo.parser"); // scan page for widgets

                        function displayData() {
                                var spinner = dijit.byId("timeSpinner");

                                //accessing the widget property directly
                                console.log("TimeSpinner Value (raw, unserialized): ", spinner.getValue());

                                //accessing the widget from the form elements
                                var theForm = dojo.byId("form1");
                                var s = "";
                                for (var i=0; i<theForm.elements.length;i++){
                                        var elem = theForm.elements[i];
                                        if (!elem.name || elem.name =="button") { continue ; }
                                        s+=elem.name + ": " + elem.value + "\n";
                                }
                                console.log(s);
                                
                        }

                </script>
                <style type="text/css">
                        #integerspinner2 .dojoSpinnerUpArrow {
                                border-bottom-color: blue;
                        }
                        #integerspinner2 .dojoSpinnerDownArrow {
                                border-top-color: red;
                        }
                        #integerspinner2 .dojoSpinnerButton {
                                background-color: yellow;
                        }
                        #integerspinner2 .dojoSpinnerButtonPushed {
                                background-color: gray;
                        }
                        #integerspinner2 .dojoSpinnerButtonPushed .dojoSpinnerDownArrow {
                                border-top-color: blue;
                        }
                        #integerspinner2 .dojoSpinnerButtonPushed .dojoSpinnerUpArrow {
                                border-bottom-color: red;
                        }

                        .dojoInputFieldValidationNormal#integerspinner2 {
                                color:blue;
                                background-color:pink;
                        }
                </style>
        </head>

        <body class="tundra">
        <h1 class="testTitle">Dojox TimeSpinner Test</h1>
                Try typing values, and use the up/down arrow keys and/or the arrow push
                buttons to spin
                <br>
        <form id="form1" action="" name="example" method="post">
                <h1>time spinner</h1>
                <br>
                <input id="timeSpinner" dojoType="dojox.widget.TimeSpinner"
                        onChange="console.debug('onChange fired for widget id = ' + this.id + ' with value = ' + arguments[0]);"
                        value="12:30 PM"
                        name="timeSpinner"
                        hours="12"
                        id="timeSpinner" />
        </form>

        <div>
                <button name="button" onclick="displayData(); return false;">view data</button>
        </div>

        </body>
</html>