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 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
JS中操作JSON总结
2020/12/06 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
Vue渲染函数详解
2017/09/15 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
Python判断某个用户对某个文件的权限
2016/10/13 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
django实现用户登陆功能详解
2017/12/11 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
python列表list保留顺序去重的实例
2018/12/14 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
秸秆管理实施方案
2014/03/15 职场文书
室内设计专业自荐信
2014/05/31 职场文书
推广活动策划方案
2014/08/23 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
圣诞节开幕词
2015/01/29 职场文书
环卫处个人工作总结
2015/03/04 职场文书
办公室岗位职责范本
2015/04/11 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL