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 相关文章推荐
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
jquery对表单操作2
Apr 06 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
ES6学习教程之块级作用域详解
Oct 09 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
JS实现简单的九宫格抽奖
Jun 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
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
javascript常用的方法整理
2015/08/20 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
小程序实现列表展开收起效果
2020/07/29 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
Python制作exe文件简单流程
2019/01/24 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
师范生自荐信
2013/10/27 职场文书
口腔医学技术应届生求职信
2013/11/09 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书