功能介绍:
jquery contentShown 的前身是 jquery imageShown,新版的content shown 插件很多方法都被重写或者被合并,以提供更高的性能,
特别是在loop设置为true的状态下,性能提升较大。
同时提供多个接口供开发者外部使用,回调函数的执行逻辑更加合理,现在的回调函数执行时, 你可以通过插件提供的api来暂停正在进行的当前动画,
当回调函数执行完毕之后你需要重新启动动画的继续执行。 在这个暂停和重新开始之间,通过插件的返回值,你可以处理任意的自定义事件。
插件开发的初衷是用来展示图片性的内容,在编码的过程中,加入了对任意形式的html内容的处理, 你只要告诉插件你需要处理的是内容类型为 content,
那么所有传入的主要数据都会被当做html内容来处理。
这样就提供了非常灵活的使用方式。例如新闻信息的轮显,tab页的切换等,都非常容易能够展示出来。
主要数据data是json格式,为了考虑不知道如何书写正确json格式的设计师,以及为了更好的SEO,插件以扩展的形式提供了build功能,
即允许你将需要展示的数据按照固定的格式写入html页面中,然后由插件为你自动构建data数据,
你可以设置this.debug=true让插件输出构建的数据。文章结尾,我将为演示一个如何使用build功能构建热点新闻。
插件主页
内容轮显演示页面: 点击这里
图片展示演示页面:
点击这里
API,Callback参数说明 Data 以及 Build 格式说明请访问这里
版权声明:某些来源互联网的附加功能版权见文章尾部。
/****************************************** * 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 * * ******************************************/
?主要参数以及参数说明:
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 格式说明请访问这里
金字塔扩展功能的说明:
原文: http://www.cnblogs.com/homeLu/archive/2011/01/24/1943090.html
原作者使用的是逆时针排序,
我经简单修改为顺时针排序以接受插件传出的参数,用来保证自动播放能够顺利进行。
已知问题,内容显示时转义html字符基本未作处理,恳请各位能够帮忙提供最佳的处理方式。
?
?