mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-17 19:11:06 +00:00
converted selectmenu widget to the widget factory.
This commit is contained in:
parent
39c4b7b53b
commit
f7a29fc201
2 changed files with 60 additions and 56 deletions
|
|
@ -4,63 +4,60 @@
|
||||||
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
|
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
|
||||||
* Note: Code is in draft form and is subject to change
|
* Note: Code is in draft form and is subject to change
|
||||||
*/
|
*/
|
||||||
(function($){
|
(function ( $ ) {
|
||||||
$.fn.customSelect = function(options){
|
$.widget( "mobile.selectmenu", $.mobile.widget, {
|
||||||
return $(this).each(function(){
|
options: {
|
||||||
var select = $(this)
|
theme: undefined
|
||||||
|
},
|
||||||
|
_create: function(){
|
||||||
|
var select = this.element
|
||||||
.attr( "tabindex", "-1" )
|
.attr( "tabindex", "-1" )
|
||||||
.wrap( "<div class='ui-select'>" ),
|
.wrap( "<div class='ui-select'>" ),
|
||||||
selectID = select.attr( "id" ),
|
selectID = select.attr( "id" ),
|
||||||
label = $( "label[for="+ selectID +"]" )
|
label = $( "label[for="+ selectID +"]" )
|
||||||
.addClass( "ui-select" ),
|
.addClass( "ui-select" ),
|
||||||
|
chooseText = label.text(),
|
||||||
//extendable options
|
buttonId = selectID + "-button",
|
||||||
o = $.extend({
|
menuId = selectID + "-menu",
|
||||||
chooseText: label.text(),
|
thisPage = select.closest( ".ui-page" ),
|
||||||
theme: select.data("theme")
|
menuType,
|
||||||
}, options),
|
currScroll,
|
||||||
|
button = $( "<a>", {
|
||||||
buttonId = selectID + "-button",
|
"href": "#",
|
||||||
menuId = selectID + "-menu",
|
"role": "button",
|
||||||
thisPage = select.closest( ".ui-page" ),
|
"id": buttonId,
|
||||||
menuType,
|
"aria-haspopup": "true",
|
||||||
currScroll,
|
"aria-owns": menuId
|
||||||
button = $( "<a>", {
|
|
||||||
"href": "#",
|
|
||||||
"role": "button",
|
|
||||||
"id": buttonId,
|
|
||||||
"aria-haspopup": "true",
|
|
||||||
"aria-owns": menuId
|
|
||||||
})
|
|
||||||
.text( $( this.options.item(this.selectedIndex) ).text() )
|
|
||||||
.insertBefore( select )
|
|
||||||
.buttonMarkup({
|
|
||||||
iconpos: 'right',
|
|
||||||
icon: 'arrow-d',
|
|
||||||
theme: o.theme
|
|
||||||
}),
|
|
||||||
menuPage = $( "<div data-role='dialog' data-theme='a'>" +
|
|
||||||
"<div data-role='header' data-theme='b'>" +
|
|
||||||
"<div class='ui-title'>" + o.chooseText + "</div>"+
|
|
||||||
"</div>"+
|
|
||||||
"<div data-role='content'></div>"+
|
|
||||||
"</div>" )
|
|
||||||
.appendTo( $.pageContainer )
|
|
||||||
.page(),
|
|
||||||
menuPageContent = menuPage.find( ".ui-content" ),
|
|
||||||
screen = $( "<div>", {
|
|
||||||
"class": "ui-listbox-screen ui-overlay ui-screen-hidden fade"
|
|
||||||
})
|
})
|
||||||
.appendTo( thisPage ),
|
.text( $( select[0].options.item(select[0].selectedIndex) ).text() )
|
||||||
listbox = $( "<div>", { "class": "ui-listbox ui-listbox-hidden ui-body-a ui-overlay-shadow ui-corner-all pop"} )
|
.insertBefore( select )
|
||||||
.insertAfter(screen),
|
.buttonMarkup({
|
||||||
list = $( "<ul>", {
|
iconpos: 'right',
|
||||||
"class": "ui-listbox-list",
|
icon: 'arrow-d',
|
||||||
"id": menuId,
|
theme: this.options.theme
|
||||||
"role": "listbox",
|
}),
|
||||||
"aria-labelledby": buttonId
|
menuPage = $( "<div data-role='dialog' data-theme='a'>" +
|
||||||
})
|
"<div data-role='header' data-theme='b'>" +
|
||||||
.appendTo( listbox );
|
"<div class='ui-title'>" + chooseText + "</div>"+
|
||||||
|
"</div>"+
|
||||||
|
"<div data-role='content'></div>"+
|
||||||
|
"</div>" )
|
||||||
|
.appendTo( $.pageContainer )
|
||||||
|
.page(),
|
||||||
|
menuPageContent = menuPage.find( ".ui-content" ),
|
||||||
|
screen = $( "<div>", {
|
||||||
|
"class": "ui-listbox-screen ui-overlay ui-screen-hidden fade"
|
||||||
|
})
|
||||||
|
.appendTo( thisPage ),
|
||||||
|
listbox = $( "<div>", { "class": "ui-listbox ui-listbox-hidden ui-body-a ui-overlay-shadow ui-corner-all pop"} )
|
||||||
|
.insertAfter(screen),
|
||||||
|
list = $( "<ul>", {
|
||||||
|
"class": "ui-listbox-list",
|
||||||
|
"id": menuId,
|
||||||
|
"role": "listbox",
|
||||||
|
"aria-labelledby": buttonId
|
||||||
|
})
|
||||||
|
.appendTo( listbox );
|
||||||
|
|
||||||
//populate menu
|
//populate menu
|
||||||
select.find( "option" ).each(function( i ){
|
select.find( "option" ).each(function( i ){
|
||||||
|
|
@ -192,8 +189,15 @@ $.fn.customSelect = function(options){
|
||||||
hidemenu();
|
hidemenu();
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
});
|
},
|
||||||
};
|
|
||||||
|
disable: function(){
|
||||||
})(jQuery);
|
this.element.attr("disabled",true);
|
||||||
|
},
|
||||||
|
|
||||||
|
enable: function(){
|
||||||
|
this.element.attr("disabled",false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})( jQuery );
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -165,7 +165,7 @@ jQuery.widget( "mobile.page", jQuery.mobile.widget, {
|
||||||
|
|
||||||
this.element
|
this.element
|
||||||
.find( "select:not([data-role='slider'])" )
|
.find( "select:not([data-role='slider'])" )
|
||||||
.customSelect();
|
.selectmenu();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue