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 相关文章推荐
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
vue实现日历备忘录功能
Sep 24 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
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中错误处理操作实例分析
2019/08/23 PHP
载入进度条 效果
2006/07/08 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
.net软件工程师面试题
2015/03/31 面试题
资产经营总监岗位职责范文
2013/12/01 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
终止劳动合同协议书
2014/04/14 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
数学教师个人总结
2015/02/06 职场文书
总经理司机岗位职责
2015/04/10 职场文书
入队仪式主持词
2015/07/04 职场文书
三八节活动主持词
2015/07/04 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python