JqueryUI menubar가 쿠퍼 티노 테마에 흰색 텍스트를 표시합니다.

Question

Jquery UI를 사용하기 시작했습니다. 나는 특히 cupertino 테마를 좋아하고 가로형 메뉴를 만들어야합니다.

첫 번째 문제는 menubar가 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 + menubar를 사용하는 데 개념적으로 잘못된 것이 있습니까? Live example

Answer 1

해결책을 찾았습니다. 화이트 색상은 다음과 같은 라인에서 867-862, jquery-ui-1.10.3.custom.css의 (쿠퍼 티노 테마)

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

온다 지금 menu()에 .ui-state-active는 menubar() 생 활성에, 상단 메뉴의 li 내부의 a 요소에 할당되는 동안 상태는 DIRECTLY에서 li 요소로 지정되어 a 요소는 모두 흰색 텍스트가됩니다.

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

I 업데이트하려고 :이 문제를 해결하기 위해 우리는 위의 클래스 추가 및 제거 jquery.ui.menubar.js에있는 두 개의 라인을 변경할 수 있습니다, 그래서

을 (그리고 쿠퍼 티노에이! 텍스트를 읽을합니다) 내 google drive에서 jsfiddle을로드하는 바이올린은 jsfiddle을로드하지 않습니다.

Answer 2

jquery.ui.menubar.js에서 다음 코드를 변경하십시오. CSS를 변경할 필요가 없습니다.

1. 쿠퍼 티노
2. 영화
3. 르 개구리
4. 부드러움
5. 시작
6. 화창한
7. 멋진 :

   // 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을 사용하여 테스트했습니다.