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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
vue实现菜单切换功能
May 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中的HashTable结构详解
2013/06/13 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
jQuery中:first选择器用法实例
2014/12/30 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
JavaScript字符串对象
2017/01/14 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
介绍Python的@property装饰器的用法
2015/04/28 Python
Python中正则表达式详解
2017/05/17 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
Python子类继承父类构造函数详解
2019/02/19 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
护理专业毕业生自我鉴定
2013/10/08 职场文书
个人委托书怎么写
2014/09/17 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang