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 相关文章推荐
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
js单词形式的运算符
May 06 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
Vue加载json文件的方法简单示例
Jan 28 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
解读Django框架中的低层次缓存API
2015/07/24 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python WEB应用部署的实现方法
2019/01/02 Python
python制作填词游戏步骤详解
2019/05/05 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
详解python的变量缓存机制
2021/01/24 Python
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
面料业务员岗位职责
2013/12/26 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
调研汇报材料范文
2014/08/17 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
保洁员岗位职责
2015/02/04 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
Python&Matlab实现樱花的绘制
2022/04/07 Python
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js