navcontainerのようにナビゲーションをカスタマイズすることができます。つまり、ビューをスクロールして左から右に変更する場合は、navcontainerのように新しいページでスワイプします。openui5でタブストリップにカスタムトランジションを追加
1
A
答えて
1
あなたはどのあなたがサポートしているブラウザに応じて、ベンダープレフィックスとCSSを追加する必要があり、アプリケーション
@keyframes slidein {
from {
right: -100%;
}
to {
right: -6px;
}
}
.sapUiTabPanel {
overflow:hidden;
}
.sapUiTabPanel > * {
animation: slidein 500ms;
position: absolute;
}
ノートに次のCSSを追加することにより、比較的容易に効果でスライドを達成できます。
現在表示されているタブの外にスライドを達成するためには、これを達成することができトリッキー、1つの可能な方法で、次のコードは、お使いのコントローラののOnInit方法上記
oTabStrip1.attachBrowserEvent("mousedown",function(oEvent){
var oTarget = oEvent.target;
if(oTarget.className==="sapUiTabClose"){
return;
}
var iIdx = oTabStrip1.getItemIndex(oTarget);
if (iIdx > -1) {
if ((iIdx !== oTabStrip1.getSelectedIndex()) && (oTabStrip1.getTabs()[iIdx].getEnabled())) {
oEvent.stopPropagation();
oEvent.preventDefault();
jQuery.each(
oTabStrip1.getTabs()[oTabStrip1.getSelectedIndex()].getContent(),function(i,o){
var sAnimateLeft = (o.$().innerWidth() * -1) + "px";
o.$().animate({left:sAnimateLeft},500);
});
setTimeout(function(){
oTabStrip1.selectTabByDomRef(oTarget);
},250);
}
}
});
のようにどこかに追加していますoTabStrip1がタブストリップコントロールのインスタンスであると仮定しています。 UI5アプリケーション内で直接DOMを変更することはよくありませんが、この場合は、表示されたタブのコンテンツが削除され、クリックされたタブのコンテンツに置き換えられても安全である可能性が高いので、スライドアウトするまでアニメーションは完了です。
あなたはhttp://jsbin.com/vukibiで働く例を見ることができます - 上記のコードは、CSSでtabstrip exampleから直接取得されていて、JSは
関連する問題
- 1. フラッタールートにカスタムトランジションを追加する方法
- 2. ユニットのテストでは、フラグメントのカスタムトランジションを追加するとき
- 3. 動的にタブストリップとマルチページビューを追加します
- 4. カスタムトランジション
- 5. Openui5テーブルの列とボタンを動的に追加する
- 6. openui5のTabContainerItemにスタイルクラスとアイコンを追加する方法
- 7. WinRT XAMLカスタムトランジション
- 8. phoenixframeworkにOpenUI5をデプロイ
- 9. ブートストラップカラムを含むタブストリップ
- 10. SAP ABAPタブストリップ
- 11. 剣道のタブストリップArgumentOutOfRangeException
- 12. 1つの視差カスタムトランジション
- 13. UIViewControllerの既定のカスタムトランジション
- 14. i18n.properties Not Found OpenUI5
- 15. OpenUI5、sap.m.Tree:expand single node
- 16. JSDocの/ OPENUI5
- 17. Telerik MVCタブストリップをAjax経由でロード
- 18. UIViewカスタムトランジションが完了時にスナップバック
- 19. OpenUI5 NavContainerの中にページ
- 20. タブストリップの更新ノックアウト剣道
- 21. 剣道タブストリップと剣道テンプレート
- 22. this._helloDialog in OpenUI5 walkthrough
- 23. iOS 7 UINavigationControllerを使用したカスタムトランジション
- 24. OpenUI5:モデルをスタータできません
- 25. .NETビジネスアプリケーションでSAP OpenUI5を使用
- 26. Cordova - タブストリップのアイコンを変更する
- 27. 剣道UIタブストリップ - Javascriptを - コンテンツは、SVG
- 28. UInavigationControllerカスタムトランジションが呼び出されない
- 29. 2つのアクティビティ間のカスタムトランジション(アニメーション)Android
- 30. OpenUI5フォーム検証時submit
感謝を追加しました。しかし、私が[this](http://jsbin.com/kizonezadu/edit?js,output)を試してみると、それが期待どおりに動作しない理由を教えてください。私はタブにタブストリップを追加し、その特定のタブストリップにスタイルクラスを追加しましたが、動作しません。 –
タブストリップ内にあるコントロールに応じて、CSSの調整が必要な場合があります。たとえば、次のようなスタイルを追加できます。 .dasboardTab { position:relative; } –
申し訳ありませんが間違ったビンを送った。ここでは[bin](http://jsbin.com/teyewuzeqe/1/edit?css,js,output)はうまくいきます。しかし、私のアプリケーションに同じコードを実装すると、親のタブが最初に読み込まれたときにスライドのアニメーションが2回発生し、その後に 'mousedownのイベントハンドラの有無にかかわらず正常に動作する。 –