Question

这是对我上一个问题here的跟进。我创建了几乎一个插件来自动检测页面方向并设置默认选项以强制菜单插件工作RTL并更改子菜单图标也可以工作RTL。我创建了这个jsfiddle here。

我的问题我以前检测的代码将在每个菜单调用上执行，因为我在一些页面上大约有20个菜单，这会花费很多时间，可以在页面加载时完成/检查一次。这个代码一般可以作为插件进行优化。

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 {
  float:left;  
}
<ul id="menu" style="width: 200px;">
    <li><a href="#">العربية</a>
        <ul id="submenu">
            <li><a href="#">حسابات</a>
                <ul id="subsubmenu">
                    <li><a href="#">حسابات</a></li>
                    <li><a href="#">ادارة</a></li>    
                    <li><a href="#">رصيد</a></li>
                </ul> 

            </li>
            <li><a href="#">ادارة</a></li>    
                <li><a href="#">رصيد</a></li>
        </ul> 
    </li>
    <li><a href="#">تسجيل</a></li>    
<li><a href="#">اتصال</a></li>
</ul>    

(function($){
    var menu_orig = $.fn.menu;
    // ...before overwriting the jQuery extension point
    $.fn.menu = function(options) { 
        var isRTL = isRTL || (($("body").css("direction").toLowerCase() == "rtl")? 1 : 0);
        if (isRTL) {
            if (typeof options === "object") {
                options = $.extend(true, options, {
                    icons: {submenu: "ui-icon-circle-triangle-w"},
                    position: {my: "right top", at: "left top"}
                });
            }
        }

        var args = Array.prototype.slice.call(arguments, 0);
        var ret = menu_orig.apply(this, args);
        return ret;
    };
    //----------------------------------------
})(jQuery);

$('#menu').menu({
});

Answer 1

我提出了一些jquery菜单和菜单栏的代码，如果有人制作官方插件的话会更好。

function supportRTL() {
    //----------------------------------------
    // menu plugin to auto detect RTL and set menus for RTL
    // http://api.jquery.com/Types/#Context.2C_Call_and_Apply
    //----------------------------------------
    var menu_orig = $.fn.menu;
    $.fn.menu = function(options) { 
        if (typeof options === "object") {
            options = $.extend(true, {
                icons: {submenu: "ui-icon-carat-1-w"},
                position: {my: "right top", at: "left top"}
            }, options);
        }
        var args = Array.prototype.slice.call(arguments, 0);
        var ret = menu_orig.apply(this, args);
        return ret;
    };
    //----------------------------------------
    // menubar plugin to auto detect RTL and set menus for RTL
    var menubar_orig = $.fn.menubar;
    $.fn.menubar = function(options) {  
        if (typeof options === "object") {
            options = $.extend(true, {
                position: {my: "right top", at: "right bottom"} // RTL support
            }, options);
        }
        var args = Array.prototype.slice.call(arguments, 0);
        var ret = menubar_orig.apply(this, args);
        return ret;
    };
}


$(document).ready(function () {
    var is_rtl = ($("body").css("direction").toLowerCase() == "rtl")? 1 : 0;
    $.fn.isRTL = function() {return is_rtl;}
    if ($.fn.isRTL()){
        supportRTL();
    }
});

JQuery菜单插件扩展了RTL自动支持和默认选项

1 个答案: