Question

我开始使用Jquery UI。我特别喜欢cupertino主题，我需要建立一个水平菜单。

我遇到的第一个问题是，似乎菜单栏不是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 +菜单栏时是否存在概念错误？ Live example

Answer 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");

我用以下主题对此进行了测试：

库珀蒂诺
轻拂
le frog
平滑
启动
晴天
时髦的钱包

它适用于所有人。我使用IE10（和兼容模式）和Chrome 30.0.1599.101进行了测试。

Answer 2

我找到了解决方案。白色来自jquery-ui-1.10.3.custom.css（cupertino主题）的以下第862至867行

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

现在，在menu() .ui-state-active内，a分配给顶层菜单li内的menubar()元素，li分配了活动状态 DIRECTLY 到a元素，导致每个 jquery.ui.menubar.js元素都有白色文字。（在cupertino中，这使文本和可读！）

所以，为了解决这个问题，我们可以更改// 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" );中添加和删除上述类的两行：

{{1}}

我尝试更新小提琴加载我的 google drive 中的js，但是jsfiddle没有加载它。

JqueryUI菜单栏以cupertino主题显示白色文本

2 个答案: