Skip to content

Commit ebbe4a8

Browse files
craftpipcraftpip
committed
updated documentation
1 parent 652b8d9 commit ebbe4a8

6 files changed

+155
-57
lines changed

‎demo.css

+14
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,18 @@
1212
}
1313
pre{
1414
padding: 0 !important;
15+
}
16+
.well, code, pre{
17+
background: #f4f4f4 !important;
18+
}
19+
.well pre, .well code{
20+
background: #fff !important;
21+
}
22+
.btn-download{
23+
background: #eee;
24+
border:solid 1px #ddd;
25+
color: #555;
26+
}
27+
.btn-download:hover{
28+
background: #ddd;
1529
}

‎index.html

+106-23
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
</head>
3131
<body>
3232
<div style="height: 15px"></div>
33-
<div class="container">
33+
<div class="container-fluid">
3434
<div class="row">
3535
<div class="col-lg-12">
3636
<div class="logo-wrapper-project">
@@ -65,7 +65,7 @@
6565
</div>
6666
</div>
6767
</div>
68-
<div class="container">
68+
<div class="container-fluid">
6969
<div class="row">
7070
<div class="col-md-3">
7171
<div class="sticky-alt">
@@ -76,10 +76,10 @@
7676
</a>
7777
</p>
7878
<div class="btn-group btn-group-justified">
79-
<a href="https://github.com/craftpip/bootstrap-fullscreen-select/zipball/master" class="btn btn-default btn-lg">
79+
<a href="https://github.com/craftpip/bootstrap-fullscreen-select/zipball/master" class="btn btn-download btn-lg">
8080
<i class="fa fa-download"></i> ZIP File
8181
</a>
82-
<a href="https://github.com/craftpip/bootstrap-fullscreen-select/tarball/master" class="btn btn-default btn-lg"> TAR Ball</a>
82+
<a href="https://github.com/craftpip/bootstrap-fullscreen-select/tarball/master" class="btn btn-download btn-lg"> TAR Ball</a>
8383
</div>
8484
<div class="spacer15"></div>
8585
<div class="panel panel-default">
@@ -107,25 +107,51 @@ <h1 style="margin-top:0px;">bootstrap-fullscreen-select</h1>
107107
<section id="usage">
108108
<h1>usage</h1>
109109
<h4>html: </h4>
110-
<pre><code class="html">&lt;select class="form-control" id="mySelectElement"&gt; //your select element
110+
<pre><code class="html">&lt;select class="form-control" id="theSelect"&gt; // the ID of your select element
111+
&lt;option value="0"&gt;Pizza&lt;/option&gt;
112+
&lt;option value="1"&gt;Burger&lt;/option&gt;
113+
&lt;option value="2"&gt;Tacos&lt;/option&gt;
114+
&lt;option value="3"&gt;Something else&lt;/option&gt;
115+
&lt;/select&gt;
116+
117+
&lt;button class="btn btn-default" id="theBtn"&gt;Show&lt;/button&gt; //the ID of the element on which user will interact.</code></pre>
118+
<h4>javascript: </h4>
119+
<p>
120+
IMPORTANT: please use ID to refer to an element.
121+
you can also use multiple initializations
122+
</p>
123+
<pre><code class="js">$(document).ready(function(){
124+
bootSelect.init({
125+
selectControl: '#theSelect', //the select element
126+
on: '#theBtn', //the element where user will interact
127+
title: 'What to eat?' //title of the full screen select.
128+
});
129+
});
130+
</code></pre>
131+
132+
</section>
133+
<section id="examples">
134+
<h1>examples</h1>
135+
<h3>select element:</h3>
136+
<div class="well well-sm">
137+
<select class="form-control" id="mySelectElement" style="width:300px;display:inline">
138+
<option value="0">Something</option>
139+
<option value="1">Something else</option>
140+
<option value="2">Something even else</option>
141+
<option value="3">Enough</option>
142+
</select>
143+
<button class="btn btn-primary" id="myTriggerBtn">Select something</button>
144+
145+
<h4>HTML: </h4>
146+
<p class="text-primary"><span class="">The select elements are shown for demonstration purpose, you can hide then in production.</span></p>
147+
<pre><code class="html">&lt;select class="form-control" id="mySelectElement"&gt; //your select element
111148
&lt;option value="0"&gt;Something&lt;/option&gt;
112149
&lt;option value="1"&gt;Something else&lt;/option&gt;
113150
&lt;option value="2"&gt;Something even else&lt;/option&gt;
114151
&lt;option value="3"&gt;Enough&lt;/option&gt;
115152
&lt;/select&gt;
116153

