1/* 2 * -------------------------------------------------------------------- 3 * jQuery-Plugin - selectToUISlider - creates a UI slider component from a select element(s) 4 * by Scott Jehl, [email protected] 5 * http://www.filamentgroup.com 6 * reference article: http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/ 7 * demo page: http://www.filamentgroup.com/examples/slider_v2/index.html 8 * 9 * Copyright (c) 2008 Filament Group, Inc 10 * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses. 11 * 12 * Usage Notes: please refer to our article above for documentation 13 * 14 * -------------------------------------------------------------------- 15 */ 16 17 18jQuery.fn.selectToUISlider = function(settings){ 19 var selects = jQuery(this); 20 21 //accessible slider options 22 var options = jQuery.extend({ 23 labels: 3, //number of visible labels 24 tooltip: true, //show tooltips, boolean 25 tooltipSrc: 'text',//accepts 'value' as well 26 labelSrc: 'value',//accepts 'value' as well , 27 sliderOptions: null 28 }, settings); 29 30 31 //handle ID attrs - selects each need IDs for handles to find them 32 var handleIds = (function(){ 33 var tempArr = []; 34 selects.each(function(){ 35 tempArr.push('handle_'+jQuery(this).attr('id')); 36 }); 37 return tempArr; 38 })(); 39 40 //array of all option elements in select element (ignores optgroups) 41 var selectOptions = (function(){ 42 var opts = []; 43 selects.eq(0).find('option').each(function(){ 44 opts.push({ 45 value: jQuery(this).attr('value'), 46 text: jQuery(this).text() 47 }); 48 }); 49 return opts; 50 })(); 51 52 //array of opt groups if present 53 var groups = (function(){ 54 if(selects.eq(0).find('optgroup').size()>0){ 55 var groupedData = []; 56 selects.eq(0).find('optgroup').each(function(i){ 57 groupedData[i] = {}; 58 groupedData[i].label = jQuery(this).attr('label'); 59 groupedData[i].options = []; 60 jQuery(this).find('option').each(function(){ 61 groupedData[i].options.push({text: jQuery(this).text(), value: jQuery(this).attr('value')}); 62 }); 63 }); 64 return groupedData; 65 } 66 else return null; 67 })(); 68 69 //check if obj is array 70 function isArray(obj) { 71 return obj.constructor == Array; 72 } 73 //return tooltip text from option index 74 function ttText(optIndex){ 75 return (options.tooltipSrc == 'text') ? selectOptions[optIndex].text : selectOptions[optIndex].value; 76 } 77 78 //plugin-generated slider options (can be overridden) 79 var sliderOptions = { 80 step: 1, 81 min: 0, 82 orientation: 'horizontal', 83 max: selectOptions.length-1, 84 range: selects.length > 1,//multiple select elements = true 85 slide: function(e, ui) {//slide function 86 var thisHandle = jQuery(ui.handle); 87 //handle feedback 88 var textval = ttText(ui.value); 89 thisHandle 90 .attr('aria-valuetext', textval) 91 .attr('aria-valuenow', ui.value) 92 .find('.ui-slider-tooltip .ttContent') 93 .text( textval ); 94 95 //control original select menu 96 var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]); 97 currSelect.find('option').eq(ui.value).attr('selected', 'selected'); 98 }, 99 values: (function(){ 100 var values = []; 101 selects.each(function(){ 102 values.push( jQuery(this).get(0).selectedIndex ); 103 }); 104 return values; 105 })() 106 }; 107 108 //slider options from settings 109 options.sliderOptions = (settings) ? jQuery.extend(sliderOptions, settings.sliderOptions) : sliderOptions; 110 111 //select element change event 112 selects.bind('change keyup click', function(){ 113 var thisIndex = jQuery(this).get(0).selectedIndex; 114 var thisHandle = jQuery('#handle_'+ jQuery(this).attr('id')); 115 var handleIndex = thisHandle.data('handleNum'); 116 thisHandle.parents('.ui-slider:eq(0)').slider("values", handleIndex, thisIndex); 117 }); 118 119 120 //create slider component div 121 var sliderComponent = jQuery('<div></div>'); 122 123 //CREATE HANDLES 124 selects.each(function(i){ 125 var hidett = ''; 126 127 //associate label for ARIA 128 var thisLabel = jQuery('label[for=' + jQuery(this).attr('id') +']'); 129 //labelled by aria doesn't seem to work on slider handle. Using title attr as backup 130 var labelText = (thisLabel.size()>0) ? 'Slider control for '+ thisLabel.text()+'' : ''; 131 var thisLabelId = thisLabel.attr('id') || thisLabel.attr('id', 'label_'+handleIds[i]).attr('id'); 132 133 134 if( options.tooltip == false ){hidett = ' style="display: none;"';} 135 jQuery('<a '+ 136 'href="#" tabindex="0" '+ 137 'id="'+handleIds[i]+'" '+ 138 'class="ui-slider-handle" '+ 139 'role="slider" '+ 140 'aria-labelledby="'+thisLabelId+'" '+ 141 'aria-valuemin="'+options.sliderOptions.min+'" '+ 142 'aria-valuemax="'+options.sliderOptions.max+'" '+ 143 'aria-valuenow="'+options.sliderOptions.values[i]+'" '+ 144 'aria-valuetext="'+ttText(options.sliderOptions.values[i])+'" '+ 145 '><span class="screenReaderContext">'+labelText+'</span>'+ 146 '<span class="ui-slider-tooltip ui-widget-content ui-corner-all"'+ hidett +'><span class="ttContent"></span>'+ 147 '<span class="ui-tooltip-pointer-down ui-widget-content"><span class="ui-tooltip-pointer-down-inner"></span></span>'+
148 '</span></a>') 149 .data('handleNum',i) 150 .appendTo(sliderComponent); 151 }); 152 153 //CREATE SCALE AND TICS 154 155 //write dl if there are optgroups 156 if(groups) { 157 var inc = 0; 158 var scale = sliderComponent.append('<dl class="ui-slider-scale ui-helper-reset" role="presentation"></dl>').find('.ui-slider-scale:eq(0)'); 159 jQuery(groups).each(function(h){ 160 scale.append('<dt style="width: '+ (100/groups.length).toFixed(2) +'%' +'; left:'+ (h/(groups.length-1) * 100).toFixed(2) +'%' +'"><span>'+this.label+'</span></dt>');//class name becomes camelCased label 161 var groupOpts = this.options; 162 jQuery(this.options).each(function(i){ 163 var style = (inc == selectOptions.length-1 || inc == 0) ? 'style="display: none;"' : '' ; 164 var labelText = (options.labelSrc == 'text') ? groupOpts[i].text : groupOpts[i].value; 165 scale.append('<dd style="left:'+ leftVal(inc) +'"><span class="ui-slider-label">'+ labelText +'</span><span class="ui-slider-tic ui-widget-content"'+ style +'></span></dd>'); 166 inc++; 167 }); 168 }); 169 } 170 //write ol 171 else { 172 var scale = sliderComponent.append('<ol class="ui-slider-scale ui-helper-reset" role="presentation"></ol>').find('.ui-slider-scale:eq(0)'); 173 jQuery(selectOptions).each(function(i){ 174 var style = (i == selectOptions.length-1 || i == 0) ? 'style="display: none;"' : '' ; 175 var labelText = (options.labelSrc == 'text') ? this.text : this.value; 176 scale.append('<li style="left:'+ leftVal(i) +'"><span class="ui-slider-label">'+ labelText +'</span><span class="ui-slider-tic ui-widget-content"'+ style +'></span></li>'); 177 }); 178 } 179 180 function leftVal(i){ 181 return (i/(selectOptions.length-1) * 100).toFixed(2) +'%'; 182 183 } 184 185 186 187 188 //show and hide labels depending on labels pref 189 //show the last one if there are more than 1 specified 190 if(options.labels > 1) sliderComponent.find('.ui-slider-scale li:last span.ui-slider-label, .ui-slider-scale dd:last span.ui-slider-label').addClass('ui-slider-label-show'); 191 192 //set increment 193 var increm = Math.max(1, Math.round(selectOptions.length / options.labels)); 194 //show em based on inc 195 for(var j=0; j<selectOptions.length; j+=increm){ 196 if((selectOptions.length - j) > increm){//don't show if it's too close to the end label 197 sliderComponent.find('.ui-slider-scale li:eq('+ j +') span.ui-slider-label, .ui-slider-scale dd:eq('+ j +') span.ui-slider-label').addClass('ui-slider-label-show'); 198 } 199 } 200 201 //style the dt's 202 sliderComponent.find('.ui-slider-scale dt').each(function(i){ 203 jQuery(this).css({ 204 'left': ((100 /( groups.length))*i).toFixed(2) + '%' 205 }); 206 }); 207 208 209 //inject and return 210 sliderComponent 211 .insertAfter(jQuery(this).eq(this.length-1)) 212 .slider(options.sliderOptions) 213 .attr('role','application') 214 .find('.ui-slider-label') 215 .each(function(){ 216 jQuery(this).css('marginLeft', -jQuery(this).width()/2); 217 }); 218 219 //update tooltip arrow inner color 220 sliderComponent.find('.ui-tooltip-pointer-down-inner').each(function(){ 221 var bWidth = jQuery('.ui-tooltip-pointer-down-inner').css('borderTopWidth'); 222 var bColor = jQuery(this).parents('.ui-slider-tooltip').css('backgroundColor') 223 jQuery(this).css('border-top', bWidth+' solid '+bColor); 224 }); 225 226 var values = sliderComponent.slider('values'); 227 228 if(isArray(values)){ 229 jQuery(values).each(function(i){ 230 sliderComponent.find('.ui-slider-tooltip .ttContent').eq(i).text( ttText(this) ); 231 }); 232 } 233 else { 234 sliderComponent.find('.ui-slider-tooltip .ttContent').eq(0).text( ttText(values) ); 235 } 236 237 return this; 238} 239 240
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.