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链式操作的正确使用方法
Jan 06 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 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/05 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
iview table高度动态设置方法
2018/03/14 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
深入理解Python中的*重复运算符
2017/10/28 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python爬虫超时的处理的实例
2018/12/19 Python
python实现彩色图转换成灰度图
2019/01/15 Python
在django中,关于session的通用设置方法
2019/08/06 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
Python列表切片常用操作实例解析
2019/12/16 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
英国大码女性时装零售商:Evans
2018/08/29 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
优秀学生干部事迹材料
2014/12/24 职场文书
地道战观后感500字
2015/06/04 职场文书
辩论会主持词
2015/07/03 职场文书
事业单位岗位说明书
2015/10/08 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis