jQuery自定义插件规范


<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自定义插件规范的更多相关文章
- fullpage的使用以及less, Sass的属性和JQuery自定义插件的声明和使用
使用fullpage的步骤 1 导入JQuery.js fullpage,js fullpage.css 2 组建网页布局,最外层id="fullpage" 单页class=& ...
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- jquery自定义插件——以 选项卡插件为例
一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...
- jQuery自定义插件
jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件, ( ...
- 你的专属定制——JQuery自定义插件
前 言 絮叨絮叨 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗 ...
- jQuery自定义插件--banner图滚动
前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...
- JQuery自定义插件详解之Banner图滚动插件
前 言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
- 代码:jquery自定义插件 demo
jquery自定义插件 demo 2016-1-13 只是一个简易的示例 <script type="text/javascript" src="http://cd ...
- jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
上一篇记录了BaiduTemplate模板引擎使用示例附源码,在此基础上对使用方法进行了封装 自定义插件jajaxrefresh.js 代码如下: //闭包限定命名空间 (function ($) { ...
随机推荐
- 网络载入数据和解析JSON格式数据案例之空气质量监測应用
一.创建一个新的项目 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res ...
- C++函数指针相关 & 类成员的指针 & 成员函数的指针
有时候会有指向类成员变量或者成员函数的指针,但是注意,这个指针并不是针对一个地址的指向,而更多的是一个偏移. 同时,支持将父类对象的成员 转为 子类对象的成员指针,如下: 反过来,是不行的.因为父类的 ...
- 给一个执行在windows 7和NAT下的VMWARE虚拟机分配固定IP
虚拟机上装了个oracleserver,每次vmware重新启动或者resume时总要分配新的IP地址,这样就得改动windows下的client配置,所以须要想办法把IP地址固定住. DHCP服务在 ...
- android 2048游戏实现
android 的2048小游戏完整实现:GridLayout布局(android 4.0及以上). 曾经做过一个2048的算法题,学了几天android,认为能够实现个安卓版的.也就动手写了个. 包 ...
- Ubuntu常见报错及解决方式汇总
作者:郭孝星 微博:郭孝星的新浪微博 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells Github:https://github.co ...
- 在Linux终端使用W3M浏览器下载文件
在Linux终端使用W3M浏览器下载文件 W3M 是3个基于Linux系统命令行的WEB网站浏览工具(w3m/Links/Lynx) 对于需要验证cookie 和来源的页面,比如163的超大附件,直接 ...
- 分享一个vue中的vue-Resource用法
//引入 <script src="//cdn.bootcss.com/vue-resource/1.2.1/vue-resource.js" type="text ...
- Network Stack : Disk Cache
Disk Cache 目录 1 Overview 2 External Interface 3 Disk Structure 3.1 Cache Address 3.2 Index File Stru ...
- LINUX上使用GDB单步调试Chromium Android C++代码。
###动机###在LINUX使用GDB单步调试Chromium Android C++代码. [1]编译android平台Chromium, 修改GN文件中编译选项:-g -O0 使得编译优化更少,便 ...
- win7系统 连接打印机 提示 “正在检查 windows update 需要一段时间”
现象: 在客户端 添加 打印机时,出现 “网络安装打印机 一直在检查 windows update” 提示 处理:等待上述提示结束后,会出现手动添加 提示窗口,在框内选择打印机驱动 .