JQuery menu plugin extends to automatically support RTL with default settings
This is a follow-up to my previous question here . I created almost a plugin to automatically detect the page direction and set the default options to make the menu plugin work RTL and change the submenu icon to work RTL too. I created this jsfiddle here .
In my question, the code I used to detect will be executed on every menu call, since I have about 20 menus on some pages, it will take a long time, it can be done / checked once on page load. Can this code be optimized as a plugin at all.
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({
});
0
source to share
1 answer
I came up with a code for jquery menus and menubar better if someone makes it an 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();
}
});
0
source to share