jQuery插件支持同一页面被多次调用 - Web前端
作者:98wpeu发布时间:2026-08-18分类:网页前端技术浏览:1
更新 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插件支持同一页面被多次调用的全部叙述,希望对大家有所帮助。
- 上一篇:jQuery实现伪分页的方法分享 - Web前端
- 下一篇:已经是最后一篇了
相关推荐
- jQuery实现的文字hover颜色渐变效果实例 - Web前端
- jQuery实现伪分页的方法分享 - Web前端
- 基于jquery实现下拉框美化特效 - Web前端
- jQuery AjaxUpload 上传图片代码 - Web前端
- jquery采用oop模式class类的使用示例 - Web前端
- jquery拖拽效果完整实例(附demo源码下载) - Web前端
- 基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听) - Web前端
- jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码) - Web前端
- jQuery中hover与mouseover和mouseout的区别分析 - Web前端
- jQuery移动web开发之页面跳转和加载外部页面的实现 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 4【第六章】Foundation之按钮和下拉功能 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 9在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件:Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP:Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性


