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 appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
JavaScript日历实现代码
Sep 12 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 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
延长phpmyadmin登录时间的方法
2011/02/06 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
Python中的tuple元组详细介绍
2015/02/02 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
python select.select模块通信全过程解析
2017/09/20 Python
python多进程实现文件下载传输功能
2018/07/28 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
基于python中__add__函数的用法
2019/11/25 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
临床医师专业个人自我评价范文
2013/11/07 职场文书
大学新生军训方案
2014/05/03 职场文书
服务口号大全
2014/06/11 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
Python pandas求方差和标准差的方法实例
2021/08/04 Python
python中pymysql包操作数据库方法
2022/04/19 Python