0

我想覆盖 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 大师有想法吗？

4

1 回答 1

3

您提到的特定事件处理程序包含在_create负责设置初始navbar小部件显示的 jQuery Mobile 方法中。

方法一：

您可以使用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>

方法二：

您可以使用以下代码来覆盖整个_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>
于 2012-11-04T11:51:34.373 回答