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 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
jquery中常用的SET和GET
Jan 13 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
JS表的模拟方法
Feb 05 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 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变量的方法
2015/06/26 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
用Python解数独的方法示例
2019/10/24 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
高级销售员求职信
2013/10/25 职场文书
电气自动化求职信
2014/06/24 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js