Skip to content

Commit a466dd8

Browse files
craftpipcraftpip
committed
some changes
1 parent 54299aa commit a466dd8

5 files changed

+96
-20
lines changed

‎css/bootstrap-mobile-select.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,12 @@
4545
border: solid 1px #ddd;
4646
background-image: url('../img/tick.png');
4747
background-repeat: no-repeat;
48-
background-position: -20px 0px;
48+
background-position: 21px 0px;
4949
-webkit-transition: all .2s;
5050
transition: all .2s;
5151
}
5252
.bootSelect .list-container[data-multiple="true"] a.check:before {
53-
background-position: 0px 0px;
53+
background-position: 1px 0px;
5454
}
5555
.bootSelect .list-container[data-multiple="false"] a.check {
5656
background-color: #eee;

‎css/bootstrap-mobile-select.less

+2-2
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,12 @@
5151
border: solid 1px #ddd;
5252
background-image: url('../img/tick.png');
5353
background-repeat: no-repeat;
54-
background-position: -20px 0px;
54+
background-position: 21px 0px;
5555
transition: all .2s;
5656
}
5757

5858
&.check:before{
59-
background-position: 0px 0px;
59+
background-position: 1px 0px;
6060

6161
}
6262
}

‎index.html

+75-8
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,78 @@
88
<title>bootstrap select mobile</title>
99
</head>
1010
<body>
11+
<style type="text/css">
12+
body{
13+
background-color: #eee;
14+
}
15+
.col-lg-8{
16+
background-color: #fff;
17+
}
18+
</style>
19+
20+
<div class="container">
21+
<div class="row">
22+
<div class="col-md-12">
23+
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
24+
<div class="container-fluid">
25+
<!-- Brand and toggle get grouped for better mobile display -->
26+
<div class="navbar-header">
27+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
28+
<span class="sr-only">Toggle navigation</span>
29+
<span class="icon-bar"></span>
30+
<span class="icon-bar"></span>
31+
<span class="icon-bar"></span>
32+
</button>
33+
<a class="navbar-brand" href="#">Brand</a>
34+
</div>
35+
36+
<!-- Collect the nav links, forms, and other content for toggling -->
37+
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
38+
<ul class="nav navbar-nav">
39+
<li class="active"><a href="#">Link</a></li>
40+
<li><a href="#">Link</a></li>
41+
<li class="dropdown">
42+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
43+
<ul class="dropdown-menu" role="menu">
44+
<li><a href="#">Action</a></li>
45+
<li><a href="#">Another action</a></li>
46+
<li><a href="#">Something else here</a></li>
47+
<li class="divider"></li>
48+
<li><a href="#">Separated link</a></li>
49+
<li class="divider"></li>
50+
<li><a href="#">One more separated link</a></li>
51+
</ul>
52+
</li>
53+
</ul>
54+
<form class="navbar-form navbar-left" role="search">
55+
<div class="form-group">
56+
<input type="text" class="form-control" placeholder="Search">
57+
</div>
58+
<button type="submit" class="btn btn-default">Submit</button>
59+
</form>
60+
<ul class="nav navbar-nav navbar-right">
61+
<li><a href="#">Link</a></li>
62+
<li class="dropdown">
63+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
64+
<ul class="dropdown-menu" role="menu">
65+
<li><a href="#">Action</a></li>
66+
<li><a href="#">Another action</a></li>
67+
<li><a href="#">Something else here</a></li>
68+
<li class="divider"></li>
69+
<li><a href="#">Separated link</a></li>
70+
</ul>
71+
</li>
72+
</ul>
73+
</div><!-- /.navbar-collapse -->
74+
</div><!-- /.container-fluid -->
75+
</nav>
76+
</div>
77+
</div>
78+
</div>
1179

1280
<div class="container">
1381
<div class="row">
14-
<div class="col-lg-12">
82+
<div class="col-lg-8 col-lg-offset-2">
1583
<h1>Basic usage</h1>
1684
<p></p>
1785

@@ -25,8 +93,7 @@ <h1>Basic usage</h1>
2593
</select>
2694

2795
<code>$('asdasd')</code>
28-
</div>
29-
<div class="col-lg-12">
96+
3097
<h1>2nd</h1>
3198
<p></p>
3299

@@ -48,11 +115,11 @@ <h1>2nd</h1>
48115
<script type="text/javascript">
49116
$(document).ready(function(){
50117

51-
// bootSelect.init({
52-
// selectControl: '#selectElem',
53-
// on: '#triggerBy',
54-
// title: 'Order by'
55-
// });
118+
bootSelect.init({
119+
selectControl: '#selectElem',
120+
on: '#triggerBy',
121+
title: 'Order by'
122+
});
56123

57124
bootSelect.init({
58125
selectControl: '#dasdas',

‎js/bootstrap-mobile-select.js

+16-7
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
// |-------------------------------------------------|
23
// | bootstrap select for mobile devices. v1.2 |
34
// |-------------------------------------------------|
@@ -6,7 +7,6 @@
67
// | &copy; boniface pereira. www.craftpip.com |
78
// |-------------------------------------------------|
89

9-
1010
var bootSelect = {
1111
settings: {
1212
template: 'js/bootstrap-mobile-template.html'
@@ -32,7 +32,7 @@ var bootSelect = {
3232

3333
object.isMultiple = $selectContorl.attr('multiple') ? true : false;
3434

35-
window.a = $selectContorl;
35+
window.a = $selectContorl; //debug
3636

3737
this[object.on] = {
3838
array: array,
@@ -45,7 +45,7 @@ var bootSelect = {
4545

4646
$.get(bootSelect.settings.template, function(d){
4747

48-
$('body').prepend('<div class="bootSelect" style="display:" data-obj="'+object.on.substr(1)+'"></div>');
48+
$('body').prepend('<div class="bootSelect" style="display:none" data-obj="'+object.on.substr(1)+'"></div>');
4949
$bs = $('.bootSelect[data-obj="'+object.on.substr(1)+'"]');
5050
$bs.html(d);
5151
$bs.find('.bootSelect-title').html(object.title || 'select one');
@@ -60,18 +60,24 @@ var bootSelect = {
6060
});
6161
},
6262

63-
eventsLoaded: false,
63+
eventsLoaded: false, //base events loaded.
6464

6565
events:function(object){
6666

6767
$(document).on('click', object.on, function(e){
68+
$('body').css({
69+
overflow: 'hidden'
70+
});
6871
$('.bootSelect[data-obj="'+object.on.substr(1)+'"]').show();
6972
bootSelect.syncR(object.on);
70-
7173
});
7274

7375
},
74-
76+
removeOverflow: function(){
77+
$('body').css({
78+
overflow: 'auto'
79+
})
80+
},
7581
baseEvents: function(){
7682

7783
if(this.eventsLoaded) return false;
@@ -82,19 +88,22 @@ var bootSelect = {
8288

8389
$(document).on('click', '.bootSelect .bootSelect-btncancel', function(e){
8490
$(this).parents('.bootSelect').hide();
91+
bootSelect.removeOverflow();
8592
return false;
8693
});
8794

8895
$(document).on('click', '.bootSelect .bootSelect-btnsave', function(){
8996
var a = $(this).parents('.bootSelect');
9097
bootSelect.sync(a) ? $(this).parents('.bootSelect').hide() : '';
98+
bootSelect.removeOverflow();
9199
return false;
92100
});
93101

94102
$(document).on('click', '.bootSelect .bootSelect-btnclear', function(){
95103
var a = $(this).parents('.bootSelect');
96104
a.find('.check').removeClass('check');
97105
a.find('.bootSelect-btnsave').trigger('click');
106+
bootSelect.removeOverflow();
98107
return false;
99108
});
100109

@@ -118,7 +127,7 @@ var bootSelect = {
118127
$this.addClass('check');
119128
}
120129
},
121-
130+
122131
sync: function(a){
123132
var list = a.find('.list-container .check');
124133
var res = [];

‎js/bootstrap-mobile-template.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="container-fluid">
22
<div class="row">
33
<div class="col-lg-12">
4-
<div class="panel panel-primary">
4+
<div class="panel panel-info">
55
<div class="panel-heading">
66
<span class="bootSelect-title"></span>
77
</div>

0 commit comments

Comments
 (0)