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 相关文章推荐
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
js实现随机点名器精简版
Jun 29 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
js 小贴士一星期合集
2010/04/07 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
python django 实现验证码的功能实例代码
2017/05/18 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
Python打印不合法的文件名
2020/07/31 Python
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
教师队伍管理制度
2014/01/14 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
成绩单公证书
2014/04/10 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
工程催款通知书
2015/04/17 职场文书
用电申请报告范文
2015/05/18 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS