Skip to content

Commit 54299aa

Browse files
craftpipcraftpip
committed
changed design, added clear check and fixed errors
added a full screen design for option selection. fixed multiple option selection check boxes, added a new clear button to clear checked options.
1 parent 3c789c4 commit 54299aa

6 files changed

+166
-77
lines changed

‎css/bootstrap-mobile-select.css

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.bootSelect {
2+
position: fixed;
3+
left: -15px;
4+
right: -15px;
5+
top: 0;
6+
bottom: 15px;
7+
z-index: 88;
8+
background-color: white;
9+
}
10+
.bootSelect * {
11+
border-radius: 0px;
12+
}
13+
.bootSelect .bootSelect-title {
14+
font-size: 1.5em;
15+
text-transform: capitalize;
16+
}
17+
.bootSelect .list-container {
18+
overflow: hidden;
19+
overflow-y: scroll;
20+
}
21+
.bootSelect .list-container a {
22+
display: block;
23+
background-color: #fff;
24+
border-bottom: solid 1px #ddd;
25+
padding: 10px 20px;
26+
}
27+
.bootSelect .list-container a:active {
28+
background-color: #ddd;
29+
}
30+
.bootSelect .list-container a:hover {
31+
text-decoration: none;
32+
}
33+
.bootSelect .list-container[data-multiple="true"] a {
34+
padding: 10px 20px 10px 10px;
35+
}
36+
.bootSelect .list-container[data-multiple="true"] a:before {
37+
content: '';
38+
background-color: #eee;
39+
height: 22px;
40+
width: 22px;
41+
display: inline-block;
42+
vertical-align: middle;
43+
margin-top: -2px;
44+
margin-right: 10px;
45+
border: solid 1px #ddd;
46+
background-image: url('../img/tick.png');
47+
background-repeat: no-repeat;
48+
background-position: -20px 0px;
49+
-webkit-transition: all .2s;
50+
transition: all .2s;
51+
}
52+
.bootSelect .list-container[data-multiple="true"] a.check:before {
53+
background-position: 0px 0px;
54+
}
55+
.bootSelect .list-container[data-multiple="false"] a.check {
56+
background-color: #eee;
57+
}

‎css/bootstrap-mobile-select.less

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.bootSelect{
2+
position: fixed;
3+
left: -15px;
4+
right: -15px;
5+
top: 0;
6+
bottom: 15px;
7+
z-index: 88;
8+
background-color: white;
9+
10+
*{
11+
border-radius: 0px;
12+
}
13+
14+
.bootSelect-title{
15+
font-size: 1.5em;
16+
text-transform: capitalize;
17+
}
18+
.list-container{
19+
overflow: hidden;
20+
overflow-y: scroll;
21+
22+
a{
23+
display: block;
24+
background-color: #fff;
25+
border-bottom: solid 1px #ddd;
26+
padding: 10px 20px;
27+
28+
&:active{
29+
background-color: #ddd;
30+
}
31+
&:hover{
32+
text-decoration: none;
33+
}
34+
35+
}
36+
}
37+
38+
.list-container[data-multiple="true"]{
39+
a{
40+
padding: 10px 20px 10px 10px;
41+
42+
&:before{
43+
content: '';
44+
background-color: #eee;
45+
height: 22px;
46+
width: 22px;
47+
display: inline-block;
48+
vertical-align: middle;
49+
margin-top: -2px;
50+
margin-right: 10px;
51+
border: solid 1px #ddd;
52+
background-image: url('../img/tick.png');
53+
background-repeat: no-repeat;
54+
background-position: -20px 0px;
55+
transition: all .2s;
56+
}
57+
58+
&.check:before{
59+
background-position: 0px 0px;
60+
61+
}
62+
}
63+
}
64+
.list-container[data-multiple="false"] {
65+
a{
66+
&.check{
67+
background-color: #eee;
68+
}
69+
}
70+
}
71+
72+
}
73+

‎img/tick.png

26.4 KB
Loading

‎index.html

