forked from davidstutz/bootstrap-multiselect
-
Notifications
You must be signed in to change notification settings - Fork 0
/
knockout-examples.html
122 lines (109 loc) · 4.88 KB
/
knockout-examples.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Multiselect</title>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="copyright" content="David Stutz" />
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
<link rel="stylesheet" href="css/prettify.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/knockout-2.2.1.debug.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
<style>
table tr td {
width: 25%;
}
</style>
</head>
<body>
<a href="https://github.com/davidstutz/bootstrap-multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="container-fluid" style="background:#F5F5F5;border-bottom:1px solid #DDDDDD;margin-bottom:16px;">
<div style="text-align:center;">
<h1 style="font-size:300%;margin: 26px 0px;">Bootstrap Multiselect</h1>
<p class="lead">
Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
</p>
</div>
</div>
<div class="container">
<div class="page-header">
<h1>Knockout Examples</h1>
</div>
<p>
The best way learning from the examples is using firebug, chrome developer tools or similar tools for your browser. Examine the generated markup and used javascript code.
</p>
<table class="table table-striped">
<tr>
<td>Select</td>
<td>Selected values</td>
<td>Info</td>
<td></td>
</tr>
<tr id="vm1">
<td>
<select multiple="multiple" data-bind="options: items, selectedOptions: selectedItems, multiselect: multiSelectInitOptions"></select>
</td>
<td><span data-bind="text: ko.toJSON(selectedItems())" /></td>
<td>Basic knockout multiselect example with select all options enabled. Notice that once an item is added to the collection, the select all option isn't checked anymore because it isn't true anymore.
</td>
<th><button data-bind="click: addItem" class="btn btn-primary">Add item</button></th>
</tr>
<tr id="vm2">
<td>
<select multiple="multiple" data-bind="selectedOptions: selectedItems, multiselect: multiSelectInitOptions">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</td>
<td><span data-bind="text: ko.toJSON(selectedItems())" /></td>
<td>Basic knockout multiselect example with html-based options list. Notice that once an item is added to the collection, the select all option isn't checked anymore because it isn't true anymore.</td>
<td></td>
</tr>
</table>
</div>
<div class="container-fluid">
<hr>
<p>
© 2012
<a href="http://davidstutz.de">David Stutz</a> - <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>
</p>
</div>
</body>
</html>
<script>
var viewModel1 = function () {
var self = this;
self.items = ko.observableArray([]);
self.multiSelectInitOptions = {
includeSelectAllOption: true,
enableFiltering:true
};
self.selectedItems = ko.observableArray([]);
self.addItem = function() {
self.items.push('new item ' + (self.items().length + 1));
};
return self;
};
var viewModel2 = function () {
var self = this;
self.items = ko.observableArray([]);
self.multiSelectInitOptions = {
includeSelectAllOption: true,
enableFiltering: true
};
self.selectedItems = ko.observableArray([]);
return self;
};
var vm1 = new viewModel1();
var vm2 = new viewModel2();
ko.applyBindings(vm1, $('#vm1')[0]);
ko.applyBindings(vm2, $('#vm2')[0]);
</script>