Skip to content

Commit 9ced689

Browse files
committed
Added option labelBuilder
1 parent e824fb5 commit 9ced689

File tree

6 files changed

+92
-18
lines changed

6 files changed

+92
-18
lines changed

README.md

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ Include **jQuery Selectric:**
2525
<script src="js/jquery.selectric.min.js"></script>
2626
```
2727

28-
Include **jQuery Selectric:** styles, and change it to your taste :D
28+
Include **jQuery Selectric** styles, and change it to your taste :D _(please refer to our [demo page](http://lcdsantos.github.io/jQuery-Selectric/demo.html) for more themes and other customizations)_
2929

3030
```html
3131
<link rel="stylesheet" href="selectric.css">
@@ -185,6 +185,20 @@ $('select').selectric({
185185
*/
186186
optionsItemBuilder: '{text}',
187187

188+
/*
189+
* Type: String or Function
190+
* Description: Define how each select label should be rendered. Allows HTML.
191+
*
192+
* If it's a string, all keys wrapped in brackets will be replaced by
193+
* the respective values in currItem. Available keys are:
194+
* 'value', 'text', 'slug', 'disabled'.
195+
*
196+
* If it's a function, it will be called with the following parameters:
197+
* (currItem). The function must return a string, no keys will be
198+
* replaced in this method.
199+
*/
200+
labelBuilder: '{text}',
201+
188202
/*
189203
* Type: Boolean
190204
* Description: Prevent scroll on window when using mouse wheel inside options box

public/customoptions.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.selectric-custom-options .selectric-items .ico {
1+
.selectric-customOptions .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-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; }
12+
.selectric-customOptions .ico-chrome { background-position: 0 0; }
13+
.selectric-customOptions .ico-firefox { background-position: -30px 0; }
14+
.selectric-customOptions .ico-ie { background-position: -60px 0; }
15+
.selectric-customOptions .ico-opera { background-position: -90px 0; }
16+
.selectric-customOptions .ico-safari { background-position: -120px 0; }

public/index.html

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,8 @@ <h2>How to use</h2>
105105
<p>2. Include <strong>jQuery Selectric:</strong></p>
106106
<pre><code class="language-markup">&lt;script src=&quot;jquery.selectric.min.js&quot;&gt;&lt;/script&gt;</code></pre>
107107

108-
<p>3. Put styles in your CSS and change it to your taste :D <span class="note">(please refer to our <a href="./demo.html">demo page</a> for more themes and other customizations)</span></p>
109-
<pre data-src="selectric.css"></pre>
108+
<p>3. Include <strong>jQuery Selectric</strong> styles, and change it to your taste :D <span class="note">(please refer to our <a href="./demo.html">demo page</a> for more themes and other customizations)</span></p>
109+
<pre><code class="language-markup">&lt;link rel=&quot;stylesheet&quot; href=&quot;selectric.css&quot;&gt;</code></pre>
110110

111111
<p>4. Initialize <strong>jQuery Selectric:</strong></p>
112112
<pre><code class="language-javascript">$(function(){
@@ -253,6 +253,20 @@ <h2>Options</h2>
253253
*/
254254
optionsItemBuilder: '{text}',
255255

256+
/*
257+
* Type: String or Function
258+
* Description: Define how each select label should be rendered. Allows HTML.
259+
*
260+
* If it's a string, all keys wrapped in brackets will be replaced by
261+
* the respective values in currItem. Available keys are:
262+
* 'value', 'text', 'slug', 'disabled'.
263+
*
264+
* If it's a function, it will be called with the following parameters:
265+
* (currItem). The function must return a string, no keys will be
266+
* replaced in this method.
267+
*/
268+
labelBuilder: '{text}',
269+
256270
/*
257271
* Type: Boolean
258272
* Description: Prevent scroll on window when using mouse wheel inside options box
@@ -457,6 +471,30 @@ <h4><a href="./demo.html">view more advanced demos and customization →</a></h4
457471
<option value="opera">Opera</option>
458472
</select>
459473

474+
<select class="customLabel">
475+
<option value="">Select with custom label builder</option>
476+
<option value="ant">Ant</option>
477+
<option value="bird">Bird</option>
478+
<option value="cat">Cat</option>
479+
<option value="chicken">Chicken</option>
480+
<option value="cow">Cow</option>
481+
<option value="dog">Dog</option>
482+
<option value="elephant">Elephant</option>
483+
<option value="fish">Fish</option>
484+
<option value="fox">Fox</option>
485+
<option value="horse">Horse</option>
486+
<option value="kangaroo">Kangaroo</option>
487+
<option value="lion">Lion</option>
488+
<option value="monkey">Monkey</option>
489+
<option value="penguin">Penguin</option>
490+
<option value="pig">Pig</option>
491+
<option value="rabbit">Rabbit</option>
492+
<option value="sheep">Sheep</option>
493+
<option value="tiger">Tiger</option>
494+
<option value="whale">Whale</option>
495+
<option value="wolf">Wolf</option>
496+
</select>
497+
460498
<select disabled>
461499
<option value="">Select disabled</option>
462500
<option value="apple">Apple</option>
@@ -560,6 +598,12 @@ <h4><a href="./demo.html">view more advanced demos and customization →</a></h4
560598
return element.val().length ? '<span class="ico ico-' + element.val() + '"></span>' + itemData.text : itemData.text;
561599
}
562600
});
601+
602+
$('.customLabel').selectric({
603+
labelBuilder: function(currItem) {
604+
return '<strong><em>' + currItem.text + '</em></strong>';
605+
}
606+
});
563607
});
564608

565609
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

public/jquery.selectric.js

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@
3939
camelCase: false,
4040
overwrite: true
4141
},
42-
optionsItemBuilder: '{text}' // function(itemData, element, index)
42+
optionsItemBuilder: '{text}', // function(itemData, element, index)
43+
labelBuilder: '{text}' // function(currItem)
4344
},
4445
hooks = {
4546
add: function(callbackName, hookName, fn) {
@@ -116,7 +117,8 @@
116117
optionsLength,
117118
eventTriggers,
118119
isMobile = /android|ip(hone|od|ad)/i.test(navigator.userAgent),
119-
tabindex = $original.prop('tabindex');
120+
tabindex = $original.prop('tabindex'),
121+
labelBuilder;
120122

121123
function _init(opts) {
122124
_this.options = $.extend(true, {}, defaults, _this.options, opts);
@@ -162,6 +164,8 @@
162164
$original.on(eventTriggers).wrap('<div class="' + _this.classes.hideselect + '">');
163165
$.extend(_this, eventTriggers);
164166

167+
labelBuilder = _this.options.labelBuilder;
168+
165169
if ( _this.options.inheritOriginalWidth && originalWidth > 0 )
166170
$outerWrapper.width(originalWidth);
167171

@@ -231,7 +235,9 @@
231235

232236
$items.append( $itemsScroll.html(_$li + '</ul>') );
233237

234-
$label.html(_this.items[currValue].text);
238+
$label.html(
239+
$.isFunction(labelBuilder) ? labelBuilder(_this.items[currValue]) : _utils.format(labelBuilder, _this.items[currValue])
240+
)
235241
}
236242

237243
$wrapper.add($original).add($outerWrapper).add($input).off(bindSufix);
@@ -465,7 +471,9 @@
465471
.data('value', text);
466472

467473
// Change label text
468-
$label.html(text);
474+
$label.html(
475+
$.isFunction(labelBuilder) ? labelBuilder(_this.items[selected]) : _utils.format(labelBuilder, _this.items[selected])
476+
)
469477

470478
_utils.triggerCallback('Change', _this);
471479
}

0 commit comments

Comments
 (0)