Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-09 00:50:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

enabled theming of sliders through data-theme. Fixes #152 Fixes #153

Browse source
This commit is contained in:
scottjehl 2010-10-11 16:55:10 -04:00
parent 16ee84fd94
commit 4b08e0fc9d
2 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
_form-controls.html
View file

@ -59,6 +59,11 @@
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<label for="slider1">Input slider:</label>
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="b" />
</div>
<div data-role="fieldcontain">
<label for="slider2">Select slider:</label>
<select name="slider2" id="slider2" data-role="slider">
@ -68,8 +73,8 @@
</div>
<div data-role="fieldcontain">
<label for="slider3">Another select slider:</label>
<select name="slider3" id="slider3" data-role="slider">
<label for="slider3">Themed select slider:</label>
<select name="slider3" id="slider3" data-role="slider" data-theme="a">
<option value="off">Off</option>
<option value="on" selected="selected">On</option>
</select>

9
js/jquery.mobile.forms.slider.js
View file

@ -8,6 +8,9 @@
$.fn.slider = function(options){
return this.each(function(){
var control = $(this),
o = $.extend({
theme: control.data("theme") || 'c'
},options),
cType = control[0].nodeName.toLowerCase(),
selectClass = (cType == 'select') ? 'ui-slider-switch' : '',
controlID = control.attr('id'),
@ -18,10 +21,10 @@ $.fn.slider = function(options){
max = (cType == 'input') ? parseFloat(control.attr('max')) : control.find('option').length-1,
percent = val / (max - min) * 100,
snappedPercent = percent,
slider = $('<div class="ui-slider '+ selectClass +' ui-bar-c ui-btn-corner-all" role="application"></div>'),
slider = $('<div class="ui-slider '+ selectClass +' ui-bar-'+o.theme+' ui-btn-corner-all" role="application"></div>'),
handle = $('<a href="#" class="ui-slider-handle"></a>')
.appendTo(slider)
.buttonMarkup({corners: true, theme: 'c', shadow: true})
.buttonMarkup({corners: true, theme: o.theme, shadow: true})
.attr({
'role': 'slider',
'aria-valuemin': min,
@ -40,7 +43,7 @@ $.fn.slider = function(options){
control.find('option').each(function(i){
var side = (i==0) ?'b':'a',
corners = (i==0) ? 'right' :'left',
theme = (i==0) ?'c':'b';
theme = (i==0) ? o.theme :'b';
$('<div class="ui-slider-labelbg ui-slider-labelbg-'+ side +' ui-btn-down-'+ theme +' ui-btn-corner-'+ corners+'"></div>').prependTo(slider);
$('<span class="ui-slider-label ui-slider-label-'+ side +' ui-btn-down-'+ theme +' ui-btn-corner-'+ corners+'" role="img">'+$(this).text()+'</span>').prependTo(handle);
});