Skip to content

B
bootstrap-multiselect
Commit ee21b260 authored by David Stutz's avatar David Stutz
Browse files
Options

#193 and removed knockout examples.

parent d1f06f7f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 16 additions and 221 deletions
js/bootstrap-multiselect.js
View file @ ee21b260
......@@ -12,19 +12,22 @@
if (typeof ko !== 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect) {
ko.bindingHandlers.multiselect = {
init : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {},
update : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var ms = $(element).data('multiselect');
if (!ms) {
$(element).multiselect(ko.utils.unwrapObservable(valueAccessor()));
}
else if (allBindingsAccessor().options && allBindingsAccessor().options().length !== ms.originalOptions.length) {
ms.updateOriginalOptions();
$(element).multiselect('rebuild');
}
else {
ms.refresh();
}
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {},
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var config = ko.utils.unwrapObservable(valueAccessor());
var selectOptions = allBindingsAccessor().options();
var ms = $(element).data('multiselect');
if (!ms) {
$(element).multiselect(config);
}
else {
ms.updateOriginalOptions();
if (selectOptions && selectOptions.length !== ms.originalOptions.length) {
$(element).multiselect('rebuild');
}
}
}
};
}
......
js/knockout-2.3.0.js deleted 100644 → 0
View file @ d1f06f7f
This diff is collapsed.
knockout-examples.html deleted 100644 → 0
View file @ d1f06f7f
<!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-3.0.0.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
<link rel="stylesheet" href="css/prettify.css" type="text/css">
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/knockout-2.3.0.js"></script>
<script type="text/javascript" src="js/bootstrap-3.0.0.min.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="jumbotron">
<div class="container">
<h1>Bootstrap Multiselect</h1>
<p>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">
<hr>
<p>
&copy; 2012, 2013
<a href="http://davidstutz.de">David Stutz</a> - dual licensed: <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>, <a href="http://opensource.org/licenses/BSD-3-Clause">BSD 3-Clause License</a>
</p>
</div>
<script type="text/javascript">
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>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment