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 相关文章推荐
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
12306验证码破解思路分享
Mar 25 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
node.js require() 源码解读
Dec 13 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
手写实现JS中的new
Nov 07 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,ajax实现分页
2008/03/27 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
javascript闭包的理解
2015/04/01 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
json的使用小结
2016/06/08 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
python爬取音频下载的示例代码
2020/10/19 Python
python3实现飞机大战
2020/11/29 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
大学生活学习的自我评价
2013/12/03 职场文书
疾病捐款倡议书
2014/05/13 职场文书
煤矿安全生产标语
2014/06/06 职场文书
作风建设整改方案
2014/10/27 职场文书
排球赛新闻稿
2015/07/17 职场文书
重阳节简报
2015/07/20 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang