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

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

wijmo
File size: 6.0 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4    <title>Knockout - List</title>
5    <link href="../../../../Wijmo-Open/development-bundle/themes/rocket/jquery-wijmo.css"
6        rel="stylesheet" type="text/css" />
7    <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijsuperpanel.css"
8        rel="stylesheet" type="text/css" />
9    <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijlist.css"
10        rel="stylesheet" type="text/css" />
11    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
12    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
13    <script src="../../../../Wijmo-Open/development-bundle/external/jquery.mousewheel.min.js"
14        type="text/javascript"></script>
15    <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijutil.js"
16        type="text/javascript"></script>
17    <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijsuperpanel.js"
18        type="text/javascript"></script>
19    <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijlist.js"
20        type="text/javascript"></script>
21    <script src="../../../../Wijmo-Open/development-bundle/external/knockout-2.0.0.js"
22        type="text/javascript"></script>
23    <script src="../../../../Wijmo-Open/development-bundle/external/knockout.wijmo.js"
24        type="text/javascript"></script>
25    <script type="text/javascript">
26        //Create ViewModel
27        var viewModel = function () {
28            var self = this;
29            self.disabled = ko.observable(false);
30            self.selectionMode = ko.observable('single');
31            self.autoSize = ko.observable(true);
32            self.maxItemsCount = ko.observable(5);
33            self.addHoverItemClass = ko.observable(true);
34            self.keepHightlightOnMouseLeave = ko.observable(false);
35            self.listItems = ko.observableArray(createList());
36        };
37
38        //Bind ViewModel
39        $(document).ready(function () {
40            var vm = new viewModel();
41            ko.applyBindings(vm, $(".container").get(0));
42            $("#resetItem").click(function () {
43                vm.listItems(createList());
44            });
45        });
46
47        var i = 0;
48        function createList() {
49            var list = [];
50            for (var idx = 0; idx < 10; idx++) {
51                list.push({
52                    label: "label" + i,
53                    value: "value" + i
54                });
55                i++;
56            }
57            return list;
58        }
59    </script>
60</head>
61<body class="demo-single">
62    <div class="container">
63        <div class="header">
64            <h2>
65                List</h2>
66        </div>
67        <div class="main demo">
68            <!-- Begin demo markup -->
69            <div id="list" style="width: 300px" data-bind="wijlist: { disabled: disabled, selectionMode: selectionMode, autoSize: autoSize, maxItemsCount: maxItemsCount,
70                addHoverItemClass: addHoverItemClass, keepHightlightOnMouseLeave: keepHightlightOnMouseLeave, listItems: listItems }">
71            </div>
72            <!-- End demo markup -->
73            <div class="demo-options">
74                <!-- Begin options markup -->
75                <ul>
76                    <li>
77                        <label>
78                            <span>disabled:</span></label><input type="checkbox" data-bind="checked: disabled" />
79                    </li>
80                    <li>
81                        <label>
82                            <span>selectionMode:</span></label><select data-bind="value: selectionMode">
83                                <option value="single">single</option>
84                                <option value="multiple">multiple</option>
85                            </select>
86                    </li>
87                    <li>
88                        <label>
89                            <span>autoSize:</span></label><input type="checkbox" data-bind="checked: autoSize" />
90                    </li>
91                    <li>
92                        <label>
93                            <span>maxItemsCount:</span></label><input type="text" data-bind="value: maxItemsCount" />
94                    </li>
95                    <li>
96                        <label>
97                            <span>addHoverItemClass:</span></label><input type="checkbox" data-bind="checked: addHoverItemClass" />
98                    </li>
99                    <li>
100                        <label>
101                            <span>keepHightlightOnMouseLeave:</span></label><input type="checkbox" data-bind="checked: keepHightlightOnMouseLeave" />
102                    </li>
103                </ul>
104                <div>
105                    <input id="resetItem" value="reset items" type="button" />
106                </div>
107                <div>
108                    <table>
109                        <thead>
110                            <tr>
111                                <th>
112                                    listItems
113                                </th>
114                            </tr>
115                        </thead>
116                        <tbody data-bind="foreach: listItems">
117                            <tr>
118                                <td data-bind="text: label">
119                                </td>
120                                <td data-bind="text: value">
121                                </td>
122                            </tr>
123                        </tbody>
124                    </table>
125                </div>
126                <!-- End options markup -->
127            </div>
128        </div>
129        <div class="footer demo-description">
130            <p>
131                Wijmo provides a Knockout Integration Library so that all jQuery UI and Wijmo widgets
132                can be used with Knockout declarative syntax.
133            </p>
134        </div>
135    </div>
136</body>
137</html>
Note: See TracBrowser for help on using the repository browser.