Skip to content

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

Added comments, updated index.html.

parent fde25d3f
Hide whitespace changes
Inline Side-by-side
Showing with 30 additions and 21 deletions
index.html
View file @ 44d03ef1
......@@ -4,7 +4,7 @@
<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="RS Computer" />
<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">
......@@ -14,6 +14,25 @@
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#example1').multiselect();
$('#example2').multiselect();
$('#example3').multiselect({
button: 'btn btn-link'
});
$('#example4').multiselect({
button: 'btn btn-small'
});
$('#example5').multiselect({
button: 'btn btn-primary disabled'
});
$('#example6').multiselect();
$('.example7').multiselect({
container: '<span class="dropdown" />',
});
});
</script>
<div class="container">
<div class="hero-unit">
<h1>Bootstrap Multiselect</h1>
......@@ -27,25 +46,6 @@
<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>
<script type="text/javascript">
$(document).ready(function() {
$('#example1').multiselect();
$('#example2').multiselect();
$('#example3').multiselect({
button: 'btn btn-link'
});
$('#example4').multiselect({
button: 'btn btn-small'
});
$('#example5').multiselect({
button: 'btn btn-primary disabled'
});
$('#example6').multiselect();
$('.example7').multiselect({
container: '<span class="dropdown" />',
});
});
</script>
<table class="table table-striped">
<tr>
<td>
......
js/bootstrap-multiselect.js
View file @ 44d03ef1
......@@ -21,9 +21,13 @@
"use strict"; // jshint ;_;
var Multiselect = function(element, options) {
// Default options:
var defaults = {
button: 'btn',
width: 'auto',
// Default text function will either print 'None selected' in case no option is selected,
// or a list of the selected options up to a length of 3 selected options.
// If more than 3 options are selected, the number of selected options is printed.
text: function(options) {
if (options.length == 0) {
return 'None selected';
......@@ -45,17 +49,21 @@
options = $.extend(defaults, options);
var select = element,
// Create the button with given classes and the inital text.
button = $('<button style="width:' + options.width + '" class="dropdown-toggle ' + options.button + '" data-toggle="dropdown">' + options.text($('option:selected', select)) + ' <b class="caret"></b></button>')
.dropdown(),
// The ul will hold all options and present the dropdown.
ul = $('<ul class="dropdown-menu"></ul>'),
container = $(options.container)
.append(button)
.append(ul);
// Manually add the multiple attribute, if its not already set.
if (!$(select).attr('multiple')) {
$(select).attr('multiple', true);
}
// Build the dropdown.
$('option', select).each(function() {
if ($(this).is(':selected')) {
$(this).attr('selected', true);
......@@ -78,6 +86,7 @@
$('li label', ul).css({'cursor': 'pointer'});
// Bind the change event on the dropdown elements.
$('li input[type="checkbox"]', ul).on('change', function(event) {
var checked = $(this).attr('checked') || false;
......
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