117154
&lt;button class="btn btn-default" id="myTriggerBtn"&gt;Show&lt;/button&gt; //the element on which user will interact.</code></pre>
118-
119-
<!--
120-
<select class="form-control" id="mySelectElement" style="width:300px;display:inline">
121-
<option value="0">Something</option>
122-
<option value="1">Something else</option>
123-
<option value="2">Something even else</option>
124-
<option value="3">Enough</option>
125-
</select>
126-
127-
<button class="btn btn-default" id="myTriggerBtn">Show</button> -->
128-
129155
<h4>javascript: </h4>
130156
<pre><code class="js">$(document).ready(function(){
131157
bootSelect.init({
@@ -135,19 +161,76 @@ <h4>javascript: </h4>
135161
});
136162
});
137163
</code></pre>
164+
<p>The plugin fired a change event on the select element on user interaction.</p>
165+
<pre><code class="js">$('#mySelectElement').change(function(){
166+
alert($(this).val());
167+
});
168+
</code></pre>
169+
</div>
170+
<h3>select element attribute multiple:</h3>
171+
<div class="well well-sm">
172+
<select class="form-control" id="mySelectMultipleElement" style="width:300px;display:inline" multiple>
173+
<option value="0">Something</option>
174+
<option value="1">Something else</option>
175+
<option value="2">Something even else</option>
176+
<option value="3">Enough</option>
177+
</select><br>
178+
<button class="btn btn-primary" id="myTriggerMultipleBtn">Select something</button>
179+
180+
<h4>HTML: </h4>
181+
<p class="text-primary"><span class="">The select elements are shown for demonstration purpose, you can hide then in production.</span></p>
182+
<pre><code class="html">&lt;select class="form-control" id="mySelectMultipleElement" multiple&gt; //your select element
183+
&lt;option value="0"&gt;Something&lt;/option&gt;
184+
&lt;option value="1"&gt;Something else&lt;/option&gt;
185+
&lt;option value="2"&gt;Something even else&lt;/option&gt;
186+
&lt;option value="3"&gt;Enough&lt;/option&gt;
187+
&lt;/select&gt;
188+
189+
&lt;button class="btn btn-default" id="myTriggerMultipleBtn"&gt;Show&lt;/button&gt; //the element on which user will interact.</code></pre>
190+
<h4>javascript: </h4>
191+
<pre><code class="js">$(document).ready(function(){
192+
bootSelect.init({
193+
selectControl: '#mySelectMultipleElement', //the select element
194+
on: '#myTriggerMultipleBtn', //the element where user will interact
195+
title: 'Select multiple things' //title of the full screen select.
196+
});
197+
});
198+
</code></pre>
199+
<p>The plugin fired a change event on the select element on user interaction.</p>
200+
<pre><code class="js">$('#mySelectMultipleElement').change(function(){
201+
alert($(this).val());
202+
});
203+
</code></pre>
204+
</div>
138205

139-
</section>
140-
<section id="examples">
141-
<h1>examples</h1>
142-
<p>
143-
144-
</p>
145206
</section>
146207
</div>
147208
</div>
148209
</div>
149210

150-
<script type="text/javascript" src="demo.js"></script>
211+
<script type="text/javascript">
212+
// javascript for the
213+
$(document).ready(function(){
214+
bootSelect.init({
215+
selectControl: '#mySelectElement', //the select element
216+
on: '#myTriggerBtn', //the element where user will interact
217+
title: 'Select something' //title of the full screen select.
218+
});
219+
bootSelect.init({
220+
selectControl: '#mySelectMultipleElement', //the select element
221+
on: '#myTriggerMultipleBtn', //the element where user will interact
222+
title: 'Select multiple things' //title of the full screen select.
223+
});
224+
$('#mySelectElement').change(function(){
225+
alert($(this).val());
226+
});
227+
$('#mySelectMultipleElement').change(function(){
228+
alert($(this).val());
229+
});
230+
});
231+
</script>
232+
233+
<script type="text/javascript" src="demo.js"></script> <!-- javascript for the demo page interface. -->
151234

152235
</body>
153236

‎index2.html

+2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@
99
</head>
1010
<body>
1111
<style type="text/css">
12+
1213
body{
1314
background-color: #eee;
1415
}
1516
.col-lg-8{
1617
background-color: #fff;
1718
}
19+
1820
</style>
1921

2022
<div class="container">

‎js/bootstrap-fullscreen-select.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div class="container-fluid">
2+
<div class="row">
3+
<div class="col-lg-12">
4+
<div class="panel panel-info">
5+
<div class="panel-heading">
6+
<span class="bootSelect-title"></span>
7+
</div>
8+
<div class="list-container">
9+
10+
</div>
11+
<div class="panel-footer">
12+
<div class="btn-group btn-group-justified">
13+
<a href="#" class="btn btn-success btn-lg
14+
bootSelect-btnsave">
15+
Save
16+
</a>
17+
<a href="#" class="btn btn-default btn-lg
18+
bootSelect-btnclear">
19+
Clear
20+
</a>
21+
<a href="#" class="btn btn-default btn-lg
22+
bootSelect-btncancel">
23+
Cancel
24+
</a>
25+
</div>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
</div>

‎js/bootstrap-mobile-select.js renamed to ‎js/bootstrap-fullscreen-select.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
1-
21
// |-------------------------------------------------|
32
// | bootstrap select for mobile devices. v1.2 |
43
// |-------------------------------------------------|
5-
// | made specially for use with cordova. |
4+
// | Made specially for use with cordova/phonegap |
65
// |-------------------------------------------------|
76
// | &copy; boniface pereira. www.craftpip.com |
87
// |-------------------------------------------------|
98

109
var bootSelect = {
1110
settings: {
12-
template: 'js/bootstrap-mobile-template.html'
11+
template: 'js/bootstrap-fullscreen-select.html'
1312
},
1413
init: function(object){
1514

1615
if(bootSelect[object.on]) {
1716
var b = bootSelect[object.on];
1817
$('.bootSelect[data-obj="'+b.object.on.substr(1)+'"]').remove();
19-
console.log('removed old element');
18+
console.log('BootSelect: intialized Twice. removing old element and reloading.');
2019
};
2120

2221
$selectContorl = $(object.selectControl);

‎js/bootstrap-mobile-template.html

-30
This file was deleted.

0 commit comments

Comments
 (0)