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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
JS监听滚动和id自动定位滚动
Dec 18 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的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
php经典趣味算法实例代码
2020/01/21 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python中星号变量的几种特殊用法
2016/09/07 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
用友笔试题目
2016/10/25 面试题
什么是继承
2013/12/07 面试题
采购文员岗位职责
2013/11/20 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
2015年班组工作总结
2015/04/20 职场文书
婚宴领导致辞
2015/07/28 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript