Added comments, updated index.html.

44d03ef1 · David Stutz · fde25d3f · 44d03ef1 · 44d03ef1
Commit 44d03ef1 authored Nov 24, 2012 by David Stutz
Show whitespace changes
Inline Side-by-side

Showing with 30 additions and 21 deletions

index.html index.html +20 -20

bootstrap-multiselect.js js/bootstrap-multiselect.js +10 -1

No files found.
--- a/index.html
+++ b/index.html
@@ -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,19 +14,6 @@
 		<script type="text/javascript" src="js/bootstrap-multiselect.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>
-			<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">
 			$(document).ready(function() {
 				$('#example1').multiselect();
@@ -46,6 +33,19 @@
 				});
 			});
 		</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">
 				<tr>
 					<td>

--- a/js/bootstrap-multiselect.js
+++ b/js/bootstrap-multiselect.js
@@ -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;