jQuery.telligent.evolution.ui.components.select
UI Component which re-renders select
elements as glowDropDownList instances on desktop. On narrow devices, continues to render as a native select, to give the theme a chance to more preceisely theme the form field on desktop use. Re-rendered selects' values are still updated and available to interacted with. Overrides can be provided at the theme level to present selects
differently.
Example
Usage
// Re-renders the select as a glowDropDownList on the desktop, not on mobile
<select class="ui-select" id="mySelect">
<option value="a">Option A</option>
<option value="b">Option B</option>
<option value="c">Option C</option>
<option value="d">Option D</option>
</select>
// Returns the value of the select, even when re-rendered
var value = $('#mySelect').val();
A barebones UI component override which would result in not re-rendering select
elements
$.telligent.evolution.ui.components.select = {
setup: function() { },
add: function(elm, options) {
// do nothing when added instead of re-rendering
}
};
Default Implementation
For reference purposes or as the basis for an override:
(function($, global){
var minWindowWidth = 570,
minWidth = 150,
measuredHeight = null,
measuredBorderHeight = null;
function measure(elm) {
if(measuredHeight)
return;
var testDiv = $('<span class="uiselect"><span>measure</span></span>').css({'display':'none'}).appendTo(elm.parent());
measuredHeight = testDiv.height();
measuredBorderHeight = parseInt(testDiv.css('border-top-width') || '0') + parseInt(testDiv.css('border-bottom-width') || '0');
testDiv.remove();
}
$.telligent.evolution.ui.components.select = {
setup: function() { },
add: function(elm, options) {
elm.removeClass('ui-select');
measure(elm);
if(elm.is('select') && $(window).width() > minWindowWidth) {
// set the height of the expanded view to not have empty space
var optionLength = elm.find('option').length;
var expandedHeight = optionLength * measuredHeight;
// set a reasonable default width
var width = elm.width();
if(width < minWidth)
width = minWidth;
// render
elm.show().glowDropDownList({
selectedItemWidth: width + 20,
selectedItemHeight: measuredHeight,
itemsWidth: width + 20,
itemsHeight: expandedHeight + measuredBorderHeight + 4, // (glowDropDownList assumes to - 4 from height)
buttonImageUrl: null,
className: 'uiselect'
});
}
}
};
})(jQuery, window);