mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Selectmenu: basic popop support, code cleanup
This commit is contained in:
parent
8120b0d6df
commit
85a34ebedb
@ -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>
|
||||||
|
63
ui/jquery.ui.selectmenu.js
vendored
63
ui/jquery.ui.selectmenu.js
vendored
@ -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 ));
|
||||||
|
Loading…
Reference in New Issue
Block a user