Skip to content

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

Merge pull request #61 from luisrudge/master 

Fixes knockout integration issues.
parents 40ecc04a 66a60cbe
Hide whitespace changes
Inline Side-by-side
Showing with 3708 additions and 53 deletions
js/bootstrap-multiselect.js
View file @ e9d6e143
......@@ -22,30 +22,24 @@
if(typeof ko != 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect){
ko.bindingHandlers.multiselect = {
init: function (element) {
var ms = $(element).data('multiselect');
if(!ms)
throw new Error("Bootstrap-multiselect's multiselect() has to be called on element before applying the Knockout View model!");
var prev = ms.options.onChange;
ms.options.onChange = function(option, checked){
// We dont want to refresh the multiselect since it would delete / recreate all items
$(element).data('blockRefresh', true);
// Force the binding to be updated by triggering the change event on the select element
$(element).trigger('change');
// Call any defined change handler
return prev(option, checked);
}
},
update: function (element) {
var blockRefresh = $(element).data('blockRefresh') || false;
if (!blockRefresh) { $(element).multiselect("rebuild"); }
$.data(element, 'blockRefresh', false);
}
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var multiSelectData = valueAccessor();
var options = multiSelectData.options;
var optionsText = allBindingsAccessor().optionsText;
var optionsValue = allBindingsAccessor().optionsValue;
ko.applyBindingsToNode(element, { options: options, optionsValue: optionsValue, optionsText: optionsText }, viewModel);
var ms = $(element).data('multiselect');
if (ms) {
$(element).multiselect('rebuild');
} else {
$(element).multiselect(ko.utils.unwrapObservable(multiSelectData.initOptions));
}
}
};
}
......@@ -158,11 +152,12 @@
// Build the dropdown and bind event handling.
buildDropdown: function () {
var alreadyHasSelectAll = this.$select[0][0].value == 'select-all-option';
//If options.includeSelectAllOption === true, add the include all checkbox
if (this.options.includeSelectAllOption && this.options.multiple) {
if (this.options.includeSelectAllOption && this.options.multiple && !alreadyHasSelectAll) {
this.$select.prepend('<option value="select-all-option">' + this.options.selectAllText + '</option>');
}
}
this.$select.children().each($.proxy(function (index, element) {
// Support optgroups and options without a group simultaneously.
var tag = $(element).prop('tagName').toLowerCase();
......@@ -366,7 +361,7 @@
// Rebuild the whole dropdown menu.
rebuild: function() {
$('ul', this.$container).html('');
$('ul', this.$container).html('');
this.buildDropdown(this.$select, this.options);
this.updateButtonText();
},
......@@ -381,35 +376,27 @@
$('button', this.$container).html(this.options.buttonText(options, this.$select));
},
// For IE 9 support.
getSelected: function() {
//if (navigator.appName == 'Microsoft Internet Explorer') {
// var regex = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
// if (regex.exec(navigator.userAgent) != null) {
// return $('option:selected[value!="select-all-option"]', this.$select);
// }
//}
getSelected: function() {
return $('option:selected[value!="select-all-option"]', this.$select);
}
};
$.fn.multiselect = function (option, parameter) {
return this.each(function () {
var data = $(this).data('multiselect'),
options = typeof option == 'object' && option;
// Initialize the multiselect.
if (!data) {
$(this).data('multiselect', (data = new Multiselect(this, options)));
}
// Call multiselect method.
if (typeof option == 'string') {
data[option](parameter);
}
});
}
$.fn.multiselect = function(option, parameter) {
return this.each(function() {
var data = $(this).data('multiselect'),
options = typeof option == 'object' && option;
// Initialize the multiselect.
if (!data) {
$(this).data('multiselect', (data = new Multiselect(this, options)));
}
// Call multiselect method.
if (typeof option == 'string') {
data[option](parameter);
}
});
};
$(function() {
$("select[data-role=multiselect]").multiselect();
......
js/knockout-2.2.1.debug.js 0 → 100644
View file @ e9d6e143
This source diff could not be displayed because it is too large. You can view the blob instead.
knockout-examples.html 0 → 100644
View file @ e9d6e143
<!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>
</head>
<body>
<div class="container">
<div class="hero-unit">
<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>
<p class="alert alert-info">
<b>Note:</b> The option names may have changed due to the latest updates.
</p>
<div class="page-header">
<h1>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 multiple="multiple" data-bind="multiselect: { initOptions: multiSelectInitOptions, options: items() }, optionsText: 'text', optionsValue: 'id'">
</select>
<br />
<span data-bind="text: ko.toJSON(items())" />
</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>
</tr>
</table>
<hr>
<p>
&copy; 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 viewModel = function () {
var self = this;
self.items = ko.observableArray([
{ id: 1, text: 'item 1' },
{ id: 2, text: 'item 2' },
{ id: 3, text: 'item 3' },
{ id: 4, text: 'item 4' },
{ id: 5, text: 'item 5' },
]);
self.multiSelectInitOptions = {
includeSelectAllOption: true
};
return self;
};
var vm = new viewModel();
ko.applyBindings(vm);
//simulating changes on the observable
var t = setInterval(function () {
if (vm.items().length >= 15) clearInterval(t);
vm.items.push({ id: vm.items().length + 1, text: 'item ' + (vm.items().length + 1) });
}, 1000);
</script>
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