jq.contentShown 的 API, Callback参数,data格式和build格式说明。
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')来确认内容是否正常加载。
主要api 使用方式 $.contentShown.function(id);
stop(id) //停止当前DOM的自动播放。 start(id) //开始自动播放 playPause(id)//暂停播放区域的动画执行,一般使用在回调函数中 playStart(id)//开始刚才暂停的播放动画,回调函数执行完毕后,可以继续播放动画。 setCallback(id)//允许设置返回参数,你可以按照自己的需要设置插件返回那些参数。 setDefaults(settings)//设置 参数
Data数据格式说明:
"data" : [ //最完整的data格式介绍以及说明 其中所有设置中 g 代表 target 除提示信息中的按钮 "b_" 中 t 代表title外,其它设置中 t 一律代表内容。 { "b": "", //"b":{"t":"","l":"","g":"","a":""} 用这种方式刻度设置链接,独立设置打开方式,设置图片alt。 "s": "", /* * 导航区域内容 * 对象形式 "s":{"t":"","l":"","g":"","a":"","w":"","h":""} , * 在使用不规则导航图的情况系需要设置 w(width) 和 h(height) **/ "l": "", //global link 当前数据中所有使用链接的地方,如果未单独设置则使用global link。 "t": "", //"t":{"t":"","l":"","g":"","a":""} 主标题h2 "t1": "", //"t1":{"t":"","l":"","g":"","a":""} 副标题h3 "m": "", //介绍,可以是任何形式的html内容。 "b_": "" /* * 对象的形式:b_':{'c':'','l':'','g':'','t':'','t_':''} * class(后缀,btn-class,btn在样式表中已经存在), * link, target, title, text, * 如果有多个按钮请使用数组。[{按钮1},{按钮2}], * 从第二个开始 自动增加样式 btn1,btn2...btn(n)(btn为样式表中全局btn样式) * 你可以在样式表中独立重置每个按钮的位置,大小等等。 **/ "tp":"" //type 即演示中右上角显示的内容。 "ot":[//other title 多个对象的情况请使用数组,单个对象数组形式为可选。 { 'n':'标题', 'list':[ {"t":"content","l":"link"}, {"t":"content","l":"link"}, {"t":"content","l":"link"} ] }, { 'n':'标题1', 'list':{"t":"content","l":"link"} }, { 'n':'标题2', 'list':{"t":"content","l":"link"} } ] }, ...... ]
Build 格式说明:
导航格式: <ul> <li class="cs-nav-item"> <div class="this-content">content</div> <p class="global-link">link.href</p> </li> <li class="cs-nav-item">...</li> ...... </ul> player: <li class="cs-player-item"> <p class="this-content"><a href="http://www.gomesoft.com/avi/convert-avi-to-quicktime-mov-mac.html" target="_blank"><img src="../content/images/avi-to-mov-mac.jpg"></a></p> <p class="global-link">http://www.gomesoft.com/avi/</p> <label> <h2><a href="http://www.gomesoft.com/avi/convert-avi-to-quicktime-mov-mac.html" target="_blank">Convert AVI to MOV Mac</a></h2> <p class="tip-message">Cheap Video Converter</p> <p class="tip-btns"> <a class="zy" href="http://www.google.com" title="按钮1"></a> <a class="zy" href="http://www.google.com" title="按钮2">点击这里</a> </p> <p class="play-type">zy</p> <p class="other-titles"> <span>分类</span> <a href="http://www.google.com">家庭剧</a> <a href="http://www.google.com">言情剧</a> </p> <p class="other-titles"> <span>导演</span> <a href="http://www.google.com">Ethan</a></p> <p class="other-titles"> <span>主演</span> <a href="http://www.google.com">演员1</a> <a href="http://www.google.com">演员2</a> </p> </label>
</li>
需要注意的是 player区域的global link只有在导航区域未设置的状态西起作用。