source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Open/development-bundle/samples/formdecorator/overview.html @ 628

Last change on this file since 628 was 628, checked in by vmipsl, 12 years ago

wijmo
File size: 6.3 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4    <title>FormDecorator - Overview</title>
5    <meta charset="utf-8" />
6    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7    <meta name="description" content="%description%" />
8    <meta name="keywords" content="" />
9    <meta name="author" content="ComponentOne" />
10
11    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
12   
13    <link href="../../themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" />
14    <link href="../../themes/wijmo/jquery.wijmo.wijlist.css" rel="stylesheet" type="text/css" />
15    <link href="../../themes/wijmo/jquery.wijmo.wijtextbox.css" rel="stylesheet" type="text/css" />
16    <link href="../../themes/wijmo/jquery.wijmo.wijdropdown.css" rel="stylesheet" type="text/css" />
17    <link href="../../themes/wijmo/jquery.wijmo.wijradio.css" rel="stylesheet" type="text/css" />
18    <link href="../../themes/wijmo/jquery.wijmo.wijcheckbox.css" rel="stylesheet" type="text/css" />
19    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
20    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
21    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
22    <script src="../../external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
23    <script src="../../wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script>
24    <script src="../../wijmo/jquery.wijmo.wijsuperpanel.js" type="text/javascript"></script>
25    <script src="../../wijmo/jquery.wijmo.wijlist.js" type="text/javascript"></script>
26    <script src="../../wijmo/jquery.wijmo.wijdropdown.js" type="text/javascript"></script>
27    <script src="../../wijmo/jquery.wijmo.wijradio.js" type="text/javascript"></script>
28    <script src="../../wijmo/jquery.wijmo.wijcheckbox.js" type="text/javascript"></script>
29    <script src="../../wijmo/jquery.wijmo.wijtextbox.js" type="text/javascript"></script>
30    <script id="scriptInit" type="text/javascript">
31        $(document).ready(function () {
32            $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
33            $("#select1").wijdropdown();
34            $(":input[type='radio']").wijradio();
35            $(":input[type='checkbox']").wijcheckbox();
36            $("#wijmo-button").button();
37            $("#wijmo-button").click(function () { return false; });
38        });
39    </script>
40    <style type="text/css">
41        .formdecorator label
42        {
43            display: block;
44        }
45       
46        .formdecorator
47        {
48            list-style: none;
49            margin: 0;
50            padding: 0;
51        }
52       
53        .formdecorator li
54        {
55            clear: both;
56            margin-bottom: 1em;
57        }
58    </style>
59</head>
60<body class="demo-single">
61    <div class="container">
62        <div class="header">
63            <h2>
64                Overview</h2>
65        </div>
66        <div class="main demo">
67            <!-- Begin demo markup -->
68            <form action="overview.html">
69            <ul class="formdecorator">
70                <li>
71                    <h3>
72                        Input
73                    </h3>
74                    <input id="textbox" type="text" />
75                </li>
76                <li>
77                    <h3>
78                        TextArea</h3>
79                    <textarea id="area" rows="2" cols="50"></textarea>
80                </li>
81                <li>
82                    <h3>
83                        Dropdown with Optgroups</h3>
84                    <select id="select1">
85                        <optgroup label="A-G">
86                            <option>A</option>
87                            <option selected="selected">B</option>
88                            <option>C</option>
89                            <option>D</option>
90                            <option>E</option>
91                            <option>F</option>
92                            <option>G</option>
93                        </optgroup>
94                        <optgroup label="H-M">
95                            <option>H</option>
96                            <option>I</option>
97                            <option>J</option>
98                            <option>K</option>
99                            <option>L</option>
100                            <option>M</option>
101                        </optgroup>
102                    </select>
103                </li>
104                <li>
105                    <h3>
106                        CheckBox</h3>
107                    <input id="checkbox1" type="checkbox" /><label for="checkbox1">checkbox1</label>
108                    <input id="checkbox2" type="checkbox" /><label for="checkbox2">checkbox2</label>
109                    <input id="checkbox3" type="checkbox" /><label for="checkbox3">checkbox3</label>
110                    <input id="checkbox4" type="checkbox" /><label for="checkbox4">checkbox4</label>
111                </li>
112                <li>
113                    <h3 id="radiobutton">
114                        Radio</h3>
115                    <input type="radio" name="radiobutton1" id="radio1" /><label for="radio1">radio1</label>
116                    <input type="radio" name="radiobutton1" id="radio2" /><label for="radio2">radio2</label>
117                    <input type="radio" name="radiobutton1" id="radio3" /><label for="radio3">radio3</label>
118                    <input type="radio" name="radiobutton1" id="radio4" /><label for="radio4">radio4</label>
119                </li>
120                <li>
121                    <h3>
122                        Button</h3>
123                    <button id="wijmo-button">
124                        Submit</button>
125                </li>
126            </ul>
127            </form>
128        </div>
129        <!-- End demo markup -->
130        <div class="demo-options">
131            <!-- Begin options markup -->
132            <!-- End options markup -->
133        </div>
134    </div>
135    <div class="footer demo-description">
136        <p>
137            The Wijmo Form Decorator widgets (wijradio, wijcheckbox, wijdropdown, wijtextbox)
138            are used to decorate standard HTML form elements. The Form Decorator widgets allow
139            any form element to be styled uniformly in any browser.
140        </p>
141    </div>
142</body>
143</html>
Note: See TracBrowser for help on using the repository browser.