Selectmenu: basic popop support, code cleanup

This commit is contained in:
Felix Nagel 2011-09-23 00:17:24 +02:00
parent 8120b0d6df
commit 85a34ebedb
2 changed files with 54 additions and 48 deletions

View File

@ -14,7 +14,10 @@
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>
$(function() { $(function() {
$('select').selectmenu(); $('select#speedA').selectmenu({
dropdown: false
});
$('select#filesC').selectmenu();
}); });
</script> </script>
<style> <style>

View File

@ -16,9 +16,6 @@
*/ */
(function( $, undefined ) { (function( $, undefined ) {
// used to prevent race conditions with remote data sources
var requestIndex = 0;
$.widget( "ui.selectmenu", { $.widget( "ui.selectmenu", {
version: "@VERSION", version: "@VERSION",
defaultElement: "<select>", defaultElement: "<select>",
@ -143,8 +140,7 @@ $.widget( "ui.selectmenu", {
role: 'listbox', role: 'listbox',
id: self.ids[1], id: self.ids[1],
css: { css: {
// width: self.element.width() - options.iconWidth width: ( options.dropdown ) ? self.element.width() : self.element.width() - options.iconWidth
width: self.element.width()
} }
}); });
@ -155,13 +151,15 @@ $.widget( "ui.selectmenu", {
self._renderMenu( self.list, self._initSource() ); self._renderMenu( self.list, self._initSource() );
self.list.menu({ self.list
.data( 'element.selectelemenu', self.element )
.menu({
select: function( event, ui ) { select: function( event, ui ) {
var item = ui.item.data( "item.selectmenu" ); var item = ui.item.data( "item.selectmenu" );
console.log(item); // console.log(item);
self.newelement.children( 'span.ui-button-text' ).text( item.label ); self.newelement.children( 'span.ui-button-text' ).text( item.label );
self.value( item.value ); self._value( item.value );
self.close( event, true); self.close( event, true);
}, },
focus: function( event, ui ) { focus: function( event, ui ) {
@ -199,6 +197,10 @@ $.widget( "ui.selectmenu", {
var self = this, var self = this,
options = this.options; options = this.options;
// close all other selectmenus
$( '.' + self.widgetBaseClass + '-open' ).not( self.newelement ).each( function() {
$( this ).children( 'ul.ui-menu' ).data( 'element.selectelemenu' ).selectmenu( 'close' );
});
if ( options.dropdown ) { if ( options.dropdown ) {
self.newelement self.newelement
@ -206,16 +208,26 @@ $.widget( "ui.selectmenu", {
.removeClass( 'ui-corner-all' ); .removeClass( 'ui-corner-all' );
} }
self.listWrap.addClass( self.widgetBaseClass + '-open' ); self.listWrap.addClass( self.widgetBaseClass + '-open' );
this.options.open = true; this.options.open = true;
if ( !options.dropdown ) {
// var _offset = self.list.outerWidth()
$.extend( options.position, {
my: "left center",
at: "left center",
collision: "fit"
});
}
console.log(options.position);
self.listWrap.position( $.extend({ self.listWrap.position( $.extend({
of: this.newelementWrap of: this.newelementWrap
}, options.position )); }, options.position ));
}, },
close: function( event, focus ) { close: function( event, focus ) {
var self = this, var self = this,
options = this.options; options = this.options;
@ -235,6 +247,7 @@ $.widget( "ui.selectmenu", {
_renderMenu: function( ul, items ) { _renderMenu: function( ul, items ) {
var self = this, var self = this,
currentOptgroup = ""; currentOptgroup = "";
$.each( items, function( index, item ) { $.each( items, function( index, item ) {
if ( item.optgroup != currentOptgroup ) { if ( item.optgroup != currentOptgroup ) {
ul.append( "<li class='ui-selectmenu-optgroup'>" + item.optgroup + "</li>" ); ul.append( "<li class='ui-selectmenu-optgroup'>" + item.optgroup + "</li>" );
@ -280,17 +293,6 @@ $.widget( "ui.selectmenu", {
_initSource: function() { _initSource: function() {
var data = []; var data = [];
// data = [
// { label: "anders", optgroup: "" },
// { label: "andreas", optgroup: "" },
// { label: "antal", optgroup: "" },
// { label: "annhhx10", optgroup: "Products" },
// { label: "annk K12", optgroup: "Products" },
// { label: "annttop C13", optgroup: "Products" },
// { label: "anders andersson", optgroup: "People" },
// { label: "andreas andersson", optgroup: "People" },
// { label: "andreas johnson", optgroup: "People" }
// ];
$.each( this.items, function( index, item ) { $.each( this.items, function( index, item ) {
var option = $( item ); var option = $( item );
@ -300,25 +302,26 @@ $.widget( "ui.selectmenu", {
optgroup: option.parent("optgroup").attr("label") || false optgroup: option.parent("optgroup").attr("label") || false
}); });
}); });
// console.log(data); // console.log(data);
return data; return data;
}, },
value: function( newValue ) { _value: function( newValue ) {
if (arguments.length) { if (arguments.length) {
this.element[0].value = newValue; this.element[0].value = newValue;
} else { } else {
return this.element[0].value; return this.element[0].value;
} }
} },
// index: function( newValue ) { _index: function( newIndex ) {
// if ( arguments.length ) { if ( arguments.length ) {
// this.element[0].selectedIndex = newValue; this.element[0].selectedIndex = newIndex;
// } else { } else {
// return this.element[0].selectedIndex; return this.element[0].selectedIndex;
// } }
// } }
}); });
}( jQuery )); }( jQuery ));