jQuery插件支持同一页面被多次调用


Posted in Javascript onFebruary 14, 2016

更新 1.2版本 删除回调函数的控制台输出调试,因为在IE6下没有控制台会造成插件出错, 完成build功能。 提示信息按钮支持多个,此版本为最新的稳定版。

近期将会提供更加详细的data书写格式说明,build时html格式说明,详细的options参数说明。补充内容类型的切换展示案例。

Introduction:

jquery imageShown 插件可以完成多种形式的内容轮显切换, 所有我提供的Demo中虽然都是导航带动的轮显图片,但是它还能完成内容的切换,即可以完成Tab功能,单纯的图片轮显功能,新闻信息的轮显。 也就是说这个插件在使用合理参数的配合下可以显示任何形式的内容。

此插件可以在上下左右四个方向上显示导航,背景滑动动画可以独立设置,播放区域动画可以独立设置,每次进入显示区域导航数量可以独立设置,如果设置错误或者设置不合理会被插件内部重置。提示信息是否显示,以及显示动画可以独立设置。具体请参考Demo相关内容。

注:在使用Tab功能时需要设置 pContent为 content 并且由于由于显示区域已经被固定大小,所以针对未知大小的内容请在callback函数中处理。

插件内部已经对请求的资源是否存在做了判断,例如出现错误你可以直接显示参数中你提供默认显示信息,同时你也可以在callback函数中对这个错误区域进行处理。callback函数你可以接收回传的参数。

回传参数的说明:

id //当前Dom的ID,在你页面未设置ID的情况下这个ID会是插件自动生成的唯一值。 
total //轮显内容的数量 
/* 
当前选择的第一个内容区域,当你loop设置为false时此内容就是页面Dom中的index值,当loop为true时导航区域需要根据 attr('data-index')来获取当前的index。player区域不受loop限制,永远为当前内容的index值 
*/ 
selected 
curNav//当前导航,可以通过 attr('data-missing')来确认内容是否正常加载。 
curPlay//当前显示的主要内容,可以通过 attr('data-missing')来确认内容是否正常加载。 
curData//你传入数据data的当前值。

下一步开发计划:

当你不愿意或者不会使用data参数时,你可以讲需要显示的内容按照固定格式写入html页面,然后使用 build命令由插件自行完成余下内容

例如:

$('elem').imageShown('bulid'); 
$('elem').imageShown('bulid',{'options'}); 
$('elem').imageShown('bulid','option','value');

提供外部暂停和重启自动播放的接口,方便你能够在回调函数中进行使用。 提供更多的说明和示例。

默认参数:

id: null,
navSpace: 47,
pWidth: 0 ,
pHeight:0 ,
navNum: 4,
navPlace: null,
autoPlay: true,
autoTime: 4000,
events: 'mouseenter',
tbgAnimate: true,
tbgSpeed: 'fast',
addtional:false,
step: 1,
scrollSpeed:'fast',
opacity:0.6,
data: null,
loop: true,
player: true,
animate: 'fade',//left,right,top,bottom,fade,none
//deepNav: false,
showTips: true,
tipsAnimate: 'fade',//fade,slide
selected: 1,
callback: null,
preload: true,
target: '_blank',
pSpeed:500,
pType: false,
tContent:'image',//num,none,image,content
listPlace:null,
tipsBtn:false,
loadClass: 'img-player-loading',
pContent:'image'

使用方法:

$('elem').imageShown({'options'});

setter:

$('elem').imageShown('option',{'options'}); 
$('elem').imageShown('option','option','value');

getter

var option = $('elem').imageShown('option','option name');

在build功能完成之后将提供更加相信的参数以及配置的说明。

同时buid将会以扩展的形式发布,即需要使用build功能时,需要引入另外的文件。这样做的目的是为了解决文件大小问题。

插件经过非常多的暴虐暂时没发现问题,性能上已经处理的很好,经过测试暂时未发现内存泄露问题。测试平台:ie6,firefox3.6, windows2003

以上所述是小编给大家介绍的jQuery插件支持同一页面被多次调用的全部叙述,希望对大家有所帮助。

Javascript 相关文章推荐
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
js单线程的本质 Event Loop解析
Oct 29 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 #Javascript
JavaScript中关联原型链属性特性
Feb 13 #Javascript
JavaScript操作class和style样式代码详解
Feb 13 #Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 #Javascript
JavaScript常用数组算法小结
Feb 13 #Javascript
Javascript 字符串模板的简单实现
Feb 13 #Javascript
javascript基础知识分享之类与函数化
Feb 13 #Javascript
You might like
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
学习php分页代码实例
2013/10/24 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
python实现绘制树枝简单示例
2014/07/24 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
自我检讨书范文
2015/01/28 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
协议书格式模板
2016/03/24 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers