<ul class="list">
<li>导航列表
<ul class="nav">
<li>导航列表1</li>
<li>导航列表1</li>
<li>导航列表1</li>
<li>导航列表1</li>
<li>导航列表1</li>
<li>导航列表1</li>
</ul>
</li>
<li>导航列表
<ul class="nav">
<li>导航列表2</li>
<li>导航列表2</li>
<li>导航列表2</li>
<li>导航列表2</li>
<li>导航列表2</li>
<li>导航列表2</li>
</ul>
</li>
</ul>

全局函数:

;(function($){
//全局
$.extend({
'nav':function(){
$('.nav').css({
'list-style':'none',
'margin':0,
'padding':0,
'display':'none'
}); $('.nav').parent().hover(function(){
$(this).find('.nav').slideDown('normal');
},function(){
$(this).find('.nav').stop().slideUp('normal');
});
}
}); //局部
$.fn.extend({
'nav':function(color){
$(this).find('.nav').css({
'list-style':'none',
'margin':0,
'padding':0,
'display':'none',
'color':color
}); $(this).find('.nav').parent().hover(function(){
$(this).find('.nav').slideDown('normal');
},function(){
$(this).find('.nav').stop().slideUp('normal');
}); return this;
}
});
})(jQuery);

执行:

$(function(){
//全局
$.nav();
//局部
$('.list').eq(1).nav('red');
});

jQuery自定义插件规范的更多相关文章

  1. fullpage的使用以及less, Sass的属性和JQuery自定义插件的声明和使用

    使用fullpage的步骤   1 导入JQuery.js fullpage,js fullpage.css 2 组建网页布局,最外层id="fullpage" 单页class=& ...

  2. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  3. jquery自定义插件——以 选项卡插件为例

    一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...

  4. jQuery自定义插件

    jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件,   ( ...

  5. 你的专属定制——JQuery自定义插件

        前  言 絮叨絮叨 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗 ...

  6. jQuery自定义插件--banner图滚动

    前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...

  7. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  8. 代码:jquery自定义插件 demo

    jquery自定义插件 demo 2016-1-13 只是一个简易的示例 <script type="text/javascript" src="http://cd ...

  9. jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)

    上一篇记录了BaiduTemplate模板引擎使用示例附源码,在此基础上对使用方法进行了封装 自定义插件jajaxrefresh.js 代码如下: //闭包限定命名空间 (function ($) { ...

随机推荐

  1. ArcGIS api for javascript——地图配置-

    描述 本例展示了如果删除缩放等级滑动器的刻度线.通过设置esriConfig里的sliderLabel为null来实现: esriConfig.defaults.map.sliderLabel = n ...

  2. POJ - 3984 - 迷宫问题 (DFS)

    迷宫问题 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10936   Accepted: 6531 Description ...

  3. Android页面事件挂接模拟

    Java没有C#的引用类型.因此事件的挂接一般都是利用接口来实现,有两种方式: 1)定义一个实现事件接口的类,然后实现接口方法,然后通过将这个类的实例加入到事件监听器里面: public class ...

  4. Unix/Linux环境下多一点不如少一点

    正如很多人所知道的$PATH环境变量里存着一张目录列表,当用户要执行某一程序时,系统就会按照列表中的内容去查找该程序的位置.当程序名前不带点斜线 . / 时$PATH就会起作用. 对于普通用户和roo ...

  5. sql 通过某段时间求得改段时间内的工作时长,排除工作日

    CREATE FUNCTION Fun_GetTotalHourBySomeTime(@TaskId NVARCHAR(30),@Bu_trupstartDate NVARCHAR(50),@Bu_t ...

  6. DOM操作系列-01

    ]常见事件: //onclick     点击时触发事件. //ondblclick    双击时触发事件. //onkeydown   按键按下 //onkeypress   点击按键 //onke ...

  7. display 表格模型值

    display:inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符.display:inline-table 可以使文字和表格在同一行显示 d ...

  8. linux下chm阅读器

    推荐使用Okular这个软件,Okular是一个pdf阅读器,但是对chm文件支持很好.

  9. debian8平滑升级到debian9

    本文在Creative Commons许可证下发布. 首先,在升级时可以查看一下自己的版本号: uname -a ##查看内核信息 cat /etc/issue ##查看发行版本号   方法1:利用网 ...

  10. 紫书 例题 9-6 UVa 11400 (线性结构上的动态规划)

    这道题的下标从1开始比较方便,一方面前缀和算的方便一些,一方面涉及到前j 个灯泡,那么如果从0开始,前3个灯泡就是第0, 1, 2, 3个,非常奇怪. 所以灵活换下标. 然后这道题的动规有点暴力枚举的 ...