source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/samples/knockout/ko_wijformdecorator.html @ 622

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

wijmo
File size: 5.9 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4        <title>Knockout - Form Decorator</title>
5        <link href="../../../../Wijmo-Open/development-bundle/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
6        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" />
7        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijlist.css" rel="stylesheet" type="text/css" />
8        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijtextbox.css" rel="stylesheet" type="text/css" />
9        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijdropdown.css" rel="stylesheet" type="text/css" />
10        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijradio.css" rel="stylesheet" type="text/css" />
11        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijcheckbox.css" rel="stylesheet" type="text/css" />
12        <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
13        <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
14        <script src="../../../../Wijmo-Open/development-bundle/external/jquery.mousewheel.min.js" type="text/javascript"></script>
15        <script src="../../../../Wijmo-Open/development-bundle/external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
16        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script>
17        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijsuperpanel.js" type="text/javascript"></script>
18        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijlist.js" type="text/javascript"></script>
19        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijdropdown.js" type="text/javascript"></script>
20        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijradio.js" type="text/javascript"></script>
21        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijcheckbox.js" type="text/javascript"></script>
22        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijtextbox.js" type="text/javascript"></script>
23        <script src="../../../../Wijmo-Open/development-bundle/external/knockout-2.0.0.js" type="text/javascript"></script>
24        <script src="../../../../Wijmo-Open/development-bundle/external/knockout.wijmo.js" type="text/javascript"></script>
25        <style type="text/css">
26                .formdecorator label
27                {
28                        display: block;
29                }
30               
31                .formdecorator
32                {
33                        list-style: none;
34                        margin: 0;
35                        padding: 0;
36                }
37               
38                .formdecorator li
39                {
40                        clear: both;
41                        margin-bottom: 1em;
42                }
43        </style>
44        <script type="text/javascript">
45                //Create ViewModel
46            var viewModel = function () {
47                this.check = ko.observable(true);
48            };
49
50                //Bind ViewModel
51            $(document).ready(function () {
52                var vm = new viewModel();
53                ko.applyBindings(vm, $(".container").get(0));
54                //$(":wijmo-wijcheckbox").wijcheckbox("refresh"); // Work around to get wijcheckbox displaying correctly on init.
55            });
56        </script>
57</head>
58<body class="demo-single">
59        <div class="container">
60                <div class="header">
61                        <h2>
62                                Form Decorator</h2>
63                </div>
64                <div class="main demo">
65                        <!-- Begin demo markup -->
66                        <div>
67                                <form action="ko_wijformdecorator.html">
68                                <ul class="formdecorator">
69                                        <li>
70                                                <h3>
71                                                        Input
72                                                </h3>
73                                                <input id="text1" type="text" data-bind="wijtextbox: {}" />
74                                        </li>
75                                        <li>
76                                                <h3>
77                                                        TextArea</h3>
78                                                <textarea id="Textarea1" rows="2" cols="50" data-bind="wijtextbox: {}"></textarea>
79                                        </li>
80                                        <li>
81                                                <h3>
82                                                        Dropdown with Optgroups</h3>
83                                                <select id="select2" data-bind="wijdropdown: {}">
84                                                        <optgroup label="A-G">
85                                                                <option>A</option>
86                                                                <option selected="selected">B</option>
87                                                                <option>C</option>
88                                                                <option>D</option>
89                                                                <option>E</option>
90                                                                <option>F</option>
91                                                                <option>G</option>
92                                                        </optgroup>
93                                                        <optgroup label="H-M">
94                                                                <option>H</option>
95                                                                <option>I</option>
96                                                                <option>J</option>
97                                                                <option>K</option>
98                                                                <option>L</option>
99                                                                <option>M</option>
100                                                        </optgroup>
101                                                </select>
102                                        </li>
103                                        <li>
104                                                <h3>
105                                                        CheckBox</h3>
106                                                <label for="checkbox1">checkbox1</label><input id="checkbox1" type="checkbox"  data-bind="wijcheckbox: {checked: check}" />
107                                                <label for="checkbox2">checkbox2</label><input id="checkbox2" type="checkbox" data-bind="wijcheckbox: {}" />
108                                                <label for="checkbox3">checkbox3</label><input id="checkbox3" type="checkbox" data-bind="wijcheckbox: {}" />
109                                                <label for="checkbox4">checkbox4</label><input id="checkbox4" type="checkbox" data-bind="wijcheckbox: {}" />
110                                        </li>
111                                        <li>
112                                                <h3 id="H1">
113                                                        Radio</h3>
114                                                <label for="radio1">radio1</label><input type="radio" name="radiobutton1" id="radio1" data-bind="wijradio: {checked: check}" />
115                                                <label for="radio2">radio2</label><input type="radio" name="radiobutton1" id="radio2" data-bind="wijradio: {}" />
116                                                <label for="radio3">radio3</label><input type="radio" name="radiobutton1" id="radio3" data-bind="wijradio: {}" />
117                                                <label for="radio4">radio4</label><input type="radio" name="radiobutton1" id="radio4" data-bind="wijradio: {}" />
118                                        </li>
119                                        <li>
120                                                <h3>
121                                                        Button</h3>
122                                                <button id="Button1" data-bind="button: {}">
123                                                        Submit</button>
124                                        </li>
125                                </ul>
126                                </form>
127                        </div>
128                        <!-- End demo markup -->
129                        <div class="demo-options">
130                                <!-- Begin options markup -->
131                                <!-- End options markup -->
132                        </div>
133                </div>
134                <div class="footer demo-description">
135                        <p>
136                                Wijmo provides a Knockout Integration Library so that all jQuery UI and Wijmo widgets can be used with Knockout declarative syntax.
137                        </p>
138                </div>
139        </div>
140</body>
141</html>
Note: See TracBrowser for help on using the repository browser.