JQuery菜单图标RTL [英] JQuery Menu Icon RTL

问题描述

我正在尝试在阿拉伯语RTL页面中使用jQuery菜单。我可以使它成为RTL，但图标应该是 ui-icon-carat-1-w 不是 ui-icon-carat-1-e 。我在这里创建了 jsfiddle 。如何更改子菜单中箭头的方向，因此它们显示 carat-1-w 而不是 carat-1-e ？

I am trying to use jQuery menu in an Arabic RTL page. I am able to make it RTL but the icon should be ui-icon-carat-1-w not ui-icon-carat-1-e. I created jsfiddle here. How do I change the direction of the arrows in sub menus, so they show the carat-1-w instead of the carat-1-e?

此外，是否有任何CSS重置用于RTL支持jQuery以启用jQuery RTL和阿拉伯语。

Also, is there any CSS reset for RTL support for jQuery to make jQuery RTL and Arabic enabled.

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

推荐答案

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/

这篇关于JQuery菜单图标RTL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！