jQuery菜单插件扩展为具有默认选项的RTL自动支持 [英] JQuery menu plugin extend for RTL auto support with default options

问题描述

这是我上一个问题的后续操作，此处.我已经创建了几乎一个插件来自动检测页面方向，并设置默认选项以强制菜单插件运行RTL并更改子菜单图标以也可以运行RTL.我在这里 jsfiddle中创建了.

This is a follow up on my previous question here. I have created almost a plugin to automatically detect the page direction and set default options to force the menu plugin to work RTL and change the sub menus icon to work also RTL. I created this jsfiddle here.

我的问题是，我检测到的代码将在每个菜单调用上执行，就像我在大约20个菜单的某些页面上所执行的那样，这会占用很多时间，是否可以在页面加载时完成/检查一次.通常可以将此代码作为插件进行优化.

My question the code I used to detect will be executed on every menu call as I have on some pages about 20 menus, will this consume a lot of time, can this be done/checked once on page load. Can this code in general be optimized as a plugin.

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

推荐答案

我想出了一些jquery菜单和菜单栏的代码，如果有人将其作为官方插件的话，会更好.

I came up with some code for jquery menus and menubar better if some one make it official plugin.

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自动支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！