我想覆盖jQuery移动库中的一个函数。这是我要覆盖的功能：
$navbar.delegate( "a", "vclick", function( event ) {
if ( !$(event.target).hasClass( "ui-disabled" ) ) {
$navbtns.removeClass( $.mobile.activeBtnClass );
$( this ).addClass( $.mobile.activeBtnClass );
}
});
我可以更改源代码，但我更喜欢在我的代码中添加一个函数覆盖，所以当我们升级jQuery mobile时，我们不会忘记并失去更改。
$ navbar.delegate包含在：
(function( $, undefined ) {
$.widget( "mobile.navbar", $.mobile.widget, {...
并且我不确定要改变功能的变量。
我尝试重写$ navbar.delegate，但这不起作用。我认为$ navbar是$ .widget函数的_create函数中定义的变量。
可能会被置于$ .widget函数中，无需更改源代码即可覆盖。任何jQuery大师都有想法吗？
答案 0 :(得分：3)
您提到的特定事件处理程序包含在_create jQuery Mobile方法中，该方法负责设置初始navbar窗口小部件显示。
方法1：
您可以使用mobileinit事件绑定来覆盖jQuery Mobile的默认设置。由于mobileinit事件是立即触发的，因此您需要在加载jQuery Mobile之前绑定事件处理程序。在事件处理程序中，您可以覆盖$.mobile.navbar.prototype._create方法。 navbar _create方法的原始实现将从您提到的代码片段中复制出来。该代码已被注释掉。
示例示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Override Function Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.navbar.prototype._create = function() {
var $navbar = this.element,
$navbtns = $navbar.find( "a" ),
iconpos = $navbtns.filter( ":jqmData(icon)" ).length ?
this.options.iconpos : undefined;
$navbar.addClass( "ui-navbar ui-mini" )
.attr( "role","navigation" )
.find( "ul" )
.jqmEnhanceable()
.grid({ grid: this.options.grid });
$navbtns.buttonMarkup({
corners: false,
shadow: false,
inline: true,
iconpos: iconpos
});
/*
$navbar.delegate( "a", "vclick", function( event ) {
if( !$(event.target).hasClass("ui-disabled") ) {
$navbtns.removeClass( $.mobile.activeBtnClass );
$( this ).addClass( $.mobile.activeBtnClass );
}
});
*/
// Buttons in the navbar with ui-state-persist class should regain their active state before page show
$navbar.closest( ".ui-page" ).bind( "pagebeforeshow", function() {
$navbtns.filter( ".ui-state-persist" ).addClass( $.mobile.activeBtnClass );
});
};
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<!-- /page -->
<div data-role="page">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>jQuery Mobile Override Example</h1>
</div>
<!-- /content -->
<div data-role="content">
<div data-role="navbar">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
方法2：
您可以使用以下代码来覆盖整个_create方法。使用这种方式，您可以自定义原始实现：
(function($){
// reference to the original method
var _old = $.mobile.navbar.prototype._create;
$.mobile.navbar.prototype._create = function() {
// put your custom code here
// .....
// in case you want to apply the default behaviour
// return _old.apply(this);
};
})(jQuery);
下面你可以找到一个有效的例子。 navbar _create方法的原始实现将从您提到的代码片段中复制出来。该代码已被注释掉。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Override Function Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
(function($){
// store original reference to the method
var _old = $.mobile.navbar.prototype._create;
$.mobile.navbar.prototype._create = function() {
var $navbar = this.element,
$navbtns = $navbar.find( "a" ),
iconpos = $navbtns.filter( ":jqmData(icon)" ).length ?
this.options.iconpos : undefined;
$navbar.addClass( "ui-navbar ui-mini" )
.attr( "role","navigation" )
.find( "ul" )
.jqmEnhanceable()
.grid({ grid: this.options.grid });
$navbtns.buttonMarkup({
corners: false,
shadow: false,
inline: true,
iconpos: iconpos
});
/*
$navbar.delegate( "a", "vclick", function( event ) {
if( !$(event.target).hasClass("ui-disabled") ) {
$navbtns.removeClass( $.mobile.activeBtnClass );
$( this ).addClass( $.mobile.activeBtnClass );
}
});
*/
// Buttons in the navbar with ui-state-persist class should regain their active state before page show
$navbar.closest( ".ui-page" ).bind( "pagebeforeshow", function() {
$navbtns.filter( ".ui-state-persist" ).addClass( $.mobile.activeBtnClass );
});
};
})(jQuery);
</script>
</head>
<body>
<!-- /page -->
<div data-role="page">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>jQuery Mobile Override Example</h1>
</div>
<!-- /content -->
<div data-role="content">
<div data-role="navbar">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>