1

Jquery UI を使い始めました。私は特にクパチーノ テーマが好きで、水平メニューを作成する必要があります。

私が直面した最初の問題は、メニューバーが JqueryUI の一部ではない (削除されたか、開発中か?) ように見えることですjquery-ui.js。

 <link rel="stylesheet" href="jquery-ui-1.10.3.custom\css\cupertino\jquery-ui-1.10.3.custom.min.css" />
  <link rel="stylesheet" href="css\jquery.ui.menubar.css" />

  <script src="jquery-ui-1.10.3.custom\js\jquery-1.9.1.js"></script>
  <script src="jquery-ui-1.10.3.custom\js\jquery-ui-1.10.3.custom.min.js"></script>
  <script src="\js\jquery.ui.menubar.js"></script>

サブメニューには非常に明るい背景に白いテキストがあるため、JqueryUI の残りの部分とは 100% 互換性がないようです。

質問:li要素のスタイルを手動で変更する必要がありますか(失敗したことに加えて)、JqueryUI+メニューバーの使用に概念的に問題がありますか? 実際の例

4

2 に答える 2

1

jquery.ui.menubar.js の次のコードを変更します。css を変更する必要はありません。

// line 386, from
.closest(this.options.items).removeClass("ui-state-active");
// to
.closest(this.options.items).removeClass("ui-widget-header");

// line 408, from
menuItem.addClass( "ui-state-active" );
// to
menuItem.addClass("ui-widget-header");
this.menuItems.children().addClass("ui-widget-header");

これを次のテーマでテストしました。

  1. クパチーノ
  2. フリック
  3. ル・フロッグ
  4. 滑らかさ
  5. 始める
  6. 晴れ
  7. しゃれた財布

それはすべてうまくいきました。IE10 (および互換モード) と Chrome 30.0.1599.101 を使用してテストしました。

于 2013-11-12T15:41:05.233 に答える
0

解決策を見つけました。jquery-ui-1.10.3.custom.css白い色は、 (クパチーノのテーマ)の 862 から 867 の次の行に由来します。

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #ffffff;
    text-decoration: none;
}

がトップメニュー内の要素に割り当てられている間、menu()このアクティブな状態では要素に直接割り当てられ、すべての要素に白いテキストが表示されます。（そしてクパチーノでは、これによりテキストが読みやすくなります!!）.ui-state-activealimenubar()li a

したがって、これを修正するにjquery.ui.menubar.jsは、上記のクラスを追加および削除する 2 行を変更します。

// line 408, from
menuItem.addClass( "ui-state-active" );
// to
menuItem.children(":first").addClass( "ui-state-active" );

// line 386, from
.closest( this.options.items ).removeClass( "ui-state-active" );
// to
.closest( this.options.items ).children(":first").removeClass( "ui-state-active" );

Googleドライブにjsをロードするフィドルを更新しようとしましたが、jsfiddleはそれをロードしません。

于 2013-11-09T16:54:02.550 に答える