Skip to content

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

Merge pull request #161 from edudar/issue_151_bootstrap_3_0 

Issue #151 bootstrap 3 0
parents a94cdbeb 89f7b7d1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 564 additions and 321 deletions
css/bootstrap-2.3.2.min.css deleted 100644 → 0
View file @ a94cdbeb
This source diff could not be displayed because it is too large. You can view the blob instead.
css/bootstrap-3.0.0.min.css 0 → 100755
View file @ 7a727d86
This diff is collapsed.
css/bootstrap-multiselect.css
View file @ 7a727d86
.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container input[type="text"]{width:70%}.multiselect-container .input-prepend{padding:3px}.multiselect-container>li{padding:0}.multiselect-container>li>label{margin:0;padding:3px 20px 3px 20px;height:100%;cursor:pointer}.multiselect-container>li>label.multiselect-header{margin:0;padding:3px 20px 3px 20px;height:100%}.multiselect-container>li>label>input[type="checkbox"]{margin-bottom:5px}
\ No newline at end of file .multiselect-container {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
}
.multiselect-container .input-group {
margin: 5px;
}
.multiselect-container > li {
padding: 0;
}
.multiselect-container > li > a.multiselect-all label {
font-weight: bold;
}
.multiselect-container > li > label.multiselect-group {
margin: 0;
padding: 3px 20px 3px 20px;
height: 100%;
}
.multiselect-container > li > a > label {
margin: 0;
height: 100%;
cursor: pointer;
font-weight: normal;
}
.multiselect-container > li > a > label.radio,
.multiselect-container > li > a > label.checkbox {
margin: 0;
}
.multiselect-container > li > a > label > input[type="checkbox"] {
margin-bottom: 5px;
}
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
fonts/glyphicons-halflings-regular.svg 0 → 100755
View file @ 7a727d86
This diff is collapsed.
index.html
View file @ 7a727d86
This diff is collapsed.
js/bootstrap-2.3.2.min.js deleted 100644 → 0
View file @ a94cdbeb
This diff is collapsed.
js/bootstrap-3.0.0.min.js 0 → 100755
View file @ 7a727d86
This diff is collapsed.
js/bootstrap-multiselect.js
View file @ 7a727d86
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
// If more than 3 options are selected, the number of selected options is printed. // If more than 3 options are selected, the number of selected options is printed.
buttonText: function(options, select) { buttonText: function(options, select) {
if (options.length == 0) { if (options.length == 0) {
return this.nonSelectedText + '<b class="caret"></b>'; return this.nonSelectedText + ' <b class="caret"></b>';
} }
else else
if (options.length > 3) { if (options.length > 3) {
...@@ -353,7 +353,7 @@ ...@@ -353,7 +353,7 @@
// Build and bind filter. // Build and bind filter.
buildFilter: function() { buildFilter: function() {
$('.multiselect-container', this.$container).prepend('<div class="input-prepend"><span class="add-on"><i class="icon-search"></i></span><input class="multiselect-search" type="text" placeholder="' + this.options.filterPlaceholder + '"></div>'); $('.multiselect-container', this.$container).prepend('<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text" placeholder="' + this.options.filterPlaceholder + '"></div>');
$('.multiselect-search', this.$container).val(this.query).on('click', function(event) { $('.multiselect-search', this.$container).val(this.query).on('click', function(event) {
event.stopPropagation(); event.stopPropagation();
......
knockout-examples.html
View file @ 7a727d86
...@@ -6,13 +6,13 @@ ...@@ -6,13 +6,13 @@
<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="David Stutz" /> <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/bootstrap-3.0.0.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
<link rel="stylesheet" href="css/prettify.css" type="text/css"> <link rel="stylesheet" href="css/prettify.css" type="text/css">
<script type="text/javascript" src="js/jquery-2.0.1.min.js"></script> <script type="text/javascript" src="js/jquery-2.0.1.min.js"></script>
<script type="text/javascript" src="js/knockout-2.3.0.js"></script> <script type="text/javascript" src="js/knockout-2.3.0.js"></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.min.js"></script> <script type="text/javascript" src="js/bootstrap-3.0.0.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> <script type="text/javascript" src="js/prettify.js"></script>
<style> <style>
...@@ -23,13 +23,11 @@ ...@@ -23,13 +23,11 @@
</head> </head>
<body> <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> <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 class="jumbotron">
<div style="text-align:center;"> <div class="container">
<h1 style="font-size:300%;margin: 26px 0px;">Bootstrap Multiselect</h1> <h1>Bootstrap Multiselect</h1>
<p class="lead"> <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>
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. </div>
</p>
</div>
</div> </div>
<div class="container"> <div class="container">
<div class="page-header"> <div class="page-header">
...@@ -71,7 +69,7 @@ ...@@ -71,7 +69,7 @@
</tr> </tr>
</table> </table>
</div> </div>
<div class="container-fluid"> <div class="container">
<hr> <hr>
<p> <p>
&copy; 2012, 2013 &copy; 2012, 2013
......
less/bootstrap-multiselect.less
View file @ 7a727d86
...@@ -3,13 +3,9 @@ ...@@ -3,13 +3,9 @@
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
input[type="text"] { .input-group {
width: 70%; margin: 5px;
}
.input-prepend {
padding: 3px;
} }
> li { > li {
...@@ -19,21 +15,36 @@ ...@@ -19,21 +15,36 @@
font-weight: bold; font-weight: bold;
} }
> label { > label.multiselect-group {
margin: 0; margin: 0;
padding: 3px 20px 3px 20px; padding: 3px 20px 3px 20px;
height: 100%; height: 100%;
cursor: pointer; font-weight: bold;
}
> a {
&.multiselect-header { > label {
margin: 0; margin: 0;
padding: 3px 20px 3px 20px;
height: 100%; height: 100%;
} cursor: pointer;
font-weight: normal;
&.radio, &.checkbox {
margin: 0;
}
> input[type="checkbox"] {
margin-bottom:5px;
}
> input[type="checkbox"] {
margin-bottom:5px;
} }
} }
} }
} }
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
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