+6-5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
66
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
7+
<link rel="stylesheet" type="text/css" href="css/bootstrap-mobile-select.css" />
78
<title>bootstrap select mobile</title>
89
</head>
910
<body>
@@ -47,11 +48,11 @@ <h1>2nd</h1>
4748
<script type="text/javascript">
4849
$(document).ready(function(){
4950

50-
bootSelect.init({
51-
selectControl: '#selectElem',
52-
on: '#triggerBy',
53-
title: 'Order by'
54-
});
51+
// bootSelect.init({
52+
// selectControl: '#selectElem',
53+
// on: '#triggerBy',
54+
// title: 'Order by'
55+
// });
5556

5657
bootSelect.init({
5758
selectControl: '#dasdas',

‎js/bootstrap-mobile-select.js

+25-19
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
// bootselect for mobile devices.
2-
// v1.1
3-
// www.craftpip.com
4-
1+
// |-------------------------------------------------|
2+
// | bootstrap select for mobile devices. v1.2 |
3+
// |-------------------------------------------------|
4+
// | made specially for use with cordova. |
5+
// |-------------------------------------------------|
6+
// | &copy; boniface pereira. www.craftpip.com |
7+
// |-------------------------------------------------|
8+
9+
510
var bootSelect = {
611
settings: {
712
template: 'js/bootstrap-mobile-template.html'
@@ -40,18 +45,12 @@ var bootSelect = {
4045

4146
$.get(bootSelect.settings.template, function(d){
4247

43-
$('body').prepend('<div class="bootSelect" style="display:none" data-obj="'+object.on.substr(1)+'"></div>');
44-
48+
$('body').prepend('<div class="bootSelect" style="display:" data-obj="'+object.on.substr(1)+'"></div>');
4549
$bs = $('.bootSelect[data-obj="'+object.on.substr(1)+'"]');
46-
4750
$bs.html(d);
48-
4951
$bs.find('.bootSelect-title').html(object.title || 'select one');
50-
51-
$bs.find('.list-container').css('height', $(window).height()-140+'px');
52-
52+
$bs.find('.list-container').css('height', $(window).height()-120+'px');
5353
$bs.find('.list-container').attr('data-multiple', object.isMultiple);
54-
5554
var obj = bootSelect[object.on];
5655

5756
$.each(obj.array, function(i,a){
@@ -64,37 +63,44 @@ var bootSelect = {
6463
eventsLoaded: false,
6564

6665
events:function(object){
67-
$(document).on('click', object.on, function(e){
6866

67+
$(document).on('click', object.on, function(e){
6968
$('.bootSelect[data-obj="'+object.on.substr(1)+'"]').show();
7069
bootSelect.syncR(object.on);
7170

7271
});
73-
},
7472

75-
displayContainer:function(object){
76-
// console.log(bootSelect['#'+id]);
77-
// console.log(object);
7873
},
7974

8075
baseEvents: function(){
76+
8177
if(this.eventsLoaded) return false;
8278

8379
$(window).resize(function(){
84-
$('.bootSelect .list-container').css('height', $(window).height()-140+'px');
80+
$('.bootSelect .list-container').css('height', $(window).height()-120+'px');
8581
});
8682

87-
$(document).on('click', '.bootSelect .bootSelect-btncancel', function(){
83+
$(document).on('click', '.bootSelect .bootSelect-btncancel', function(e){
8884
$(this).parents('.bootSelect').hide();
85+
return false;
8986
});
9087

9188
$(document).on('click', '.bootSelect .bootSelect-btnsave', function(){
9289
var a = $(this).parents('.bootSelect');
9390
bootSelect.sync(a) ? $(this).parents('.bootSelect').hide() : '';
91+
return false;
92+
});
93+
94+
$(document).on('click', '.bootSelect .bootSelect-btnclear', function(){
95+
var a = $(this).parents('.bootSelect');
96+
a.find('.check').removeClass('check');
97+
a.find('.bootSelect-btnsave').trigger('click');
98+
return false;
9499
});
95100

96101
$(document).on('click', '.bootSelect .list-container a.bs-control', function(e){
97102
bootSelect.clickCheck(e);
103+
return false;
98104
});
99105

100106
this.eventsLoaded = true;

‎js/bootstrap-mobile-template.html

+5-53
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,3 @@
1-
<style type="text/css">
2-
.bootSelect{
3-
position: fixed;
4-
left: 0;
5-
right: 0;
6-
top: 15px;
7-
bottom: 15px;
8-
z-index: 88;
9-
}
10-
.bootSelect .list-container{
11-
overflow: hidden;
12-
overflow-y: scroll;
13-
}
14-
.bootSelect .list-container a{
15-
display: block;
16-
background-color: #fff;
17-
border-bottom: solid 1px #ddd;
18-
padding: 10px 20px;
19-
}
20-
.bootSelect .list-container[data-multiple="true"] a{
21-
padding: 10px 20px 10px 50px;
22-
}
23-
.bootSelect .list-container[data-multiple="true"] a:before{
24-
content: '';
25-
background-color: #eee;
26-
position: absolute;
27-
height: 20px;
28-
width: 20px;
29-
margin-left: -30px;
30-
border: solid 1px #ddd;
31-
background-image: url('img/tick.png');
32-
background-repeat: no-repeat;
33-
background-position: 20px 0px;
34-
/*transition: all .4s;*/
35-
}
36-
.bootSelect .list-container[data-multiple="true"] a.check:before{
37-
background-position: 0px 0px;
38-
}
39-
40-
.bootSelect .list-container[data-multiple="false"] a.check{
41-
background-color: #eee;
42-
}
43-
44-
.bootSelect .list-container a:active{
45-
background-color: #ddd;
46-
}
47-
.bootSelect .list-container a:hover{
48-
text-decoration: none;
49-
}
50-
51-
</style>
52-
531
<div class="container-fluid">
542
<div class="row">
553
<div class="col-lg-12">
@@ -62,11 +10,15 @@
6210
</div>
6311
<div class="panel-footer">
6412
<div class="btn-group btn-group-justified">
65-
<a href="#" class="btn btn-default btn-lg
13+
<a href="#" class="btn btn-success btn-lg
6614
bootSelect-btnsave">
6715
Save
6816
</a>
6917
<a href="#" class="btn btn-default btn-lg
18+
bootSelect-btnclear">
19+
Clear
20+
</a>
21+
<a href="#" class="btn btn-default btn-lg
7022
bootSelect-btncancel">
7123
Cancel
7224
</a>

0 commit comments

Comments
 (0)