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的常规数组和关联数组对比小结
May 24 Javascript
JavaScript中return false的用法
Mar 12 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 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初学者阅读的4本经典书籍
2016/09/23 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
简单的js表单验证函数
2013/10/28 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
JavaScript闭包相关知识解析
2019/10/19 Javascript
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
python3实现点餐系统
2019/01/24 Python
Django的CVB实例详解
2020/02/10 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
爱之链教学反思
2014/04/30 职场文书
付款承诺函范文
2015/01/21 职场文书
检讨书模板
2015/01/29 职场文书
史上最牛辞职信
2015/05/13 职场文书
安全学习心得体会范文
2016/01/18 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
英镑符号 £
2022/02/17 杂记