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实现UTF8编码转换成gb2312编码
Dec 22 Javascript
JavaScript Cookie 直接浏览网站分网址
Dec 08 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 Javascript
angular异步验证器防抖实例详解
Mar 31 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 SPL使用方法和他的威力
2013/11/12 PHP
PHP curl使用实例
2015/07/02 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
Python中使用动态变量名的方法
2014/05/06 Python
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
python中列表和元组的区别
2017/12/18 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
pycharm配置git(图文教程)
2019/08/16 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
appium+python adb常用命令分享
2020/03/06 Python
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
初一体育教学反思
2014/01/29 职场文书
铁路个人事迹材料
2014/01/30 职场文书
财产公证书格式
2014/04/10 职场文书
创业融资计划书
2014/04/25 职场文书
学校节能减排倡议书
2014/05/16 职场文书
企业年检委托书范本
2014/10/14 职场文书
社区活动总结范文
2015/05/07 职场文书
情感电台广播稿
2015/08/18 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android