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 相关文章推荐
javascript错误的认识不用关心内存管理
Dec 15 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
Node.js API详解之 readline模块用法详解
May 22 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/04/28 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
浅析PHP绘图技术
2013/07/03 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP导入导出Excel代码
2015/07/07 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
Python 高效编程技巧分享
2020/09/10 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
什么时候用assert
2015/05/08 面试题
2014年应届大学生自我评价
2014/01/09 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书