0

現在、ページ ナビゲーションに jQuery UI を使用しています。多くのタブがあると jQuery UI の見栄えがよくないため、ドロップダウン メニューをタブに統合しようとしています。私がこれまでに得たもののアイデアについては、このスクリーンショットを見てください: http://i.imgur.com/T9lwLI8.png

上のセクションは通常の jQuery-UI タブで、下のセクションはマウスが「患者」の上に置かれた新しいメニュー デザインです。新しいメニュー デザインは純粋な CSS です。単純に階層化された ul タグと li タグが、:hover に応じて表示: なしまたはブロックになります。

デフォルトの jQuery-UI タブを置き換えようとするのは悪夢でした。デフォルトの ID とクラスを削除するとタブ機能が壊れるため、スタイルと jQuery の機能が混在しているように見えますが、デフォルトの ID とクラスを新しいタブ セクションに追加すると、不要なスタイルやその他の奇妙なエラーが追加されます。

私の推測では、jQuery UI Tabs はタブを含む ul リストを 1 つしか期待していませんが、私の CSS 実装ではドロップダウン対応のすべてのタブに ul リストを使用しているため、それは気に入りません。私は .js ファイルと .css ファイルを調べましたが、正直なところ、私はこの問題の専門家ではないので、何を探しているのかわかりません。

私はグーグルをしてきましたが、通常、カルーセルを実装して追加のタブを非表示/表示する方法を見つけることができる唯一の解決策は、そうでなければ別の行にプッシュされることです。マウスオーバー時にドロップダウン メニューがあるタブで jQuery UI タブを動作させるにはどうすればよいですか?

4

2 に答える 2

1

多くの検索とフラストレーションがかかりましたが、最終的に解決策にたどり着きました. 正確には理想的ではありませんが、機能します。

jQuery UI が display:none で使用する 'tabs' div の直下に ul タグを隠し、その下にナビゲーション メニューを展開します。

ページ間を移動するためのこの単純な関数を作成しました (ここから取得):

function changeTab(tabIndex) {
    $("#tabs").tabs( "option", "active", tabIndex );    
    }

tabIndex のインデックスはゼロなので、タブが #page-2 の場合、tabIndex は 1 になります。タブに一意の id 属性を与えてから、次のような jQuery でロールアウトします。

$('#tabTwo').click(function() {
    changeTab(1);
    });

繰り返しますが、優れたソリューションではありませんが、重要なことは機能します。

于 2013-06-14T14:20:41.610 に答える
0

ドロップ メニューには、css と単純に jquery (.show) および (.hide) を使用できます。いくつかの簡単な計算と css の配置があります。すべてのタブ コンテナーには、ドロップダウン メニュー リストが 1 つ必要です。タブにカーソルを合わせると、コンテナを表示できます。ドロップダウンリストの下にリストが存在する場合、ドロップダウンで選択されたドロップダウンリストの右側に表示される別のリストで表示できます。このリンクを参照できます.. このアイデアはあなたのページを良く見せます。

http://foundation.zurb.com/page-templates4/grid.html

于 2013-06-14T10:34:48.103 に答える