jQuery Mobile：jQuery MobileのiOSスライドアウトナビゲーションパターンをどのようにシミュレートしますか？

Question

EDIT 2/13：jQuery Mobile 1.3のPanels widgetが存在するようになりました！これを代わりに使用してください。

custom CSS-based transition in jQuery Mobileを書き込んで、slide-out navigation design patternをシミュレートしようとしています。

私が達成しようとしているのは、ナビゲーションをスライドさせてビューポートスペースの75％を占めることです。残りの25％は、前のページの残りの部分で満たされます。私はしかし、それは私がやりたいように見えることはできません

.slidenav.in { /*New page coming in*/ 
    -webkit-transform: translateX(-75%); 
    -webkit-animation-name: slidenav-in; 
} 

@-webkit-keyframes slidenav-in { 
    from { -webkit-transform: translateX(-75%); } 
    to { -webkit-transform: translateX(0); } 
} 

.slidenav.out { /*Old page going out*/ 
    -webkit-transform: translateX(0); 
    -webkit-animation-name: slidenav-content-out; 
} 

@-webkit-keyframes slidenav-content-out { 
    from { -webkit-transform: translateX(0); } 
    to { -webkit-transform: translateX(75%); } 
} 

.slidenav.in.reverse { /*Old page coming in*/ 
    -webkit-transform: translateX(75%); 
    -webkit-animation-name: slidenav-content-in; 
} 

@-webkit-keyframes slidenav-content-in { 
    from { -webkit-transform: translateX(75%); } 
    to { -webkit-transform: translateX(0); } 
} 

.slidenav.out.reverse { /*New page going out*/ 
    -webkit-transform: translateX(0); 
    -webkit-animation-name: slidenav-out; 
} 

@-webkit-keyframes slidenav-out { 
    from { -webkit-transform: translateX(0); } 
    to { -webkit-transform: translateX(-75%); } 
} 

：

は、ここに私のCSSです。ページの残りの25％を表示する代わりに、古いページを完全に削除します。

あなたはここで何が起こっているのか（のWebkitブラウザを）見ることができます：http://jsbin.com/ukajeb/7

私が間違って何をしているのですか？

Answer 1

EDIT 2/13：jQuery Mobile 1.3のPanels widgetが存在するようになりました。これを代わりに使用してください。

は、だから私はこの上でいくつかのより多くの仕事をして、Firebugのの助けを借りて、キーフレームアニメーションが発生した後、元のページが元の位置とnoneからdisplayセットにリセットされていたことを発見しました。

これを知ったので、私はjQuery Mobileのドキュメントをもう少し詳しく調べて、バインドできるPage Transition Eventsがあることを発見しました。具体的には、pageshowとpagehideのイベントです。

は、それから私は、手動で元のページのCSSを設定します。

$('[data-role=page]').live('pagehide',function(event, ui){ 
    $(this).css({ 
     "display": "block", 
     "-webkit-transform": "translateX(75%)" 
    }); 
}); 
$('[data-role=page]').live('pageshow',function(event, ui){ 
    $(this).css({ 
     "display": "", 
     "-webkit-transform": "" 
    }); 
}); 

はここ（のWebkitブラウザを）それをチェックアウト：http://jsbin.com/ukajeb/3

希望、他の誰かが同様に、これは重宝します！

注：このデモでは、jQuery 1.6.4のみをサポートするjQuery Mobile 1.0.1を使用しています。このため、.on()ではなく.live()が使用されました。ただし、近日公開予定のjQuery Mobile 1.1.0はjQuery 1.7.1をサポートする予定ですので、非推奨の.live()の代わりに.on()を転送してください。

Answer 2

これが完全に役立つかどうかわかりませんが、私はこの火かき棒の内部を少し見ました。私が考えているのは、トランジション（部分的なものであっても）を完了すると、アクティブなページがあなたが移行するメニューになることです。これは、最後のページが非表示になっていることを意味します。実際には、「コンテンツ」が消えた状態で他のページの遷移が完了したときを見ることができます。

メニューを呼び出すリンクでこれを試してみてください。ダイアログを使用してみてください。それでもカスタムトランジションを適用する必要があります。私はあなたが達成しようとしているものは、あなたが達成しようとしている外観にあなたを得るかもしれない "サブページ"と呼ばれるプラグインを調べるかもしれないと思います。また、splitview（http://asyraf9.github.com/jquery-mobile/）があります。あるいは、JQMの1.2ブランチを使いこなし、POPUPの男性があなたをそこに連れて来るかどうかを調べることもできます。基本的に、それは既存のアクティブなページの上に座ることができるdivです。私はもともとスライドアップ/ダウン効果との対話を使用していた

<a href="foo.html" data-rel="dialog">Open dialog</a> 

- それはAndroidの中であまりにも面倒になったので、我々はそれを削除しました。

JQMは、デフォルトで2ページをアクティブにして一度に表示できるように設計されていたとは思いません。