jQuery插件支持同一页面被多次调用
作者:bea
更新 1.2版本 删除回调函数的控制台输出调试,因为在IE6下没有控制台会造成插件出错, 完成build功能。 提示信息按钮支持多个,此版本为最新的稳定版。 近期将会提供更加详细的data书写格式说明,build时html格式说明,详细的options参数说明。补充内容类型的切换展示案例。 Introduction: jquery imageShown 插件可以完成多种形式的内容轮显切换, 所有我提供的Demo中虽然都是导航带动的轮显图片,但是它还能完成内容的切换,即可以完成
更新 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插件支持同一页面被多次调用的全部叙述,希望对大家有所帮助。
有用 | 无用
近期将会提供更加详细的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插件支持同一页面被多次调用的全部叙述,希望对大家有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 仅30行代码实现Javascript中的MVC
- 理解javascript中的with关键字
- 使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
- JavaScript模版引擎的基本实现方法浅析
- 在ASP.NET MVC项目中使用RequireJS库的用法示例
- 一道常被人轻视的web前端常见面试题(JS)
- 获取阴历(农历)和当前日期的js代码
- Nodejs爬虫进阶教程之异步并发控制
- 极易被忽视的javascript面试题七问七答
- 在JavaScript中使用JSON数据
- 三分钟带你玩转jQuery.noConflict()
- 轻松搞定jQuery.noConflict()
- JavaScript的Backbone.js框架的一些使用建议整理
- 简单了解Backbone.js的Model模型以及View视图的源码
- Backbone.js框架中简单的View视图编写学习笔记
- 10个JavaScript中易犯小错误
- 讲解JavaScript的Backbone.js框架的MVC结构设计理念
- 深入解析JavaScript框架Backbone.js中的事件机制
- Node.js 条形码识别程序构建思路详解