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只有在导航区域未设置的状态西起作用。

posted on 2012-05-09 15:01  Ethan.zhu  阅读(598)  评论(0编辑  收藏  举报