0

私は電話アプリケーションを開発しており、画面の上部に「戻る」と「次へ」の 2 つのボタンがあります。次のボタンをクリックするたびに、画面は右から左に移動し、ほとんどの場合、戻るボタンをクリックすると、左から右に移動します。ただし、「戻る」をクリックすると、右から左に遷移することがよくあります。

これは、戻るボタン用に持っているコードです:

.html

<a href="#" data-rel="back"  data-role="button" data-inline="true" data-transition="myTransition" data-direction="reverse">Back</a>

.js

(function( $, undefined ) {

$.mobile.page.prototype.options.backBtnText  = "Back";
$.mobile.page.prototype.options.addBackBtn   = false;
$.mobile.page.prototype.options.backBtnTheme = null;
$.mobile.page.prototype.options.headerTheme  = "a";
$.mobile.page.prototype.options.footerTheme  = "a";
$.mobile.page.prototype.options.contentTheme = null;

$( document ).delegate( ":jqmData(role='page'), :jqmData(role='dialog')", "pagecreate", function( e ) {

var $page = $( this ),
    o = $page.data( "page" ).options,
    pageRole = $page.jqmData( "role" ),
    pageTheme = o.theme;

$( ":jqmData(role='header'), :jqmData(role='footer'), :jqmData(role='content')", this ).each(function() {
    var $this = $( this ),
        role = $this.jqmData( "role" ),
        theme = $this.jqmData( "theme" ),
        contentTheme = theme || o.contentTheme || ( pageRole === "dialog" && pageTheme ),
        $headeranchors,
        leftbtn,
        rightbtn,
        backBtn;

    $this.addClass( "ui-" + role ); 

    //apply theming and markup modifications to page,header,content,footer
    if ( role === "header" || role === "footer" ) {

        var thisTheme = theme || ( role === "header" ? o.headerTheme : o.footerTheme ) || pageTheme;

        $this
            //add theme class
            .addClass( "ui-bar-" + thisTheme )
            // Add ARIA role
            .attr( "role", role === "header" ? "banner" : "contentinfo" );

        // Right,left buttons
        $headeranchors  = $this.children( "a" );
        leftbtn = $headeranchors.hasClass( "ui-btn-left" );
        rightbtn = $headeranchors.hasClass( "ui-btn-right" );

        leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;

        rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;

        // Auto-add back btn on pages beyond first view
        if ( o.addBackBtn && 
            role === "header" &&
            $( ".ui-page" ).length > 1 &&
            $this.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
            !leftbtn ) {

            backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" )
                // If theme is provided, override default inheritance
                .attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme )
                .prependTo( $this );                
        }

        // Page title
        $this.children( "h1, h2, h3, h4, h5, h6" )
            .addClass( "ui-title" )
            // Regardless of h element number in src, it becomes h1 for the enhanced page
            .attr({
                "tabindex": "0",
                "role": "heading",
                "aria-level": "1"
            });

    } else if ( role === "content" ) {
        if ( contentTheme ) {
            $this.addClass( "ui-body-" + ( contentTheme ) );
        }

        // Add ARIA role
        $this.attr( "role", "main" );
    }
});
});

})( jQuery );

編集：

これは私が作成したトランジションです

function myTransitionHandler( name, reverse, $to, $from ) {

var deferred = new $.Deferred(),
    reverseClass = reverse ? " reverse" : "",
    viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
    doneFunc = function() {

        $to.add( $from ).removeClass( "out in reverse " + name );

        if ( $from && $from[ 0 ] !== $to[ 0 ] ) {
            $from.removeClass( $.mobile.activePageClass );
        }

        $to.parent().removeClass( viewportClass );

        deferred.resolve( name, reverse, $to, $from );
    };

$to.animationComplete( doneFunc );

$to.parent().addClass( viewportClass );

if ( $from ) {
    $from.addClass( name + " out" + reverseClass );
}
$to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );

return deferred.promise();
}

// Make our transition handler public.
$.mobile.transitionHandlers["myTransition"] = myTransitionHandler;

戻るボタンがクリックされたときに画面が常に左から右に移動するように追加できるコードはありますか?

4

1 に答える 1

0

jQuery モバイルでは、トランジション (こちらdata-direction="reverse"を参照) を指定してから、プロパティを指定するときにその逆をプログラムすることしかできないようです。

また、戻るボタン (ブラウザの戻るボタンでさえも) が「順方向」遷移をトリガーすることがあるというこの動作も経験しました。これを変更したり、ボタンを常に同じ方向に強制的に遷移させたりする方法はありません。

ただし、独自のトランジションを設定すると、ある程度の見込みがある場合があります。data-directionもしあなたがそうするなら（私はしていませんが）、プロパティに関係なく、jQueryモバイルが順方向または逆方向であると信じているかどうかにかかわらず、一方向にのみ進むトランジションを適用できるかもしれません。

.my.slide.out {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
    -moz-animation-name: slideouttoleft;
}
.my.slide.in {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
    -moz-animation-name: slideouttoleft;
}

そして、これらのトランジションを戻るボタンに適用します。

于 2012-04-30T12:35:39.493 に答える