Skip to content

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

Fixed #82. Added beta js and demo html. The "new" multiselect will be more... 

Fixed #82. Added beta js and demo html. The "new" multiselect will be more structured but hopefully offering the same possibilities with better performance.
parent c70bcda7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1102 additions and 6733 deletions
beta.html 0 → 100644
View file @ f906e4ba
<!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-2.3.2.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/bootstrap-2.3.2.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.beta.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
<style>
.multiselect-all label {
font-weight: bold;
}
</style>
</head>
<body>
<a href="https://github.com/davidstutz/bootstrap-multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="container-fluid" style="background:#F5F5F5;border-bottom:1px solid #DDDDDD;margin-bottom:16px;">
<div style="text-align:center;">
<h1 style="font-size:300%;margin: 26px 0px;">Bootstrap Multiselect</h1>
<p class="lead">
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>
<div class="container">
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect();
});
</script>
<select id="example">
<optgroup label="1">
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
<optgroup label="2">
<option value="3">3</option>
<option value="4">4</option>
</optgroup>
<optgroup label="3">
<option value="5">5</option>
<option value="6">6</option>
</optgroup>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div class="container-fluid">
<hr>
<p>
&copy; 2012, 2013
<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>
css/bootstrap-2.1.1.min.css 0 → 100644
View file @ f906e4ba
This source diff could not be displayed because it is too large. You can view the blob instead.
css/bootstrap-2.3.2.min.css
View file @ f906e4ba
This source diff could not be displayed because it is too large. You can view the blob instead.
css/bootstrap-responsive.min.css deleted 100644 → 0
View file @ c70bcda7
This diff is collapsed.
index.html
View file @ f906e4ba
......@@ -6,12 +6,11 @@
<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/bootstrap-2.3.2.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/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-2.0.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
<style>
......@@ -122,7 +121,8 @@
$('#example24').multiselect();
$('#example25').multiselect({
dropRight: true
dropRight: true,
buttonWidth: '300px'
});
$('#example27').multiselect({
......
js/bootstrap-2.3.2.min.js
View file @ f906e4ba
This diff is collapsed.
js/bootstrap-multiselect.beta.js 0 → 100644
View file @ f906e4ba
/**
* bootstrap-multiselect.js 1.0.0
* https://github.com/davidstutz/bootstrap-multiselect
*
* Copyright 2012 David Stutz
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
!function ($) {
"use strict"; // jshint ;_;
/**
* Constructor.
*
* The constructor builds the dropdown and assigns event handling.
*
* @param object select
* @param object options
*/
function Multiselect(select, config) {
// Reference the current instance so proxy is not needed.
var self = this;
// Configuration is saved as config, so the plugin "configuration" and select "options" can be distinguished.
self.config = self.mergeConfig(config);
// The select options are saved in an internal data structure, which can be updated by refreh.
self.options = $('> optgroup, > option', $(select))
console.log(this.options);
// Save the select for refreshing the options later on.
self.select = select;
var ul = $('<ul class="dropdown-menu" role="dropdown"></ul>');
function buildLiFromOption(option) {
var label = $(option).attr('label') || $(option).text();
var value = $(option).val();
return $('<li><a href="#"><input type="checkbox" value="' + value + '" />' + label + '</a></li>');
}
// Now build up the dropdown list using checkboxes and labels.
$.each(self.options, function(index, element) {
var tag = $(element).prop('tagName');
if (tag.toLowerCase() == 'optgroup') {
$('> option', element).each(function() {
ul.append(buildLiFromOption(this));
});
}
else if (tag.toLowerCase() == 'option') {
ul.append(buildLiFromOption(element));
}
});
var container = $('<div class="dropdown"><button class="btn dropdown-toggle" data-toggle="dropdown">open</button></div>');
container.append(ul);
$(self.select).after(container);
$('> li > a').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
});
$('> li > a > checkbox', ul).on('click', function(event) {
console.log($(this).val());
this.select($(this).val());
});
};
Multiselect.prototype = {
/**
* @property object default options
*/
defaults: {
},
constructor: Multiselect,
/**
* Select the option represented by the given value.
*
* @param string value
*/
select: function(value) {
},
/**
* Deselect the option represented by the value.
*
* @param string value
*/
deselect: function(value) {
},
/**
* Destroy/unbind the plugin.
*/
destroy: function() {
},
/**
* Refresh the options.
*/
refresh: function() {
},
/**
* Get the selected options.
*
* @return selected
*/
selected: function() {
},
/**
* Get all deselected options
*
* @return deselected
*/
deselected: function() {
},
/**
* Merge the given and the default configuration options.
*
* @param object options
*/
mergeConfig: function(config) {
return $.extend({}, this.defaults, config);
},
};
$.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.Constructor = Multiselect;
$(function() {
$('select[data-role=multiselect]').multiselect();
});
}(window.jQuery);
js/bootstrap-multiselect.js
View file @ f906e4ba
......@@ -47,7 +47,7 @@
this.options.multiple = this.$select.attr('multiple') == "multiple";
this.$container = $(this.options.buttonContainer)
.append('<ul class="multiselect-container dropdown-menu" style="position:absolute; list-style-type: none;margin:0;padding:0;"></ul>')
.append('<ul class="multiselect-container dropdown-menu' + (this.options.dropRight ? ' pull-right' : '') + '" style="position:absolute; list-style-type: none;margin:0;padding:0;"></ul>')
.append('<button type="button" class="multiselect dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText(this.getSelected(), this.$select) + '</button>')
;
......
js/bootstrap.js deleted 100644 → 0
View file @ c70bcda7
This diff is collapsed.
js/jquery-2.0.1.min.js 0 → 100644
View file @ f906e4ba
This diff is collapsed.
js/jquery.min.js deleted 100644 → 0
View file @ c70bcda7
This diff is collapsed.
js/knockout.debug.js deleted 100644 → 0
View file @ c70bcda7
This diff is collapsed.
knockout-examples.html
View file @ f906e4ba
......@@ -6,12 +6,11 @@
<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/bootstrap-3.3.2.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.debug.js"></script>
<script type="text/javascript" src="js/jquery-2.0.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.min.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>
......
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