mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-29 02:14:44 +00:00
Merge clickable into buttonMarkup. Improve performance of the Button Markup plugin.
This commit is contained in:
parent
21a7b0a2ba
commit
f91b2523ff
5 changed files with 63 additions and 83 deletions
1
Makefile
1
Makefile
|
|
@ -13,7 +13,6 @@ FILES = js/jquery.ui.widget.js \
|
|||
js/jquery.mobile.event.js \
|
||||
js/jquery.mobile.hashchange.js \
|
||||
js/jquery.mobile.page.js \
|
||||
js/jquery.mobile.clickable.js \
|
||||
js/jquery.mobile.fixHeaderFooter.js \
|
||||
js/jquery.mobile.forms.checkboxradio.js \
|
||||
js/jquery.mobile.forms.textinput.js \
|
||||
|
|
|
|||
|
|
@ -4,91 +4,102 @@
|
|||
* 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
|
||||
*/
|
||||
(function($){
|
||||
(function( jQuery ) {
|
||||
|
||||
$.fn.buttonMarkup = function( options ){
|
||||
jQuery.fn.buttonMarkup = function( options ){
|
||||
return this.each( function() {
|
||||
var el = $( this ),
|
||||
o = $.extend( {}, {
|
||||
theme: (function(){
|
||||
//if data-theme attr is present
|
||||
if(el.is('[data-theme]')){
|
||||
return el.attr('data-theme');
|
||||
}
|
||||
//if not, try to find closest theme container
|
||||
else if( el.parents('body').length ) {
|
||||
var themedParent = el.closest('[class*=ui-bar-],[class*=ui-body-]');
|
||||
return themedParent.length ? themedParent.attr('class').match(/ui-(bar|body)-([a-z])/)[2] : 'c';
|
||||
}
|
||||
else{
|
||||
return 'c';
|
||||
}
|
||||
})(),
|
||||
iconpos: el.data('iconpos'),
|
||||
icon: el.data('icon'),
|
||||
inline: el.data('inline')
|
||||
}, $.fn.buttonMarkup.defaults, options),
|
||||
var el = jQuery( this ),
|
||||
o = jQuery.extend( {}, jQuery.fn.buttonMarkup.defaults, el.data(), options),
|
||||
|
||||
// Classes Defined
|
||||
buttonClass = "ui-btn ui-btn-up-" + o.theme,
|
||||
innerClass = "ui-btn-inner",
|
||||
iconClass;
|
||||
|
||||
if ( attachEvents ) {
|
||||
attachEvents();
|
||||
}
|
||||
|
||||
// if not, try to find closest theme container
|
||||
if ( !o.theme ) {
|
||||
var themedParent = el.closest("[class*='ui-bar-'],[class*='ui-body-']");
|
||||
return themedParent.length ?
|
||||
/ui-(bar|body)-([a-z])/.exec( themedParent.attr("class") )[2] :
|
||||
"c";
|
||||
}
|
||||
|
||||
if( o.inline ){
|
||||
if ( o.inline ) {
|
||||
buttonClass += " ui-btn-inline";
|
||||
}
|
||||
|
||||
if (o.icon) {
|
||||
o.icon = 'ui-icon-' + o.icon;
|
||||
if ( o.icon ) {
|
||||
o.icon = "ui-icon-" + o.icon;
|
||||
o.iconpos = o.iconpos || "left";
|
||||
|
||||
iconClass = "ui-icon " + o.icon;
|
||||
|
||||
if (o.shadow) { iconClass += " ui-icon-shadow" }
|
||||
o.iconpos = o.iconpos || 'left';
|
||||
if ( o.shadow ) {
|
||||
iconClass += " ui-icon-shadow"
|
||||
}
|
||||
}
|
||||
|
||||
if (o.iconpos){
|
||||
if ( o.iconpos ) {
|
||||
buttonClass += " ui-btn-icon-" + o.iconpos;
|
||||
|
||||
if( o.iconpos == 'notext' && !el.attr('title') ){
|
||||
el.attr('title', el.text() );
|
||||
if ( o.iconpos == "notext" && !el.attr("title") ) {
|
||||
el.attr( "title", el.text() );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
if (o.corners) {
|
||||
if ( o.corners ) {
|
||||
buttonClass += " ui-btn-corner-all";
|
||||
innerClass += " ui-btn-corner-all";
|
||||
}
|
||||
|
||||
if (o.shadow) {
|
||||
if ( o.shadow ) {
|
||||
buttonClass += " ui-shadow";
|
||||
}
|
||||
|
||||
el
|
||||
.attr( 'data-theme', o.theme )
|
||||
.addClass( buttonClass )
|
||||
.wrapInner( $( '<' + o.wrapperEls + '>', { className: "ui-btn-text" } ) );
|
||||
.attr( "data-theme", o.theme )
|
||||
.addClass( buttonClass );
|
||||
|
||||
if (o.icon) {
|
||||
el.prepend( $( '<span>', { className: iconClass } ) );
|
||||
}
|
||||
var wrap = ("<D class='" + innerClass + "'><D class='ui-btn-text'></D>" +
|
||||
( o.icon ? "<span class='" + iconClass + "'></span>" : "" ) +
|
||||
"</D>").replace(/D/g, o.wrapperEls);
|
||||
|
||||
el.wrapInner( $('<' + o.wrapperEls + '>', { className: innerClass }) );
|
||||
|
||||
el.clickable();
|
||||
el.wrapInner( wrap );
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.buttonMarkup.defaults = {
|
||||
jQuery.fn.buttonMarkup.defaults = {
|
||||
corners: true,
|
||||
shadow: true,
|
||||
iconshadow: true,
|
||||
wrapperEls: 'span'
|
||||
wrapperEls: "span"
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
var attachEvents = function() {
|
||||
jQuery(".ui-btn").live({
|
||||
mousedown: function() {
|
||||
var theme = jQuery(this).attr( "data-theme" );
|
||||
jQuery(this).removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
|
||||
},
|
||||
mouseup: function() {
|
||||
var theme = jQuery(this).attr( "data-theme" );
|
||||
jQuery(this).removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
|
||||
},
|
||||
"mouseover focus": function() {
|
||||
var theme = jQuery(this).attr( "data-theme" );
|
||||
jQuery(this).removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
|
||||
},
|
||||
"mouseout blur": function() {
|
||||
var theme = jQuery(this).attr( "data-theme" );
|
||||
jQuery(this).removeClass( "ui-btn-hover-" + theme ).addClass( "ui-btn-up-" + theme );
|
||||
}
|
||||
});
|
||||
|
||||
attachEvents = null;
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
/*
|
||||
* jQuery Mobile Framework : sample scripting for manipulating themed interaction states
|
||||
* Copyright (c) jQuery Project
|
||||
* 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
|
||||
*/
|
||||
(function($){
|
||||
$.fn.clickable = function(){
|
||||
return $(this).each(function(){
|
||||
var theme = $(this).attr('data-theme');
|
||||
$(this)
|
||||
.mousedown(function(){
|
||||
$(this).removeClass('ui-btn-up-'+theme).addClass('ui-btn-down-'+theme);
|
||||
})
|
||||
.mouseup(function(){
|
||||
$(this).removeClass('ui-btn-down-'+theme).addClass('ui-btn-up-'+theme);
|
||||
})
|
||||
.bind('mouseover focus',function(){
|
||||
$(this).removeClass('ui-btn-up-'+theme).addClass('ui-btn-hover-'+theme);
|
||||
})
|
||||
.bind('mouseout blur',function(){
|
||||
$(this).removeClass('ui-btn-hover-'+theme).addClass('ui-btn-up-'+theme);
|
||||
});
|
||||
});
|
||||
};
|
||||
})(jQuery);
|
||||
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
|
|||
this.element.addClass( "ui-listview-inset ui-corner-all ui-shadow" );
|
||||
}
|
||||
|
||||
this.element.delegate("ui-li", "focusin", function() {
|
||||
this.element.delegate(".ui-li", "focusin", function() {
|
||||
jQuery(this).attr( "tabindex", "0" );
|
||||
});
|
||||
|
||||
|
|
@ -126,10 +126,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
|
|||
$list.find( ".ui-li-dec" ).remove();
|
||||
}
|
||||
|
||||
li
|
||||
.addClass( "ui-li" )
|
||||
.attr( "role", "option" )
|
||||
.attr( "tabindex", "-1" )
|
||||
li.attr({ "role": "option", "tabindex": "-1" });
|
||||
|
||||
li.first().attr( "tabindex", "0" );
|
||||
|
||||
|
|
@ -141,6 +138,8 @@ $.widget( "mobile.listview", $.mobile.widget, {
|
|||
return;
|
||||
}
|
||||
|
||||
item.addClass( "ui-li" );
|
||||
|
||||
var a = item.find( "a" );
|
||||
|
||||
if ( a.length ) {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ $elements = array(
|
|||
'jquery.mobile.event.js',
|
||||
'jquery.mobile.hashchange.js',
|
||||
'jquery.mobile.page.js',
|
||||
'jquery.mobile.clickable.js',
|
||||
'jquery.mobile.fixHeaderFooter.js',
|
||||
'jquery.mobile.forms.checkboxradio.js',
|
||||
'jquery.mobile.forms.textinput.js',
|
||||
|
|
|
|||
Loading…
Reference in a new issue