/* * -------------------------------------------------------------------- * jQuery-Plugin - selectToUISlider - creates a UI slider component from a select element(s) * by Scott Jehl, scott@filamentgroup.com * http://www.filamentgroup.com * reference article: http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/ * demo page: http://www.filamentgroup.com/examples/slider_v2/index.html * * Copyright (c) 2008 Filament Group, Inc * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses. * * Usage Notes: please refer to our article above for documentation * * -------------------------------------------------------------------- */ jQuery.fn.selectToUISlider = function(settings){ var selects = jQuery(this); //accessible slider options var options = jQuery.extend({ labels: 3, //number of visible labels tooltip: true, //show tooltips, boolean tooltipSrc: 'text',//accepts 'value' as well labelSrc: 'value',//accepts 'value' as well , sliderOptions: null }, settings); //handle ID attrs - selects each need IDs for handles to find them var handleIds = (function(){ var tempArr = []; selects.each(function(){ tempArr.push('handle_'+jQuery(this).attr('id')); }); return tempArr; })(); //array of all option elements in select element (ignores optgroups) var selectOptions = (function(){ var opts = []; selects.eq(0).find('option').each(function(){ opts.push({ value: jQuery(this).attr('value'), text: jQuery(this).text() }); }); return opts; })(); //array of opt groups if present var groups = (function(){ if(selects.eq(0).find('optgroup').size()>0){ var groupedData = []; selects.eq(0).find('optgroup').each(function(i){ groupedData[i] = {}; groupedData[i].label = jQuery(this).attr('label'); groupedData[i].options = []; jQuery(this).find('option').each(function(){ groupedData[i].options.push({text: jQuery(this).text(), value: jQuery(this).attr('value')}); }); }); return groupedData; } else return null; })(); //check if obj is array function isArray(obj) { return obj.constructor == Array; } //return tooltip text from option index function ttText(optIndex){ return (options.tooltipSrc == 'text') ? selectOptions[optIndex].text : selectOptions[optIndex].value; } //plugin-generated slider options (can be overridden) var sliderOptions = { step: 1, min: 0, orientation: 'horizontal', max: selectOptions.length-1, range: selects.length > 1,//multiple select elements = true slide: function(e, ui) {//slide function var thisHandle = jQuery(ui.handle); //handle feedback var textval = ttText(ui.value); thisHandle .attr('aria-valuetext', textval) .attr('aria-valuenow', ui.value) .find('.ui-slider-tooltip .ttContent') .text( textval ); //control original select menu var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]); currSelect.find('option').eq(ui.value).attr('selected', 'selected'); }, values: (function(){ var values = []; selects.each(function(){ values.push( jQuery(this).get(0).selectedIndex ); }); return values; })() }; //slider options from settings options.sliderOptions = (settings) ? jQuery.extend(sliderOptions, settings.sliderOptions) : sliderOptions; //select element change event selects.bind('change keyup click', function(){ var thisIndex = jQuery(this).get(0).selectedIndex; var thisHandle = jQuery('#handle_'+ jQuery(this).attr('id')); var handleIndex = thisHandle.data('handleNum'); thisHandle.parents('.ui-slider:eq(0)').slider("values", handleIndex, thisIndex); }); //create slider component div var sliderComponent = jQuery('
'); //CREATE HANDLES selects.each(function(i){ var hidett = ''; //associate label for ARIA var thisLabel = jQuery('label[for=' + jQuery(this).attr('id') +']'); //labelled by aria doesn't seem to work on slider handle. Using title attr as backup var labelText = (thisLabel.size()>0) ? 'Slider control for '+ thisLabel.text()+'' : ''; var thisLabelId = thisLabel.attr('id') || thisLabel.attr('id', 'label_'+handleIds[i]).attr('id'); if( options.tooltip == false ){hidett = ' style="display: none;"';} jQuery(''+labelText+''+ ' ') .data('handleNum',i) .appendTo(sliderComponent); }); //CREATE SCALE AND TICS //write dl if there are optgroups if(groups) { var inc = 0; var scale = sliderComponent.append(' ').find('.ui-slider-scale:eq(0)'); jQuery(groups).each(function(h){ scale.append('