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 SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
基于JavaScript实现轮播图效果
Jan 02 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学习笔记 数组遍历实现代码
2011/06/09 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
python3处理含有中文的url方法
2018/05/10 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
中秋节主持词
2014/04/02 职场文书
付款委托书范本
2014/04/04 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
爱护草坪标语
2014/06/24 职场文书
生物工程专业求职信
2014/09/03 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技