jquery 简单图片导航插件jquery.imgNav.js


Posted in Javascript onMarch 17, 2010

熟悉jquery的家伙大概花个5到10分钟就可以搞定了吧。由于这种导 航效果比较通用,LEVIN顺手写了个 jquery插件~

如果你的网站也需要类似的效果,大可拿去直接用或者扩展下:)

如果你也想尝试将某些可重用功能封 装成jquery插件,别忘了看看一般的jquery插件开发过程,另外还有偶的一个jquery插件模板。

;(function($) { 
// Private functions. 
var p = {}; 
p.showC = function(opts) { 
///<summary>show content of a specified navigation</summary> 
p._clist.hide().filter(opts.filter).show(); 
}; //showNav 
p.onNav = function(evt) { 
p._i=$(this); 
p._alist.removeClass(p._opts.on); 
p._i.addClass(p._opts.on); 
p.showC({ filter:p._i.attr("href") }); 
return false; 
}; //onClick 
//main plugin body 
$.fn.imgNav = function(options) { 
// Set the options. 
options = $.extend({}, $.fn.imgNav.defaults, options); 
p._opts = options; 
// Go through the matched elements and return the jQuery object. 
return this.each(function() { 
p._alist = $("a", this); 
p._clist = $(p._opts.navc); 
p._alist.click(p.onNav); 
}); 
}; 
// Public defaults. 
$.fn.imgNav.defaults = { 
on: 'on', 
off: 'off', 
navc: '.navc'//nav content selector 
}; 
})(jQuery);
Javascript 相关文章推荐
js遍历、动态的添加数据的小例子
Jun 22 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
微信小程序删除处理详解
Aug 16 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
vant中的toast轻提示实现代码
Nov 04 Javascript
Array.prototype.slice.apply的使用方法
Mar 17 #Javascript
javascript 打开页面window.location和window.open的区别
Mar 17 #Javascript
input 输入框内的输入事件详细分析
Mar 17 #Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 #Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 #Javascript
javascript+iframe 实现无刷新载入整页的代码
Mar 17 #Javascript
js select常用操作控制代码
Mar 16 #Javascript
You might like
PHP 金额数字转换成英文
2010/05/06 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
PHP简单遍历对象示例
2016/09/28 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
python中cPickle用法例子分享
2014/01/03 Python
Python编程中的反模式实例分析
2014/12/08 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python之变量类型和if判断方式
2020/05/05 Python
python文件及目录操作代码汇总
2020/07/08 Python
python实现KNN近邻算法
2020/12/30 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
实习协议书
2015/01/27 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书