用jQuery扩展自写的 UI导航

2016-02-19 14:20 2 1 收藏

今天图老师小编给大家介绍下用jQuery扩展自写的 UI导航,平时喜欢用jQuery扩展自写的 UI导航的朋友赶紧收藏起来吧!记得点赞哦~

【 tulaoshi.com - Web开发 】

代码如下:
(function($){
$.navs=function(){
return $('#top_menu_bar li').each(function(){
$(this).hover(
function(){
$(this).find('ul:eq(0)').show();
},
function(){
$(this).find('ul:eq(0)').hide();
}
);
});
};
})(jQuery);

上面是直接定义属性。下面是种常见的方法:
代码如下:
jQuery.extend({
navs:function(){
return $('#top_menu_bar li').each(function(){
$(this).hover(
function(){
$(this).find('ul:eq(0)').show();
},
function(){
$(this).find('ul:eq(0)').hide();
}
);
});
}
});

调用测试下:
$.navs();
两年前的野心今天终于实现了(噢,这是导航,不是页签(tabs)),小有成就感一把!

来源:https://www.tulaoshi.com/n/20160219/1606770.html

延伸阅读
标签: Web开发
例如:有一个employee对象, 代码如下: function employee(){ this.e_id = 0; this.e_name = ""; } 现在需要为它动态的新增"age"属性和"toString()"方法, 代码如下: var empObj = new employee(); empObj["age"] = 20; empObj["toString"] = function() { return this.e_id.toString() + this.e_name; }; 一行简...
标签: Web开发
基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果: 手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow) 第一部分:鼠标交互 1.1 Draggables:拖拽 所需文件: ...
标签: Web开发
Draggable 库文件:ui/ui.core.js、ui/ui.draggable.js ============================================================ Default: $(”#draggable”).draggable(); ============================================================ constrain-movement(限制范围移动): $(”#draggable”).draggable({ axis: ‘y' }); //限制y轴 $(”#dr...
标签: Web开发
代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / titleJQuery 浮动...
标签: Web开发
解决思路:修改样式表里z-index的值 解决办法: 代码如下: beforeShow: function (i,e) { var z = jQuery(i).closest(".ui-dialog").css("z-index") + 4; e.dpDiv.css('z-index', z); }

经验教程

706

收藏

18
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部