JqueryUI菜單欄顯示cupertino主題中的白色文本

我開始使用Jquery UI。我特別喜歡cupertino主題，我需要建立一個水平菜單。JqueryUI菜單欄顯示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>

它似乎不是100％兼容JqueryUI的其餘部分，因爲子菜單在非常淺的背景上有白色文本。

問題：我是否手動修改了li元素的樣式（除了我沒有成功）或者在使用JqueryUI +菜單欄時是否存在概念錯誤？ Live example

來源

2013-11-09 Michele

我找到了解決辦法。白顏色來自下面的行862至867，的jquery-ui-1.10.3.custom.css（Cupertino的主題）

.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() THI活性狀態分配直接到li元素導致每a元素有白色文本。（在此庫珀蒂諾使文字和可讀性！）

因此，要解決這個問題，我們可以改變jquery.ui.menubar.js兩行，其中上面的類添加和刪除：

// 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 drive中加載js，但jsfiddle不加載它。

來源

2013-11-09 16:54:02 Michele

變化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");

我用下面的主題測試此錢包

這一切運作良好。我使用IE10（兼容模式）和Chrome 30.0.1599.101測試了它。

來源

2013-11-12 15:41:05 user2983814

JqueryUI菜單欄顯示cupertino主題中的白色文本

回答

相關問題