JQuery菜單圖標RTL

我想在阿拉伯語RTL頁面中使用jQuery菜單。我能夠使其RTL，但圖標應該是ui-icon-carat-1-w而不是ui-icon-carat-1-e。我創建了jsfiddle here。如何更改子菜單中箭頭的方向，以便它們顯示carat-1-w而不是the carat-1-e？JQuery菜單圖標RTL

此外，是否有任何CSS重置的RTL支持jQuery使jQuery RTL和阿拉伯啓用。

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(); 
});

來源

2014-12-07 daliaessam

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-icons和http://api.jqueryui.com/position/

來源

2014-12-08 00:08:27

完美！這可以通過沒有JS的CSS完成嗎？這可能是另一個問題，如果你想，我在這裏創建了一個新的小提琴http://jsfiddle.net/daliaessam/p3Lsk2cm/1/子子菜單浮動到左側，任何修復？ – daliaessam 2014-12-08 00:18:50

@daliaessam確定你可以，你可以設置圖標的背景位置以匹配「w」（西）的位置，但是你需要使用UI進行佈局：http://jsfiddle.net/RokoCB/p3Lsk2cm/ 4 /。實際上，我會在方法對象中完成所有工作，而不會過多地搞亂CSS。這就是爲什麼它是一個插件的權利？ – 2014-12-08 00:34:45

好，我會用jQuery解決方案，像你在css上所建議的那樣。我有這個問題上的一個新問題，並創造了一個新的問題，無論如何這裏http://stackoverflow.com/questions/27359663/jquery-menu-plugin-extend-for-rtl-auto-support-with-default-options – daliaessam 2014-12-08 17:50:44

JQuery菜單圖標RTL

回答

相關問題