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 相关文章推荐
比Jquery的document.ready更快的方法
Apr 28 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
javascript打印输出json实例
Nov 11 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
Javascript中的async awai的用法
May 17 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
vue配置多页面的实现方法
May 22 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
vue实现打印功能的两种方法
Sep 07 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
非常不错的MySQL优化的8条经验
2008/03/24 PHP
PHP实时显示输出
2008/10/02 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
jQuery拖拽 & 弹出层 介绍与示例
2013/12/27 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
Python PyQt5标准对话框用法示例
2017/08/23 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
学校2014重阳节活动策划方案
2014/09/16 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android