支持多次调用 jq.contentShown 升级,带最新最全的演示以及更多的说明(包含内容轮显示例)
2012-05-09 19:56
746 查看
jQuery 版本要求: 1.4 以上。
功能介绍:
它不仅仅只是一个幻灯类型的插件。 对于一些简单的新闻轮显,tab页,甚至更加复杂的多tab切换都能够很好的支持。
jquery contentShown 的前身是 jquery imageShown,新版的content shown 插件很多方法都被重写或者被合并,以提供更高的性能,
特别是在loop设置为true的状态下,性能提升较大。同时解决已发现的bug。提供了更加友好的变量名称。
同时提供多个接口供开发者外部使用,回调函数的执行逻辑更加合理,现在的回调函数执行时, 你可以通过插件提供的api来暂停正在进行的当前动画,
当回调函数执行完毕之后你需要重新启动动画的继续执行。 在这个暂停和重新开始之间,通过插件的返回值,你可以处理任意的自定义事件。
主要数据data是json格式,为了考虑不知道如何书写正确json格式的设计师,以及为了更好的SEO,插件以扩展的形式提供了build功能,
即允许你将需要展示的数据按照固定的格式写入html页面中,然后由插件为你自动构建data数据,
你可以设置this.debug=true让插件输出构建的数据。
除data参数,navNum外,其它所有参数为可选设置。你可以根据实际情况设置相关内容。
插件主页
内容轮显演示页面:点击这里
图片展示演示页面:点击这里
API,Callback参数说明 Data 以及 Build 格式说明请访问这里
开发初衷:
实际项目中有非常多不同的展示效果,新闻轮显,tab切换等,经常遇到的问题是某个插件只能提供极少功能,或者共存冲突,
于是在这种情况下催生了这个插件。
现实中插件已经解决项目中所有内容,图片的切换事件。现在将其发布出来,就让满天飞的插件世界中再多一个不幸的孩子吧!
鉴于插件开发目的以及现状,基本没有注释,只是提供了较多的使用示例。
新版插件已经把只有我看得懂的a,b,c,d之类的变量名重新改写为更贴近实际的英文组合。
插件的开发完全参照ui中datepicker的开发模式,并直接使用了其中一些方法。
版权声明:某些来源互联网的附加功能版权见文章尾部。
最新功能演示:更多,更详细的介绍,请移步至插件主页查看
用以展示热点新闻的内容轮显演示:
MTS to MP4 Mac
MTS to M4V Mac
MTS to MOV Mac
WMV to MP4 Mac
Remove DRM from Zune Marketplace
Remove Napster Music DRM
iTunes to DVD
AVI to iTunes
MP4 to DVD
M4V to DVD
Blu-ray Ripper
Blu-ray to MKV Converter
iTunes M4B Audiobook to MP3
Convert DRM AAC to MP3
remove DRM from Nokia Ovi Music Store
AVI to DVD
WMV to DVD
DVD to iTunes
DVD to MOV Mac
DVD to MP4 Mac
DVD to AVI
Rip, Convert Blu-ray disc to AVI
这个版本的插件中,增加了一个显示效果,我将其称为“金字塔导航”
注:金字塔导航功能以扩展的形式提供,整合互联网上的一个插件,基本未作修改。
这个功能的源码版权归原作者所有。
主要参数以及参数说明:
API,Callback参数说明 Data 以及 Build 格式说明请访问这里
extendPyramid 的说明:
插件原文: /article/5315783.html
原作者使用的是逆时针排序,
我经简单修改为顺时针排序以接受插件传出的参数,用来保证自动播放能够顺利进行。
已知问题,内容显示时转义html字符基本未作处理,恳请各位能够帮忙提供最佳的处理方式。
转载请注明文章出处:http://www.cnblogs.com/zhuyidong/archive/2012/05/09/2491786.html
// $(function() {
$('#newone').contentShown({
'navNum' : 5,
'step' : 4,
'nContent' : 'content',
'navPlace' : 'lr',
'navSpace' : 30,
'tbgAnimate' : false,
'autoTime' : 2000,
'player' : false
});
$('#newone').contentShown('build');
$('#pyramid').contentShown({
"navNum" : "pyramid",
"pWidth" : 998,
"pHeight": 280,
"showTips": false,
"navSpace": 85,
'animate':'left',
'events' : 'click',
'playBtn': true,
"data":[
{
"b":{"t":"http://pic002.cnblogs.com/images/2012/61318/2012050921041281.jpg","a":"Blu-ray Ripper is an powerful Blu-ray tool to rip Blu-ray DVD"},
"s":"http://pic002.cnblogs.com/images/2012/61318/2012050921035774.jpg",
"l":"http://www.gomesoft.com/blu-ray-ripper.html"
},{
"b":{"t":"http://pic002.cnblogs.com/images/2012/61318/2012050920595394.jpg","a":"The best video converter software, DVD Ripper, DVD Burner, DRM Removal, Online Video Downloader/Recorder"},
"s":"http://pic002.cnblogs.com/images/2012/61318/2012050920570793.jpg",
"l":"http://www.gomesoft.com/total-media-converter-ultimate.html"
},
{
"b":{"t":"http://pic002.cnblogs.com/images/2012/61318/2012050921032484.jpg","a":"Video Converter for Mac enables Mac users to easily convert videos, movies and TV shows from one to another format on Mac"},
"s":"http://pic002.cnblogs.com/images/2012/61318/2012050921023355.jpg",
"l":"http://www.gomesoft.com/mac-video-converter.html"
},
{
"b":"http://pic002.cnblogs.com/images/2012/61318/2012050921051061.jpg",
"s":"http://pic002.cnblogs.com/images/2012/61318/2012050921050363.jpg",
"l":""
},
{
"b":"http://pic002.cnblogs.com/images/2012/61318/2012050921061534.jpg",
"s":"http://pic002.cnblogs.com/images/2012/61318/2012050921060630.jpg",
"l":""
}
]
});
});
// ]]>
功能介绍:
它不仅仅只是一个幻灯类型的插件。 对于一些简单的新闻轮显,tab页,甚至更加复杂的多tab切换都能够很好的支持。
jquery contentShown 的前身是 jquery imageShown,新版的content shown 插件很多方法都被重写或者被合并,以提供更高的性能,
特别是在loop设置为true的状态下,性能提升较大。同时解决已发现的bug。提供了更加友好的变量名称。
同时提供多个接口供开发者外部使用,回调函数的执行逻辑更加合理,现在的回调函数执行时, 你可以通过插件提供的api来暂停正在进行的当前动画,
当回调函数执行完毕之后你需要重新启动动画的继续执行。 在这个暂停和重新开始之间,通过插件的返回值,你可以处理任意的自定义事件。
主要数据data是json格式,为了考虑不知道如何书写正确json格式的设计师,以及为了更好的SEO,插件以扩展的形式提供了build功能,
即允许你将需要展示的数据按照固定的格式写入html页面中,然后由插件为你自动构建data数据,
你可以设置this.debug=true让插件输出构建的数据。
除data参数,navNum外,其它所有参数为可选设置。你可以根据实际情况设置相关内容。
插件主页
内容轮显演示页面:点击这里
图片展示演示页面:点击这里
API,Callback参数说明 Data 以及 Build 格式说明请访问这里
开发初衷:
实际项目中有非常多不同的展示效果,新闻轮显,tab切换等,经常遇到的问题是某个插件只能提供极少功能,或者共存冲突,
于是在这种情况下催生了这个插件。
现实中插件已经解决项目中所有内容,图片的切换事件。现在将其发布出来,就让满天飞的插件世界中再多一个不幸的孩子吧!
鉴于插件开发目的以及现状,基本没有注释,只是提供了较多的使用示例。
新版插件已经把只有我看得懂的a,b,c,d之类的变量名重新改写为更贴近实际的英文组合。
插件的开发完全参照ui中datepicker的开发模式,并直接使用了其中一些方法。
版权声明:某些来源互联网的附加功能版权见文章尾部。
/****************************************** * gomesoft.com * * @author Ethan.zhu(zhuyidong) * @version Version 2.0 * @copyright Copyright (c) 2012 gomesoft.com * @license This contentShown jQuery plug-in is dual licensed under the MIT and GPL licenses. * @docs http://ethanzhu.github.com/jq.contentShown/ * @demo http://ethanzhu.github.com/jq.contentShown/img-demo.html; http://ethanzhu.github.com/jq.contentShown/examples/cont-demo.html * @link http://www.gomesoft.com; http://www.cnblogs.com/zhuyidong/ * @email pig.whose@gmail.com; 12377166@qq.com * * ******************************************/
最新功能演示:更多,更详细的介绍,请移步至插件主页查看
用以展示热点新闻的内容轮显演示:
MTS to MP4 Mac
MTS to M4V Mac
MTS to MOV Mac
WMV to MP4 Mac
Remove DRM from Zune Marketplace
Remove Napster Music DRM
iTunes to DVD
AVI to iTunes
MP4 to DVD
M4V to DVD
Blu-ray Ripper
Blu-ray to MKV Converter
iTunes M4B Audiobook to MP3
Convert DRM AAC to MP3
remove DRM from Nokia Ovi Music Store
AVI to DVD
WMV to DVD
DVD to iTunes
DVD to MOV Mac
DVD to MP4 Mac
DVD to AVI
Rip, Convert Blu-ray disc to AVI
这个版本的插件中,增加了一个显示效果,我将其称为“金字塔导航”
注:金字塔导航功能以扩展的形式提供,整合互联网上的一个插件,基本未作修改。
这个功能的源码版权归原作者所有。
主要参数以及参数说明:
id : null, // 用来在getter时获取ID值,无需设置 navSpace : 47,// 导航区域每个独立导航之间的间隔。 pWidth : 0, // 播放区域的大小,当你没有在样式表中设置时,这里必须提供 pHeight : 0,// 否则在有些情况下插件会不正常显示。 /* * 参数为 数字,或者 css、pyramid。 * 当参数为纯数字的时候是表示当前可见导航区域显示的内容。 * css 交予样式表处理,具体请参考示例 * pyramid 显示金字塔状的立体导航 (需要使用扩展文件。这个方法的版权归原作者所有) * 当你设置为非数字的情况下,无法使用loop 背景动画,navPlace也会被重置为null。 * 所有设置都将交予样式表处理。 * */ navNum : 4, navPlace : null,// 导航位置,默认null表示显示在上或者下,左右请设置为 "lr" (left or right) autoPlay : true,// 是否自动播放 autoTime : 4000,// 自动佛放时间间隔 events : 'mouseenter', // 导航触发事件,建议mouseenter tbgAnimate : true,// 显示导航背景动画,需要相关样式表内容配合 tbgSpeed : 'fast',// speed addtional : false,// 当你需要显示一些特殊样式时,请将此设置为true,然后通过样式表自由控制。 step : 1,// 每次鼠标点击导航按钮,或者自动播放内容不再可见区域内每次滑动的导航数量。 如果设置不合理会被插件重置。 navSpeed : 'fast',// speed opacity : 0.6, data : null, // 需要展示的数据 json格式,如果没有提供主要数据,插件在初始化之后将不会继续工作。 loop : true, // 导航内容是否循环,具体请参考sohu演示 player : true,// 是否显示播放区域。false不显示,false情况下,只处理data中的导航内容,其它都会被忽略。 animate : 'fade',// 播放区域的动画形式 参数:fade,left,right,top,bottom,none showTips : true,// 是否显示提示信息。 tipsAnimate : 'fade', // 提示信息的动画播放形式:fade, slide,none selected : 1,// 当前选择第几个数据,在插件初始化之后这个数据会被提前至第一个位置。 callback : null,// 回调函数,具体使用请参考相关事例 preLoad : true,// 是否预加载图片,每次触发当前导航才会向服务器请求播放的图片,这种方式可以减少一次性的http请求数量,总数不会改变的。 target : '_blank',// 全局链接打开方式。当你在data中提供其它方式时,你所提供的打开方式只对data数据中你所关联的链接起作用。 pSpeed : 500,// speed pType : false,// 插件允许设置播放区域的类别,具体请参考sohu演示的右上角内容。 nContent : 'image',// 导航内容的类型: num,none,image,content pContent : 'image',// 播放内容的类型 : image, content listPlace : null,// 此参数用来处理导航居中的情况,如果需要居中,设置为center tipsBtn : false,// 用设置提示信息中的按钮,例如播放按钮,购买按钮等。 loadClass : 'cs-player-loading',// 预加载情况下等待的样式 missing : 'cs-load-missing',// 加载图片错误或者请求的文件不存在时使用。具体参考示例 //playNav : false, playBtn : false,// 显示播放区域的上一张下一张按钮 playBtnShow : null // 播放区域按钮是否一直显示。设置为always是一直显示,其它任意参数都将会由鼠标动作触发。
API,Callback参数说明 Data 以及 Build 格式说明请访问这里
extendPyramid 的说明:
插件原文: /article/5315783.html
原作者使用的是逆时针排序,
我经简单修改为顺时针排序以接受插件传出的参数,用来保证自动播放能够顺利进行。
已知问题,内容显示时转义html字符基本未作处理,恳请各位能够帮忙提供最佳的处理方式。
转载请注明文章出处:http://www.cnblogs.com/zhuyidong/archive/2012/05/09/2491786.html
// $(function() {
$('#newone').contentShown({
'navNum' : 5,
'step' : 4,
'nContent' : 'content',
'navPlace' : 'lr',
'navSpace' : 30,
'tbgAnimate' : false,
'autoTime' : 2000,
'player' : false
});
$('#newone').contentShown('build');
$('#pyramid').contentShown({
"navNum" : "pyramid",
"pWidth" : 998,
"pHeight": 280,
"showTips": false,
"navSpace": 85,
'animate':'left',
'events' : 'click',
'playBtn': true,
"data":[
{
"b":{"t":"http://pic002.cnblogs.com/images/2012/61318/2012050921041281.jpg","a":"Blu-ray Ripper is an powerful Blu-ray tool to rip Blu-ray DVD"},
"s":"http://pic002.cnblogs.com/images/2012/61318/2012050921035774.jpg",
"l":"http://www.gomesoft.com/blu-ray-ripper.html"
},{
"b":{"t":"http://pic002.cnblogs.com/images/2012/61318/2012050920595394.jpg","a":"The best video converter software, DVD Ripper, DVD Burner, DRM Removal, Online Video Downloader/Recorder"},
"s":"http://pic002.cnblogs.com/images/2012/61318/2012050920570793.jpg",
"l":"http://www.gomesoft.com/total-media-converter-ultimate.html"
},
{
"b":{"t":"http://pic002.cnblogs.com/images/2012/61318/2012050921032484.jpg","a":"Video Converter for Mac enables Mac users to easily convert videos, movies and TV shows from one to another format on Mac"},
"s":"http://pic002.cnblogs.com/images/2012/61318/2012050921023355.jpg",
"l":"http://www.gomesoft.com/mac-video-converter.html"
},
{
"b":"http://pic002.cnblogs.com/images/2012/61318/2012050921051061.jpg",
"s":"http://pic002.cnblogs.com/images/2012/61318/2012050921050363.jpg",
"l":""
},
{
"b":"http://pic002.cnblogs.com/images/2012/61318/2012050921061534.jpg",
"s":"http://pic002.cnblogs.com/images/2012/61318/2012050921060630.jpg",
"l":""
}
]
});
});
// ]]>
相关文章推荐
- 支持多次调用 jq.contentShown 升级,带最新最全的演示以及更多的说明(包含内容轮显示例)
- jq.contentShown 的 API, Callback参数,data格式和build格式说明。
- JAVA通过JNI调用C#dll方法说明(包含示例)
- 还原Wss3.0内容数据库时遇到:"ComputerName\Microsoft##SSEE 上的 WSS_Content 包含用户定义的架构。数据库在能够使用之前必须为空。请删除所有表、存储过程以及其他对象,或使用其他数据库。 " 的提示,无法加载内容数据库
- 支持同一页面多次使用,jquery imageShown 插件 可以完成任何内容的轮显切换
- 嵌入式 iptables参数说明以及使用示例小结
- DEDE调用频道封面{dede:field:content/}内容方法
- Mac OS X EI Capitan 10.11.16 自带php、apache,安装mysql以及升级PHP7说明
- 手机高温警告提示内容不匹配的分析【多次调用PendingIntent.getBroadcast,intent数据不更新】
- jquery显示隐藏更多内容信息实例演示
- LoadRunner11下载以及详细破解说明【最新】
- PHP header函数设置http报文头示例详解以及解决http返回头中content-length与Transfer-Encoding: chunked的问题
- 支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示
- 简约大气的AnyCodeX在线编程网站全新升级啦!支持九种语言,多文件,标准输入,命令行参数,代码下载。还有语法高亮,语法纠错,代码块折叠以及全屏模式哦!
- 最新OmniPeek无线驱动详细列表与下载说明/支持捉空口包的网卡
- Qt5.7以上调用虚拟键盘(支持中文),以及源码修改(可拖动,水平缩放)
- office2007:您正试图运行的函数包含有宏或需要宏语言支持的内容。而在安装此软件时,您(或您的管理员)选择了不安装宏或控件的支持功能
- PHP配置使PHP在页面中支持<?= $content; ?>输出内容
- 最新版Android NDK开发环境搭建以及第一个Android NDK程序(在eclipse中演示)(超简单实用)
- 最新最全的网站内容联盟大全