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
Show whitespace changes
Inline Side-by-side
Showing with 30 additions and 21 deletions
index.html
View file @ 44d03ef1
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<title>Bootstrap Multiselect</title> <title>Bootstrap Multiselect</title>
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <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.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
...@@ -14,19 +14,6 @@ ...@@ -14,19 +14,6 @@
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script> <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
</head> </head>
<body> <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>
<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>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$('#example1').multiselect(); $('#example1').multiselect();
...@@ -46,6 +33,19 @@ ...@@ -46,6 +33,19 @@
}); });
}); });
</script> </script>
<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>
<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"> <table class="table table-striped">
<tr> <tr>
<td> <td>
......
js/bootstrap-multiselect.js
View file @ 44d03ef1
...@@ -21,9 +21,13 @@ ...@@ -21,9 +21,13 @@
"use strict"; // jshint ;_; "use strict"; // jshint ;_;
var Multiselect = function(element, options) { var Multiselect = function(element, options) {
// Default options:
var defaults = { var defaults = {
button: 'btn', button: 'btn',
width: 'auto', 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) { text: function(options) {
if (options.length == 0) { if (options.length == 0) {
return 'None selected'; return 'None selected';
...@@ -45,17 +49,21 @@ ...@@ -45,17 +49,21 @@
options = $.extend(defaults, options); options = $.extend(defaults, options);
var select = element, 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>') 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(), .dropdown(),
// The ul will hold all options and present the dropdown.
ul = $('<ul class="dropdown-menu"></ul>'), ul = $('<ul class="dropdown-menu"></ul>'),
container = $(options.container) container = $(options.container)
.append(button) .append(button)
.append(ul); .append(ul);
// Manually add the multiple attribute, if its not already set.
if (!$(select).attr('multiple')) { if (!$(select).attr('multiple')) {
$(select).attr('multiple', true); $(select).attr('multiple', true);
} }
// Build the dropdown.
$('option', select).each(function() { $('option', select).each(function() {
if ($(this).is(':selected')) { if ($(this).is(':selected')) {
$(this).attr('selected', true); $(this).attr('selected', true);
...@@ -78,6 +86,7 @@ ...@@ -78,6 +86,7 @@
$('li label', ul).css({'cursor': 'pointer'}); $('li label', ul).css({'cursor': 'pointer'});
// Bind the change event on the dropdown elements.
$('li input[type="checkbox"]', ul).on('change', function(event) { $('li input[type="checkbox"]', ul).on('change', function(event) {
var checked = $(this).attr('checked') || false; 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