mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-08 08:30:58 +00:00
c31ee33a0f
- Modified vmouse code so that it uses $.data() instead of $().data() which is significantly faster. - Modified the navigation and buttonMarkup code so they stop using live(). The vmouse code triggers several events during the touch events, which in turn causes the underlying event code to call $.closest() with the selector used during the live() call to figure out if the event should be handled. This turns out to be very expensive, so instead, we now just bind directly to the document, and walk the DOM manually to figure out if we should handle it. This is much faster since we are avoid triggering multiple nested function calls.
135 lines
3.1 KiB
JavaScript
135 lines
3.1 KiB
JavaScript
/*
|
|
* jQuery Mobile Framework : plugin for making button-like links
|
|
* Copyright (c) jQuery Project
|
|
* Dual licensed under the MIT or GPL Version 2 licenses.
|
|
* http://jquery.org/license
|
|
*/
|
|
(function($, undefined ) {
|
|
|
|
$.fn.buttonMarkup = function( options ){
|
|
return this.each( function() {
|
|
var el = $( this ),
|
|
o = $.extend( {}, $.fn.buttonMarkup.defaults, el.jqmData(), options),
|
|
|
|
// Classes Defined
|
|
buttonClass,
|
|
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-']");
|
|
o.theme = themedParent.length ?
|
|
/ui-(bar|body)-([a-z])/.exec( themedParent.attr("class") )[2] :
|
|
"c";
|
|
}
|
|
|
|
buttonClass = "ui-btn ui-btn-up-" + o.theme;
|
|
|
|
if ( o.inline ) {
|
|
buttonClass += " ui-btn-inline";
|
|
}
|
|
|
|
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";
|
|
}
|
|
}
|
|
|
|
if ( o.iconpos ) {
|
|
buttonClass += " ui-btn-icon-" + o.iconpos;
|
|
|
|
if ( o.iconpos == "notext" && !el.attr("title") ) {
|
|
el.attr( "title", el.text() );
|
|
}
|
|
}
|
|
|
|
if ( o.corners ) {
|
|
buttonClass += " ui-btn-corner-all";
|
|
innerClass += " ui-btn-corner-all";
|
|
}
|
|
|
|
if ( o.shadow ) {
|
|
buttonClass += " ui-shadow";
|
|
}
|
|
|
|
el
|
|
.attr( "data-" + $.mobile.ns + "theme", o.theme )
|
|
.addClass( buttonClass );
|
|
|
|
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( wrap );
|
|
});
|
|
};
|
|
|
|
$.fn.buttonMarkup.defaults = {
|
|
corners: true,
|
|
shadow: true,
|
|
iconshadow: true,
|
|
wrapperEls: "span"
|
|
};
|
|
|
|
function closestEnabledButton(element)
|
|
{
|
|
while (element){
|
|
var $ele = $(element);
|
|
if ($ele.hasClass("ui-btn") && !ele.hasClass("ui-disabled")){
|
|
break;
|
|
}
|
|
element = element.parentNode;
|
|
}
|
|
return element;
|
|
}
|
|
|
|
var attachEvents = function() {
|
|
$(document).bind({
|
|
"vmousedown": function() {
|
|
var btn = closestEnabledButton(this);
|
|
if (btn){
|
|
var $btn = $(btn),
|
|
theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
|
|
$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
|
|
}
|
|
},
|
|
"vmousecancel vmouseup": function() {
|
|
var btn = closestEnabledButton(this);
|
|
if (btn){
|
|
var $btn = $(btn),
|
|
theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
|
|
$btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
|
|
}
|
|
},
|
|
"vmouseover focus": function() {
|
|
var btn = closestEnabledButton(this);
|
|
if (btn){
|
|
var $btn = $(btn),
|
|
theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
|
|
$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
|
|
}
|
|
},
|
|
"vmouseout blur": function() {
|
|
var btn = closestEnabledButton(this);
|
|
if (btn){
|
|
var $btn = $(btn),
|
|
theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
|
|
$btn.removeClass( "ui-btn-hover-" + theme ).addClass( "ui-btn-up-" + theme );
|
|
}
|
|
}
|
|
});
|
|
|
|
attachEvents = null;
|
|
};
|
|
|
|
})(jQuery);
|