jquery contentShown

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的开发模式，并直接使用了其中一些方法。

版权声明：某些来源互联网的附加功能版权见文章尾部。

/******************************************
 * 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
 * 
 *
 ******************************************/

最新功能演示：更多，更详细的介绍，请移步至插件主页查看

用以展示热点新闻的内容轮显演示：

 

• DVD to AVI
• Rip, Convert Blu-ray disc to AVI
• 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

 

 

 

这个版本的插件中，增加了一个显示效果，我将其称为“金字塔导航”

• 
• 
• 
• 
• 

• 
• 
• 
• 
• 

注：金字塔导航功能以扩展的形式提供，整合互联网上的一个插件，基本未作修改。 
这个功能的源码版权归原作者所有。

主要参数以及参数说明:

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 的说明： 
插件原文： http://www.cnblogs.com/homeLu/archive/2011/01/24/1943090.html 
原作者使用的是逆时针排序， 
我经简单修改为顺时针排序以接受插件传出的参数，用来保证自动播放能够顺利进行。

    已知问题，内容显示时转义html字符基本未作处理，恳请各位能够帮忙提供最佳的处理方式。

转载请注明文章出处：http://www.cnblogs.com/zhuyidong/archive/2012/05/09/2491786.html