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 @@ ...@@ -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,6 +14,25 @@ ...@@ -14,6 +14,25 @@
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script> <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
</head> </head>
<body> <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="container">
<div class="hero-unit"> <div class="hero-unit">
<h1>Bootstrap Multiselect</h1> <h1>Bootstrap Multiselect</h1>
...@@ -27,25 +46,6 @@ ...@@ -27,25 +46,6 @@
<p> <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. 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> </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"> <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