JQuery 菜单插件使用默认选项扩展 RTL 自动支持答案

【问题标题】：JQuery menu plugin extend for RTL auto support with default optionsJQuery 菜单插件使用默认选项扩展 RTL 自动支持
【发布时间】：2014-12-08 14:01:40
【问题描述】：

这是对我之前的问题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({
});

【问题讨论】：

"can this be done/checked" ?究竟是什么？ "on every menu call" ?什么电话？您已经扩展了原始插件。上面的代码有什么问题？
我对 jquery 和 JS 一般有一点经验，代码var isRTL = isRTL || (($("body").css("direction").toLowerCase() == "rtl")? 1 : 0); 用于检查 RTL/方向，这会减慢页面速度，我还请专家重写/格式化该代码作为专业代码，因为我只是在没有经验的情况下调整了另一个代码。

标签： jquery

【解决方案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();
    }
});

【讨论】：