Skip to content

Commit

Permalink
version 1 commit
Browse files Browse the repository at this point in the history 
working version, may contain errors.
  • Loading branch information
@craftpip
craftpip committed Oct 8, 2014
1 parent 1db47fc commit 3c789c4
Show file tree
Hide file tree
Showing 15 changed files with 7,173 additions and 0 deletions.
442 changes: 442 additions & 0 deletions css/bootstrap-theme.css
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions css/bootstrap-theme.css.map
View file

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions css/bootstrap-theme.min.css
View file

Large diffs are not rendered by default.

6,203 changes: 6,203 additions & 0 deletions css/bootstrap.css
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions css/bootstrap.css.map
View file

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions css/bootstrap.min.css
View file

Large diffs are not rendered by default.

Binary file added fonts/glyphicons-halflings-regular.eot
View file
Binary file not shown.
229 changes: 229 additions & 0 deletions fonts/glyphicons-halflings-regular.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added fonts/glyphicons-halflings-regular.ttf
View file
Binary file not shown.
Binary file added fonts/glyphicons-halflings-regular.woff
View file
Binary file not shown.
Binary file added img/tick.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 64 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<title>bootstrap select mobile</title>
</head>
<body>

<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Basic usage</h1>
<p></p>

<button class="btn btn-primary" id="triggerBy">example id="triggerBy"</button>
<select id="selectElem" style="" >
<option value="1">idea</option>
<option value="2">vodafone</option>
<option value="3">aircel</option>
<option value="4">tata docomo</option>
<option value="5">that</option>
</select>

<code>$('asdasd')</code>
</div>
<div class="col-lg-12">
<h1>2nd</h1>
<p></p>

<button class="btn btn-primary" id="asdasd">example id="triggerBy"</button>
<select id="dasdas" style="" multiple>
<option value="1">idea</option>
<option value="2">vodafone</option>
<option value="3">aircel</option>
<option value="4">tata docomo</option>
<option value="5">that</option>
</select>

<code>$('asdasd')</code>
</div>
</div>
</div>
<script type="text/javascript" src="js/libs/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap-mobile-select.js"></script>
<script type="text/javascript">
$(document).ready(function(){

bootSelect.init({
selectControl: '#selectElem',
on: '#triggerBy',
title: 'Order by'
});

bootSelect.init({
selectControl: '#dasdas',
on: '#asdasd',
title: 'this by'
});
});
</script>
</body>
</html>
141 changes: 141 additions & 0 deletions js/bootstrap-mobile-select.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
// bootselect for mobile devices.
// v1.1
// www.craftpip.com

var bootSelect = {
settings: {
template: 'js/bootstrap-mobile-template.html'
},
init: function(object){

if(bootSelect[object.on]) {
var b = bootSelect[object.on];
$('.bootSelect[data-obj="'+b.object.on.substr(1)+'"]').remove();
console.log('removed old element');
};

$selectContorl = $(object.selectControl);

var array = [];
$.each($selectContorl.find('option'), function(i, a){
var a = {
value: $(this).val(),
html: $(this).text()
};
array.push(a);
});

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

window.a = $selectContorl;

this[object.on] = {
array: array,
object : object
};

console.log(this[object.on]);
this.baseEvents();
this.events(object);

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

$('body').prepend('<div class="bootSelect" style="display:none" data-obj="'+object.on.substr(1)+'"></div>');

$bs = $('.bootSelect[data-obj="'+object.on.substr(1)+'"]');

$bs.html(d);

$bs.find('.bootSelect-title').html(object.title || 'select one');

$bs.find('.list-container').css('height', $(window).height()-140+'px');

$bs.find('.list-container').attr('data-multiple', object.isMultiple);

var obj = bootSelect[object.on];

$.each(obj.array, function(i,a){
$bs.find('.list-container').append('<a href="#" class="bs-control" data-value="'+a.value+'">'+a.html+'</a>');
});

});
},

eventsLoaded: false,

events:function(object){
$(document).on('click', object.on, function(e){

$('.bootSelect[data-obj="'+object.on.substr(1)+'"]').show();
bootSelect.syncR(object.on);

});
},

displayContainer:function(object){
// console.log(bootSelect['#'+id]);
// console.log(object);
},

baseEvents: function(){
if(this.eventsLoaded) return false;

$(window).resize(function(){
$('.bootSelect .list-container').css('height', $(window).height()-140+'px');
});

$(document).on('click', '.bootSelect .bootSelect-btncancel', function(){
$(this).parents('.bootSelect').hide();
});

$(document).on('click', '.bootSelect .bootSelect-btnsave', function(){
var a = $(this).parents('.bootSelect');
bootSelect.sync(a) ? $(this).parents('.bootSelect').hide() : '';
});

$(document).on('click', '.bootSelect .list-container a.bs-control', function(e){
bootSelect.clickCheck(e);
});

this.eventsLoaded = true;
},

clickCheck: function(e){
$this = $(e.currentTarget);

if($this.hasClass('check')){
$this.removeClass('check');
}else{
if($this.parent().data('multiple') == false){
$this.parent().children().removeClass('check');
}
$this.addClass('check');
}
},

sync: function(a){
var list = a.find('.list-container .check');
var res = [];
$.each(list, function(i,b){
res.push($(this).data('value'));
});
var obj = bootSelect['#'+a.data('obj')];
$(obj.object.selectControl).val(res);
$(obj.object.selectControl).trigger('change');
return true;
},

syncR: function(a){
var obj = bootSelect[a];
var b = $(obj.object.selectControl).val();
$b = $('.bootSelect[data-obj="'+a.substr(1)+'"]');
$.each($b.find('.list-container a'), function(i ,c){
if(b.indexOf($(c).data('value')+'') != -1){
$(c).addClass('check');
}else{
$(c).removeClass('check');
}
});
}
}

78 changes: 78 additions & 0 deletions js/bootstrap-mobile-template.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<style type="text/css">
.bootSelect{
position: fixed;
left: 0;
right: 0;
top: 15px;
bottom: 15px;
z-index: 88;
}
.bootSelect .list-container{
overflow: hidden;
overflow-y: scroll;
}
.bootSelect .list-container a{
display: block;
background-color: #fff;
border-bottom: solid 1px #ddd;
padding: 10px 20px;
}
.bootSelect .list-container[data-multiple="true"] a{
padding: 10px 20px 10px 50px;
}
.bootSelect .list-container[data-multiple="true"] a:before{
content: '';
background-color: #eee;
position: absolute;
height: 20px;
width: 20px;
margin-left: -30px;
border: solid 1px #ddd;
background-image: url('img/tick.png');
background-repeat: no-repeat;
background-position: 20px 0px;
/*transition: all .4s;*/
}
.bootSelect .list-container[data-multiple="true"] a.check:before{
background-position: 0px 0px;
}

.bootSelect .list-container[data-multiple="false"] a.check{
background-color: #eee;
}

.bootSelect .list-container a:active{
background-color: #ddd;
}
.bootSelect .list-container a:hover{
text-decoration: none;
}

</style>

<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="bootSelect-title"></span>
</div>
<div class="list-container">

</div>
<div class="panel-footer">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default btn-lg
bootSelect-btnsave">
Save
</a>
<a href="#" class="btn btn-default btn-lg
bootSelect-btncancel">
Cancel
</a>
</div>
</div>
</div>
</div>
</div>
</div>
4 changes: 4 additions & 0 deletions js/libs/jquery.js
View file

Large diffs are not rendered by default.

0 comments on commit 3c789c4

Please sign in to comment.