jCarousel使用说明文档(中文)
来源:互联网 发布:实况足球手柄按键mac 编辑:程序博客网 时间:2024/05/19 12:25
jCarousel 是个非常好看又好用的内容滚动切换插件,可以实现按序水平或垂直方向的内容列表的切换。
滚动切换的内容可以是静态的HTML内容,也可以是JS的对象列表,也可以是利用AJAX技术动态载入的内容。
使用方法
使用此插件,需要在<head>标签内引入jQuery库,jCarousel源文件和CSS样式等:
<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script><script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script><link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" /><link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
jCarousel在HTML文档中使用一个非常简单的HTML标记结构:
<ul id="mycarousel" class="jcarousel-skin-name"> <!-- The content goes in here --></ul>
jCarousel自动生成需要的HTML标记内容。class属性标明jCarousel使用的"name"名称的外观。
应用jCarousel,需要在<head>标记内增加以下代码:
<script type="text/javascript">jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ // Configuration goes here });});</script>
jCarousel可以接受很多配置选项,在后面会详细说明。
jCarousel初始化成功后,生成的DOM结构如下所示:
<div class="jcarousel-skin-name"> <div class="jcarousel-container"> <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div> <div class="jcarousel-next"></div> <div class="jcarousel-clip"> <ul class="jcarousel-list"> <li class="jcarousel-item-1">First item</li> <li class="jcarousel-item-2">Second item</li> </ul> </div> </div></div>
你可以发现自动生成了一些有class属性的元素。你可以自己定义这些对应的class的样式。
注:
"jcarousel-skin-name"外观class名称被自动从<ul>上变动到了顶层的<div>元素上。在<div class="jcarousel-container">中的第一个<div>元素表示一个不可用的按钮,第二个<div>元素是一个可用的按钮。不可用按钮有一个disabled属性(实际上对<div>元素没有影响,你可以照常使用按钮元素),额外的jcarousel-prev-disabled(或者jcarousel-next-disabled)表示样式。在列表中的<li>元素都有jcarousel-item-n的样式,通过n表示在列表中的位置。class的名称都可以复用,如<ul class="jcarousel-list jcarousel-list-horizontal">表示一个水平的carousel。动态内容载入使用itemLoadCallback回调方法作为一个配置选项,你可以实现动态创建<li>元素。<script type="text/javascript">jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ itemLoadCallback: itemLoadCallbackFunction });});</script>itemLoadCallback是个JavaScript函数,当carousel载入了列表内容时被执行。使用时需要传递两个参数:载入列表的carousel实例对象和指示当前carousel状态的标记('init','prev'或者'next')。<script type="text/javascript">function itemLoadCallbackFunction(carousel, state){ for (var i = carousel.first; i <= carousel.last; i++) { // Check if the item already exists if (!carousel.has(i)) { // Add the item carousel.add(i, "I'm item #" + i); } }};</script>
jCarousel包含一个方便的add()方法,用于创建对应编号的元素和元素中的innerHTML字符串内容。
如果元素已经存在,它只是更新元素的innerHTML字符串。
你可以使用carousel.first和carousel.last变量来访问第一个和最后一个可见元素的编号值。
配置选项
jCarousel接受以下选项来控制carousel的表现和行为。
"first"
, "last"
或者 "both"
。如果设置为null
,默认关闭连接效果。你也可以设置"circular"选项实现循环效果。
例子 Circular carousel 演示如何实现此效果。initCallbackfunctionnull在初始化carousel后调用的JavaScript函数。包含两个参数:调用函数的carousel实例对象和carousel的初始化状态(init, reset 或者reload)。itemLoadCallbackfunctionnull在carousel动态载入内容后调用的JavaScript函数。包含两个参数:调用函数的carousel实例对象和carousel的动作状态(prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。itemLoadCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}itemFirstInCallbackfunctionnull当某个元素成为carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。
itemFirstInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}itemFirstOutCallbackfunctionnull当某个元素不再是carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。
itemFirstOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}itemLastInCallbackfunctionnull当某个元素成为carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。
itemLastInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}itemLastOutCallbackfunctionnull当某个元素不再是carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。
itemLastOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}itemVisibleInCallbackfunctionnull当某个元素成为carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。
itemVisibleInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}itemVisibleOutCallbackfunctionnull当某个元素不再是carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。
itemVisibleOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}buttonNextCallbackfunctionnull当'next'按钮状态改变时调用的JavaScript函数。方法的返回值用于控制'next'按钮可用还是不可用。需要三个参数:调用函数的实例对象,按钮控件元素和该按钮是否可用的标记。buttonPrevCallbackfunctionnull当'previous'按钮状态改变时调用的JavaScript函数。方法的返回值用于控制'previous'按钮可用还是不可用。需要三个参数:调用函数的实例对象,按钮控件元素和该按钮是否可用的标记。buttonNextHTMLstring
<div></div>
自动生成的next按钮的HTML标记。如果设置为空,不创建next按钮。buttonPrevHTMLstring<div></div>
自动生成的prev按钮的HTML标记。如果设置为空,不创建prev按钮。buttonNextEventstring"click"指定触发next操作的事件名。buttonPrevEventstring"click"指定触发prev操作的事件名。- jCarousel使用说明文档(中文)
- jCarousel使用说明文档(中文)
- jCarousel使用说明文档(中文)
- jCarousel
- [转载]AFNetWorking 2.0 中文文档 使用说明
- jCarousel Lite
- JW FLV PLAYER 中文 去水印 无水印 反编译 破解版使用说明文档
- JW FLV PLAYER 中文 去水印 无水印 反编译 破解版使用说明文档
- JW FLV PLAYER 中文 去水印 无水印 反编译 破解版使用说明文档
- JW FLV PLAYER 中文 去水印 无水印 反编译 破解版使用说明文档
- JspSmartUpload文档使用说明
- CButtonST类使用说明文档
- JspSmartUpload文档使用说明
- AjaxPro使用说明文档
- My97DatePicker使用说明文档
- SIM300使用说明(使用文档)
- My97DatePicker使用说明文档
- JAXB — 使用说明文档
- zoj 1315
- David Pallmann谈WCF服务设计使用技巧
- w3school学习6-jQuery HTML 操作
- 图论最短路径 Dijkstra算法和模板
- java web listener 监听器
- jCarousel使用说明文档(中文)
- Oracle SQL最佳实践
- SOJ-4072(数组模拟双向链表)
- 中国创业的四波浪潮
- 黑马程序员_java基础视频第23天_ java网络编程
- Windows下的Memcache
- 创业者必看的十大励志电影
- RMAN Restore Performance
- 每个程序员都应该做的事情:代码审查(code review)