Skip to content

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

Added prettify and disabled options example. 

Added google code prettify and an example for disabled state.
parent 6104def1
Expand all Show whitespace changes
Inline Side-by-side
Showing with 801 additions and 746 deletions
css/prettify.css 0 → 100644
View file @ 57dfc65d
.com { color: #93a1a1; }
.lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; }
.str, .atv { color: #D14; }
.kwd, .prettyprint .tag { color: #1e347b; }
.typ, .atn, .dec, .var { color: teal; }
.pln { color: #48484c; }
.prettyprint {
padding: 8px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
.prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin: 0 0 0 33px; /* IE indents via margin-left */
}
ol.linenums li {
padding-left: 12px;
color: #bebec5;
line-height: 20px;
text-shadow: 0 1px 0 #fff;
}
\ No newline at end of file
index.html
View file @ 57dfc65d
...@@ -8,14 +8,18 @@ ...@@ -8,14 +8,18 @@
<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">
<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/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script> <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
</head> </head>
<body> <body>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
window.prettyPrint() && prettyPrint();
$('#example1').multiselect(); $('#example1').multiselect();
$('#example2').multiselect(); $('#example2').multiselect();
...@@ -51,6 +55,8 @@ ...@@ -51,6 +55,8 @@
$('#example11').multiselect({ $('#example11').multiselect({
maxHeight: 200, maxHeight: 200,
}) })
$('#example13').multiselect();
}); });
</script> </script>
<div class="container"> <div class="container">
...@@ -213,6 +219,18 @@ ...@@ -213,6 +219,18 @@
For long option lists the <code>maxheight</code> option can be set. For long option lists the <code>maxheight</code> option can be set.
</td> </td>
</tr> </tr>
<tr>
<td>
<select id="example13" multiple="multiple">
<option value="enabled1">Enabled 1</option>
<option value="enabled2">Enabled 2</option>
<option value="disabled2" disabled="disabled">Disabled 1</option>
</select>
</td>
<td>
The plugin supports disabled options, too: <code>disabled=&quot;disabled&quot;</code>
</td>
</tr>
</table> </table>
<div class="page-header"> <div class="page-header">
<h1>Methods</h1> <h1>Methods</h1>
...@@ -331,7 +349,7 @@ ...@@ -331,7 +349,7 @@
<p> <p>
Basic markup used in the above examples: Basic markup used in the above examples:
</p> </p>
<pre> <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot; type=&quot;text/css&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot; type=&quot;text/css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap-responsive.min.css&quot; type=&quot;text/css&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap-responsive.min.css&quot; type=&quot;text/css&quot;&gt;
...@@ -402,7 +420,7 @@ ...@@ -402,7 +420,7 @@
<td><code>buttonText</code></td> <td><code>buttonText</code></td>
<td>A function returning the string displayed if options are selected. All currently selected options are passed as argument. In addition HTML can be added to the button, for example the caret icon seen in the examples.</td> <td>A function returning the string displayed if options are selected. All currently selected options are passed as argument. In addition HTML can be added to the button, for example the caret icon seen in the examples.</td>
<td> <td>
<pre> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
...@@ -431,7 +449,7 @@ ...@@ -431,7 +449,7 @@
<td><code>buttonClass</code></td> <td><code>buttonClass</code></td>
<td>The width of the dropdown button. Default: <code>btn</code>.</td> <td>The width of the dropdown button. Default: <code>btn</code>.</td>
<td> <td>
<pre> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
...@@ -454,7 +472,7 @@ ...@@ -454,7 +472,7 @@
</ul> </ul>
</td> </td>
<td> <td>
<pre> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
...@@ -471,7 +489,7 @@ ...@@ -471,7 +489,7 @@
The used container holding both the dropdown button and the dropdown menu. Default: <code>&lt;div class="btn-group" /&gt;</code>. The used container holding both the dropdown button and the dropdown menu. Default: <code>&lt;div class="btn-group" /&gt;</code>.
</td> </td>
<td> <td>
<pre> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
...@@ -488,7 +506,7 @@ ...@@ -488,7 +506,7 @@
This event handler is triggered when the selected options are changed. This event handler is triggered when the selected options are changed.
</td> </td>
<td> <td>
<pre> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
...@@ -507,7 +525,7 @@ ...@@ -507,7 +525,7 @@
Used for a long list of options this option defines the maximum height of the dropdown menu. If the size is exceeded a scrollbar will appear. Used for a long list of options this option defines the maximum height of the dropdown menu. If the size is exceeded a scrollbar will appear.
</td> </td>
<td> <td>
<pre> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
......
js/bootstrap-multiselect.js
View file @ 57dfc65d
...@@ -79,6 +79,40 @@ ...@@ -79,6 +79,40 @@
}; };
Multiselect.prototype = { Multiselect.prototype = {
defaults: {
// 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.
buttonText: function(options) {
if (options.length == 0) {
return 'None selected <b class="caret"></b>';
}
else if (options.length > 3) {
return options.length + ' selected <b class="caret"></b>';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
}
},
// Is triggered on change of the selected options.
onChange: function() {
},
buttonClass: 'btn',
buttonWidth: 'auto',
buttonContainer: '<div class="btn-group" />',
// Maximum height of thet dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed.
maxHeight: 400
},
constructor: Multiselect,
buildDrowdown: function(select, options){ buildDrowdown: function(select, options){
// Build the dropdown. // Build the dropdown.
...@@ -92,9 +126,11 @@ ...@@ -92,9 +126,11 @@
var selected = $(element).prop('selected') || false; var selected = $(element).prop('selected') || false;
var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.container); var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.container);
if ($(element).is(':disabled')) { if ($(element).is(':disabled')) {
checkbox.attr('disabled', 'disabled').prop('disabled','disabled').parents('li').addClass('disabled') checkbox.attr('disabled', 'disabled').prop('disabled','disabled').parents('li').addClass('disabled')
} }
checkbox.prop('checked', selected); checkbox.prop('checked', selected);
if (selected) { if (selected) {
...@@ -134,39 +170,6 @@ ...@@ -134,39 +170,6 @@
}); });
}, },
defaults: {
// 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.
buttonText: function(options) {
if (options.length == 0) {
return 'None selected <b class="caret"></b>';
}
else if (options.length > 3) {
return options.length + ' selected <b class="caret"></b>';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
}
},
// Is triggered on change of the selected options.
onChange: function() {
},
buttonClass: 'btn',
buttonWidth: 'auto',
buttonContainer: '<div class="btn-group" />',
// Maximum height of thet dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed.
maxHeight: 400
},
constructor: Multiselect,
// Destroy - unbind - the plugin. // Destroy - unbind - the plugin.
destroy: function() { destroy: function() {
this.container.remove(); this.container.remove();
......
js/jquery.min - Kopie.js 0 → 100644
View file @ 57dfc65d
This diff is collapsed.
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