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语言结构小记(一)
Sep 10 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 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文件中是否含有bom的函数
2012/05/31 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
Python网络编程详解
2017/10/31 Python
Python模块WSGI使用详解
2018/02/02 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
python如何把字符串类型list转换成list
2020/02/18 Python
python2和python3哪个使用率高
2020/06/23 Python
python matplotlib库的基本使用
2020/09/23 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
《东方明珠》教学反思
2014/04/20 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
公民代理授权委托书
2014/09/24 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
委托培训协议书
2014/11/17 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
水电工程师岗位职责
2015/02/13 职场文书
孟佩杰观后感
2015/06/17 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python