Skip to content

Commit 3080910

Browse files
lcdsantoslcdsantos
committed
Added more basics demos (fix #72). Fixed some markups in the page
1 parent e50c057 commit 3080910

File tree

11 files changed

+407
-313
lines changed

11 files changed

+407
-313
lines changed

‎gulpfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ gulp.task('css', function() {
7373
browsers: ['last 2 versions', '> 1%', 'ie 8', 'ie 7']
7474
}))
7575
.pipe($.csscomb())
76-
.pipe($.header('/*======================================\n Selectric v<%= pkg.version %>\n======================================*/\n\n', { pkg: pkg }))
76+
.pipe($.header('/*======================================\n Selectric v<%= pkg.version %>\n======================================*/\n', { pkg: pkg }))
7777
.pipe(gulp.dest('./public'))
7878
.pipe($.connect.reload());
7979
});

‎public/customoptions.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.selectric-customOptions .selectricItems .ico {
1+
.selectric-custom-options .selectric-items .ico {
22
display: inline-block;
33
vertical-align: middle;
44
zoom: 1;
@@ -9,8 +9,8 @@
99
background: url(img/browser-icons.png) no-repeat;
1010
}
1111

12-
.selectric-customOptions .selectricItems .ico-chrome { background-position: 0 0; }
13-
.selectric-customOptions .selectricItems .ico-firefox { background-position: -30px 0; }
14-
.selectric-customOptions .selectricItems .ico-ie { background-position: -60px 0; }
15-
.selectric-customOptions .selectricItems .ico-opera { background-position: -90px 0; }
16-
.selectric-customOptions .selectricItems .ico-safari { background-position: -120px 0; }
12+
.selectric-custom-options .selectric-items .ico-chrome { background-position: 0 0; }
13+
.selectric-custom-options .selectric-items .ico-firefox { background-position: -30px 0; }
14+
.selectric-custom-options .selectric-items .ico-ie { background-position: -60px 0; }
15+
.selectric-custom-options .selectric-items .ico-opera { background-position: -90px 0; }
16+
.selectric-custom-options .selectric-items .ico-safari { background-position: -120px 0; }

‎public/demo.html‎

Lines changed: 87 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<meta property="og:site_name" content="jQuery Selectric">
1818
<meta property="og:image" content="http://lcdsantos.github.io/jQuery-Selectric/share.jpg">
1919

20-
<link rel="stylesheet" id="theme" href="themes/default/selectric.css">
20+
<link rel="stylesheet" id="theme" href="selectric.css">
2121
<style id="template" style="display: none;"></style>
2222
</head>
2323
<body>
@@ -58,8 +58,72 @@ <h3>Basic usage</h3>
5858
</div>
5959

6060
<div class="code">
61-
<pre><code class="language-javascript">$(function(){
62-
$('select').selectric();
61+
<pre><code class="language-javascript">$('select').selectric();</code></pre>
62+
</div>
63+
</div>
64+
65+
<div class="demo">
66+
<h3>Get selected option value</h3>
67+
68+
<div class="view">
69+
<select id="get_value">
70+
<option value="strawberries">Strawberries</option>
71+
<option value="mango">Mango</option>
72+
<option value="bananas">Bananas</option>
73+
<option value="watermelon">Watermelon</option>
74+
<option value="apples">Apples</option>
75+
<option value="grapes">Grapes</option>
76+
<option value="oranges">Oranges</option>
77+
<option value="pineapple">Pineapple</option>
78+
<option value="peaches">Peaches</option>
79+
<option value="cherries">Cherries</option>
80+
</select>
81+
82+
<p id="select_value">Current value: <strong></strong></p>
83+
</div>
84+
85+
<div class="code">
86+
<pre><code class="language-javascript">// Cache the target element
87+
var $selectValue = $('#select_value').find('strong');
88+
89+
// Get initial value
90+
$selectValue.text($('#get_value').val());
91+
92+
// Initialize Selectric and bind to 'change' event
93+
$('#get_value').selectric().on('change', function() {
94+
$selectValue.text($(this).val());
95+
});</code></pre>
96+
</div>
97+
</div>
98+
99+
<div class="demo">
100+
<h3>Set value</h3>
101+
102+
<div class="view">
103+
<select id="set_value">
104+
<option value="0">First option</option>
105+
<option value="1">Second option</option>
106+
<option value="2">Third option</option>
107+
</select>
108+
109+
<p><button id="set_first_option">Select 1st option</button></p>
110+
<p><button id="set_second_option">Select 2nd option</button></p>
111+
<p><button id="set_third_option">Select 3rd option</button></p>
112+
</div>
113+
114+
<div class="code">
115+
<pre><code class="language-javascript">$('#set_value').selectric();
116+
117+
$('#set_first_option').on('click', function() {
118+
$('#set_value').prop('selectedIndex', 0).selectric('refresh');
119+
});
120+
121+
$('#set_second_option').on('click', function() {
122+
$('#set_value').prop('selectedIndex', 1).selectric('refresh');
123+
});
124+
125+
$('#set_third_option').on('click', function() {
126+
$('#set_value').prop('selectedIndex', 2).selectric('refresh');
63127
});</code></pre>
64128
</div>
65129
</div>
@@ -81,26 +145,24 @@ <h3>Change options on the fly</h3>
81145
<option value="cherries">Cherries</option>
82146
</select>
83147

84-
<input type="text" id="add_val" name="add_val">
85-
<button id="bt_add_val">Add value</button>
148+
<p>
149+
<input type="text" id="add_val" name="add_val">
150+
<button id="bt_add_val">Add value</button>
151+
</p>
86152
</div>
87153

88154
<div class="code">
89-
<pre><code class="language-javascript">$(function(){
90-
$('#dynamic').selectric();
91-
92-
$('#bt_add_val').click(function(e){
93-
e.preventDefault();
155+
<pre><code class="language-javascript">$('#dynamic').selectric();
94156

95-
// Store the value in a variable
96-
var value = $('#add_val').val();
157+
$('#bt_add_val').click(function() {
158+
// Store the value in a variable
159+
var value = $('#add_val').val();
97160

98-
// Append to original select
99-
$('#dynamic').append('&lt;option&gt;' + (value ? value : 'Empty') + '&lt;/option&gt;');
161+
// Append to original select
162+
$('#dynamic').append('&lt;option&gt;' + (value ? value : 'Empty') + '&lt;/option&gt;');
100163

101-
// Refresh Selectric
102-
$('#dynamic').selectric('refresh');
103-
});
164+
// Refresh Selectric
165+
$('#dynamic').selectric('refresh');
104166
});</code></pre>
105167
</div>
106168
</div>
@@ -126,10 +188,10 @@ <h3>Callbacks</h3>
126188
<div class="code">
127189
<pre><code class="language-javascript">// With events
128190
$('#callbacks')
129-
.on('selectric-before-open', function(){
191+
.on('selectric-before-open', function() {
130192
alert('Before open');
131193
})
132-
.on('selectric-before-close', function(){
194+
.on('selectric-before-close', function() {
133195
alert('Before close');
134196
})
135197
// You can bind to change event on original element
@@ -160,7 +222,7 @@ <h3>Populate via ajax request</h3>
160222
</div>
161223

162224
<div class="code">
163-
<pre><code class="language-javascript">$.get('ajax.html', function(data){
225+
<pre><code class="language-javascript">$.get('ajax.html', function(data) {
164226
$('#ajax').append(data).selectric();
165227
});</code></pre>
166228
<br>
@@ -172,7 +234,7 @@ <h3>Populate via ajax request</h3>
172234
<h3>Custom markup for items box</h3>
173235

174236
<div class="view">
175-
<select class="customOptions">
237+
<select class="custom-options">
176238
<option value="">Select with icons</option>
177239
<option value="firefox">Firefox</option>
178240
<option value="chrome">Chrome</option>
@@ -183,12 +245,10 @@ <h3>Custom markup for items box</h3>
183245
</div>
184246

185247
<div class="code">
186-
<pre><code class="language-javascript">$(function(){
187-
$('.customOptions').selectric({
188-
optionsItemBuilder: function(itemData, element, index){
189-
return element.val().length ? '&lt;span class=&quot;ico ico-' + element.val() + '&quot;&gt;&lt;/span&gt;' + itemData.text : itemData.text;
190-
}
191-
});
248+
<pre><code class="language-javascript">$('.custom-options').selectric({
249+
optionsItemBuilder: function(itemData, element, index) {
250+
return element.val().length ? '&lt;span class=&quot;ico ico-' + element.val() + '&quot;&gt;&lt;/span&gt;' + itemData.text : itemData.text;
251+
}
192252
});</code></pre>
193253
<br>
194254
<pre data-src="customoptions.css"></pre>

‎public/index.html‎

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="robots" content="all">
77
<title>jQuery Selectric</title>
88
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?v=5">
9-
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
9+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Ubuntu">
1010
<link rel="stylesheet" href="style.css">
1111
<link rel="stylesheet" href="selectric.css">
1212
<link rel="stylesheet" href="customoptions.css">
@@ -538,37 +538,36 @@ <h4><a href="./demo.html">view more advanced demos and customization →</a></h4
538538

539539
<p style="float: right;">Hosted on GitHub Pages</p>
540540
</div>
541-
542541
</div>
543542

544-
<script src="lib/jquery.min.js"></script>
545-
<script src="lib/prism.js"></script>
546-
<script src="jquery.selectric.js"></script>
547-
<script>
548-
$(function() {
549-
$('select, .select').selectric();
550-
551-
$('.customOptions').selectric({
552-
optionsItemBuilder: function(itemData, element, index) {
553-
return element.val().length ? '<span class="ico ico-' + element.val() + '"></span>' + itemData.text : itemData.text;
554-
}
543+
<script src="lib/jquery.min.js"></script>
544+
<script src="lib/prism.js"></script>
545+
<script src="jquery.selectric.js"></script>
546+
<script>
547+
$(function() {
548+
$('select, .select').selectric();
549+
550+
$('.customOptions').selectric({
551+
optionsItemBuilder: function(itemData, element, index) {
552+
return element.val().length ? '<span class="ico ico-' + element.val() + '"></span>' + itemData.text : itemData.text;
553+
}
554+
});
555555
});
556-
});
557556

558-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
559-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
560-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
561-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
557+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
558+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
559+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
560+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
562561

563-
ga('create', 'UA-42240250-1', 'lcdsantos.github.io');
564-
ga('require', 'displayfeatures');
565-
ga('send', 'pageview');
562+
ga('create', 'UA-42240250-1', 'lcdsantos.github.io');
563+
ga('require', 'displayfeatures');
564+
ga('send', 'pageview');
566565

567-
function getScript(a,b,c,e){var d=a.getElementsByTagName(b)[0];a.getElementById(c)||(a=a.createElement(b),a.id=c,a.src=e,d.parentNode.insertBefore(a,d))};
566+
function getScript(a,b,c,e){var d=a.getElementsByTagName(b)[0];a.getElementById(c)||(a=a.createElement(b),a.id=c,a.src=e,d.parentNode.insertBefore(a,d))};
568567

569-
getScript(document, 'script', 'facebook-jssdk', '//connect.facebook.net/en_US/all.js#xfbml=1&appId=146929405493694');
570-
getScript(document, 'script', 'twitter-wjs', '//platform.twitter.com/widgets.js');
571-
getScript(document, 'script', 'googleplus-wjs', '//apis.google.com/js/plusone.js');
572-
</script>
568+
getScript(document, 'script', 'facebook-jssdk', '//connect.facebook.net/en_US/all.js#xfbml=1&appId=146929405493694');
569+
getScript(document, 'script', 'twitter-wjs', '//platform.twitter.com/widgets.js');
570+
getScript(document, 'script', 'googleplus-wjs', '//apis.google.com/js/plusone.js');
571+
</script>
573572
</body>
574573
</html>

‎public/jquery.selectric.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@
3636
allowWrap: true,
3737
customClass: {
3838
prefix: pluginName,
39-
postfixes: classList,
40-
camelCase: true,
39+
postfixes: 'Input Items Open Disabled TempShow HideSelect Wrapper Hover Responsive Above Scroll Group GroupLabel',
40+
camelCase: false,
4141
overwrite: true
4242
},
4343
optionsItemBuilder: '{text}' // function(itemData, element, index)
@@ -140,7 +140,7 @@
140140
postfixes = customClass.postfixes.split(' '),
141141
originalWidth = $original.width();
142142

143-
$.each(classList.split(' '), function(i, elm) {
143+
$.each(postfixes, function(i, elm) {
144144
var c = customClass.prefix + postfixes[i];
145145
_this.classes[elm.toLowerCase()] = customClass.camelCase ? c : _utils.toDash(c);
146146
});

0 commit comments

Comments
 (0)