0

jQuery モバイル ライブラリの関数をオーバーライドしたいと考えています。これは私がオーバーライドしたい関数です: 

$navbar.delegate( "a", "vclick", function( event ) {
        if ( !$(event.target).hasClass( "ui-disabled" ) ) {
            $navbtns.removeClass( $.mobile.activeBtnClass );
            $( this ).addClass( $.mobile.activeBtnClass );
        }
    });

ソース コードを変更することはできますが、コードに関数のオーバーライドを追加して、jQuery モバイルをアップグレードしたときに変更を忘れたり失ったりしないようにすることをお勧めします。

$navbar.delegate は以下に含まれます:

(function( $, undefined ) {

$.widget( "mobile.navbar", $.mobile.widget, {...

関数を変更するためにどの変数にアクセスすればよいかよくわかりません。

$navbar.delegate をオーバーライドしようとしましたが、うまくいきませんでした。$navbar は $.widget 関数の _create 関数で定義された変数だと思います。

$.widget 関数に埋もれすぎて、ソースを変更せずにオーバーライドできない可能性があります。jQueryマスターにアイデアはありますか?

4

1 に答える 1

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>
于 2012-11-04T11:51:34.373 に答える