2014-12-07 3 views
3

아랍어 RTL 페이지에서 jQuery 메뉴를 사용하려고합니다. RTL로 만들 수 있지만 아이콘은 ui-icon-carat-1-w이 아니고 ui-icon-carat-1-e이되어야합니다. 나는 jsfiddle here을 만들었습니다. 하위 메뉴에서 화살표의 방향을 변경하면 the carat-1-e 대신 carat-1-w이 표시됩니다.JQuery 메뉴 아이콘 RTL

jQuery RTL 및 아랍어를 사용할 수 있도록 RTL 지원을 위해 CSS를 다시 설정 했습니까?

body { 
    text-align: right; 
} 

*{ 
    direction: rtl 
} 

a, a:link, a:visited{ 
    font-size: 16px; 
    font-family: Arial,Verdana,Tahoma,Times,Sans-Serif; 
    text-decoration: none; 
    font-weight: normal; 
} 

.ui-menu { 
    float: right; 
} 

.ui-menu .ui-menu-icon { 
    right: auto; 
    left: 0; 
} 
<ul id="menu" style="width: 200px;"> 
    <li><a href="#">العربية</a> 
     <ul id="submenu"> 
      <li><a href="#">حسابات</a></li> 
      <li>ادارة</li>  
      <li>رصيد</li> 
     </ul> 
    </li> 
    <li><a href="#">تسجيل</a></li>  
<li><a href="#">اتصال</a></li> 
</ul>  


$(document).ready(function() { 
    $('#menu').menu(); 
}); 

답변

2

jsFiddle

$('#menu').menu({ 
    icons: { submenu: "ui-icon-carat-1-w" }, 
    position: { my: "right top", at: "left-5 top-2"} 
}); 

CSS :

.ui-menu .ui-menu-icon { 
    float:left; 
} 

도 참조 : http://api.jqueryui.com/menu/#option-iconshttp://api.jqueryui.com/position/

+0

Perfect !. JS가없는 CSS에서만이 작업을 수행 할 수 있습니까? 원한다면 다른 질문이 될 수도 있습니다. http://jsfiddle.net/daliaessam/p3Lsk2cm/1/ 여기에서 새로운 피들 (fiddle)을 만들었습니다. – daliaessam

+0

@daliaessam "w"(서쪽) 중 하나와 일치하도록 아이콘 배경 위치를 설정할 수 있지만 UI를 사용하여 수행해야하는 래깅 위치는 다음과 같습니다. http://jsfiddle.net/RokoCB/p3Lsk2cm/ 4 /. 사실 나는 CSS를 너무 많이 사용하지 않고 메서드 객체에서이 모든 작업을 수행합니다. 그것이 바로 플러그인의 이유입니까? –

+0

좋습니다, 당신이 CSS를 통해 제안한대로 jquery 솔루션과 함께 갈 것입니다. 나는이 주제에 새로운 이슈를 가지고 있으며, 어쨌든 여기에 새로운 질문을 만들었다. http://stackoverflow.com/questions/27359663/jquery-menu-plugin-extend-for-rtl-auto-support-with-default-options – daliaessam