jquery tools 系列 scrollable(2)


Posted in Javascript onSeptember 06, 2009

scrollable提供的一系列获取scrollable对象的方法具体使用方式如下:

var scrollable=$("div.scrollable").scrollable(); 
    //alert(scrollable.getConf().prev);//获取配置对象中的prev属性 
    scrollable.getConf().speed=200;//设置配置对象的speed属性 
    //alert(scrollable.getIndex());//获取当前滚动项的索引 
    //alert(scrollable.getItems().length);//获取当前滚动项的数量 
    //alert(scrollable.getItemWrap().html());//获取包含滚动项的节点(class=scrollable),并将所有滚动项显示出来 
    //alert(scrollable.getPageAmount());//获取当前滚动栏分页数 
    //alert(scrollable.getPageIndex());//获取当前所在分页 
    //alert(scrollable.getRoot().html());//获取滚动项的上一级节点(id=thumbs) 
    //alert(scrollable.getSize()); 
    //alert(scrollable.getVisibleItems().length);//获取当前可见滚动项数量 
    scrollable.next();//如果有下一个滚动项,则跳转到下一个滚动项 
    scrollable.prev(3000,function(){return true});//跳转到前一滚动项 
    //var seekTo= scrollable.click(0).seekTo(2,1000,function(){ 
        //alert(this.getIndex()); 
    //});     //scrollable.move(2); 
    //scrollable.prevPage();//跳转到前一页 
    //scrollable.nextPage();//跳转到下一页 
    //scrollable.setPage(1);//跳转到下一页 
    //scrollable.begin();//跳转到第一个滚动项 
    //scrollable.end();//跳转到最后一个滚动项 
    scrollable.click(3);//使第四个滚动项处于选中状态 
    scrollable.onBeforeSeek(function(){ 
            alert("you click the "+this.getIndex()+"st scrollable item!"); 
    }); 
    $("#remove").click(function(){ 
        scrollable.getItems().filter(":last").remove();//删除最后一个滚动项 
        scrollable.reload().prev();//自动更新相关配置信息,并跳转到被删除滚动项的前一项 
    });

以下是scrollable对象的方法说明描述:
方法名称 返回值 说明
getConf() Object 返回scrollable的配置对象,并且可通过设置该对象的相关属性值来修改该配置对象的属性。
getIndex() number 获取当前滚动项的索引号,0代表第一个元素,1代表第二个元素,以此类推。此外,需注意的是,如果获取到多个滚动项,那么将会只返回第一个滚动项的索引号。
getItems() jQuery 返回所有的滚动项,结果以jquery对象的方式返回。
getItemWrap() jQuery 获取滚动项的父节点,结果以jquery对象的方式返回。
getPageAmount() number 获取当前滚动栏的分页数。
getPageIndex() number 返回当前分页索引号。比如说,如果分页设置为5个滚动项/页,并且当前滚动项位置为7的话,那么将会返回1(第二页)
getRoot() jQuery 获取滚动项的上一级节点。
getSize() number 返回滚动项的数量。该方法等同于getConf().size
getVisibleItems() jQuery 获取一个由当前可见滚动项组成列表,该列表为一个jquery对象,可见滚动项的数量由配置对象的size属性定义。
     
reload() API scrollable支持动态添加和删除滚动项的功能。在动态添加或删除滚动项以后,调用此方法来自动更新分页导航以及滚动项移动的相关信息。
prev() API 跳转到该滚动项的前一项(如果该滚动项不是第一个滚动项)
next() API 跳转到该滚动项的下一项(如果该滚动项不是最后一个滚动项)
seekTo(index) API 跳转到指定索引处的滚动项。
move(offset) API 将处于当前状态(激活)的滚动项位置由当前滚动项向前/后移动offset。Offset为正,则滚动项向右/下移动,否则,向左/上移动。比如:move(2),则处于当前状态的滚动项的索引由i滚动项转移至i+2滚动项。
prevPage() API 跳转到前一页(如果该页不是第一页)。
nextPage() API 跳转到后一页(如果该页不是最后一页)。
setPage(index) API 跳转到第index页。比如,index=2,那么会从当前页跳转到第3页。
movePage(offset) API 用于将显示页的位置由当前页切换到该页/后offset页,该方法其他解释类似于(offset)。
begin() API 跳转到第一个滚动项,相当于seekTo(0)。
end() API 跳转到最后一个滚动项。
click(index) API 使第index个滚动项处于选中(激活)状态。
     
onBeforeSeek(fn) API 参见配置对象的onBeforeSeek相关说明
onSeek(fn) API 参见配置对象的onSeek相关说明
注意:上面方法表中prev()方法以下的方法除了表中携带的参数外,还包含两个隐含参数:speed和callback。其中speed参数是用于控制滚动项的动画效果持续时间的,而callback为其回调方法。具体实现可参见scrollable的prev()方法使用示例。

最后,给出本scrollable系列的完整示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script> 
<script src="http://static.flowplayer.org/js/jquery.mousewheel.js" ></script> 
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-navig.css" /> 
<style><!-- 
div.scrollable { 
    position:relative; 
    overflow:hidden; 
    width: 646px;     
    height:300px;     
} 
#thumbs {     
    position:absolute; 
    width:20000em;     
    clear:both; 
    border:1px solid #222; 
} 
a.prev, a.next { 
    margin-top:118px;     
} 
#thumbs div { 
    float:left; 
    width:214px; 
    height:300px; 
    background:#333 url(/upload/20090906120115441.png) repeat-x 0 146px; 
    color:#fff; 
    border-left:1px solid #333; 
    cursor:pointer; 
} 
#thumbs div.hover { 
    background-color:#444;     
} 
#thumbs div.active { 
    background-color:#066; 
    cursor:default; 
} 
#thumbs h3, #thumbs p, #thumbs span { 
    margin:13px;         
    font-family:"bitstream vera sans"; 
    font-size:13px; 
    color:#fff;     
} 
#thumbs h3 em { 
    font-style:normal; 
    color:yellow; 
} 
--></style><style>div.scrollable { 
    position:relative; 
    overflow:hidden; 
    width: 646px;     
    height:300px;     
} 
#thumbs {     
    position:absolute; 
    width:20000em;     
    clear:both; 
    border:1px solid #222; 
} 
a.prev, a.next { 
    margin-top:118px;     
} 
#thumbs div { 
    float:left; 
    width:214px; 
    height:300px; 
    background:#333 url(/upload/20090906120115441.png) repeat-x 0 146px; 
    color:#fff; 
    border-left:1px solid #333; 
    cursor:pointer; 
} 
#thumbs div.hover { 
    background-color:#444;     
} 
#thumbs div.active { 
    background-color:#066; 
    cursor:default; 
} 
#thumbs h3, #thumbs p, #thumbs span { 
    margin:13px;         
    font-family:"bitstream vera sans"; 
    font-size:13px; 
    color:#fff;     
} 
#thumbs h3 em { 
    font-style:normal; 
    color:yellow; 
}</style> 


<!-- navigator --> 
<div class="navi"></div> 
<!-- prev link --> 
<a class="prev"></a> 
<!-- root element for scrollable --> 
<div class="scrollable"> 
    <div id="thumbs"> 
         
            <div> 
                <img src="/upload/20090906120116994.jpg" /> 
                <h3><em>1. </em>An example title</h3> 
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a. 
                </p> 
                <span class="blue">60 sec</span> 
            </div> 
            <div> 
                <img src="/upload/20090906120117587.jpg" /> 
                <h3><em>2. </em>An example title</h3> 
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a. 
                </p> 
                <span class="blue">80 sec</span> 
            </div> 
            <div> 
                <img src="/upload/20090906120117884.jpg" /> 
                <h3><em>3. </em>An example title</h3> 
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a. 
                </p> 
                <span class="blue">100 sec</span> 
            </div> 
            <div> 
                <img src="/upload/20090906120117490.jpg" /> 
                <h3><em>4. </em>An example title</h3> 
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a. 
                </p> 
                <span class="blue">120 sec</span> 
            </div> 
            <div> 
                <img src="/upload/20090906120118968.jpg" /> 
                <h3><em>5. </em>An example title</h3> 
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
                    tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a. 
                </p> 
                <span class="blue">140 sec</span> 
            </div> 
    </div> 
</div> 
<!-- next link --> 
<a class="next"></a> 
<!-- let rest of the page float normally --> 
<br clear="all" /> 
<div> 
    <input type="button" value="remove" id="remove"/> 
</div> 
<script type="text/javascript"><!-- 
$(function() {         
    $("div.scrollable").scrollable({ 
        size: 3, 
        vertical:false, 
        //clickable:false, 
        loop:true,//设置是否自动跳转(根据间隔时间) 
        //interval: 1000,//设置间歇时间间隔 
        //speed:2000, 
        items: '#thumbs', 
        //prev:'.prev',//跳转到上一项 
        //next:'.next'//跳转到下一项 
        prevPage:'.prev',//跳转到上一页 
        nextPage:'.next',//跳转到下一页 
        hoverClass: 'hover', 
        easing:'linear' 
    });     
    var scrollable=$("div.scrollable").scrollable(); 
    //alert(scrollable.getConf().prev);//获取配置对象中的prev属性 
    scrollable.getConf().speed=200;//设置配置对象的speed属性 
    //alert(scrollable.getIndex());//获取当前滚动项的索引 
    //alert(scrollable.getItems().length);//获取当前滚动项的数量 
    //alert(scrollable.getItemWrap().html());//获取包含滚动项的节点(class=scrollable),并将所有滚动项显示出来 
    //alert(scrollable.getPageAmount());//获取当前滚动栏分页数 
    //alert(scrollable.getPageIndex());//获取当前所在分页 
    //alert(scrollable.getRoot().html());//获取滚动项的上一级节点(id=thumbs) 
    //alert(scrollable.getSize()); 
    //alert(scrollable.getVisibleItems().length);//获取当前可见滚动项数量 
    scrollable.next();//如果有下一个滚动项,则跳转到下一个滚动项 
    scrollable.prev(3000,function(){return true});//跳转到前一滚动项 
    //var seekTo= scrollable.click(0).seekTo(2,1000,function(){ 
        //alert(this.getIndex()); 
    //}); 
    //scrollable.move(2); 
    //scrollable.prevPage();//跳转到前一页 
    //scrollable.nextPage();//跳转到下一页 
    //scrollable.setPage(1);//跳转到下一页 
    //scrollable.begin();//跳转到第一个滚动项 
    //scrollable.end();//跳转到最后一个滚动项 
    scrollable.click(3);//使第四个滚动项处于选中状态 
    scrollable.onBeforeSeek(function(){ 
            alert("you click the "+this.getIndex()+"st scrollable item!"); 
    }); 
    $("#remove").click(function(){ 
        scrollable.getItems().filter(":last").remove();//删除最后一个滚动项 
        scrollable.reload().prev();//自动更新相关配置信息,并跳转到被删除滚动项的前一项 
    }); 
}); 
// --></script>

jquery tools 系列 scrollable(2)
Javascript 相关文章推荐
分享一个asp.net pager分页控件
Jan 04 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
JSON相关知识汇总
Jul 03 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
js实现简单进度条效果
Mar 25 Javascript
jquery tools 系列 scrollable学习
Sep 06 #Javascript
javascript事件问题
Sep 05 #Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 #Javascript
JavaScript 密码强度判断代码
Sep 05 #Javascript
关于javascript中的parseInt使用技巧
Sep 03 #Javascript
jquery判断单个复选框是否被选中的代码
Sep 03 #Javascript
javascript 触发事件列表 比较不错
Sep 03 #Javascript
You might like
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP反射基础知识回顾
2020/09/10 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python中的数学运算操作符使用进阶
2016/06/20 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
企业安全生产演讲稿
2014/05/09 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
销售团队激励口号
2014/06/06 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
招商引资工作汇报
2014/10/28 职场文书
初中生物教学反思
2016/02/20 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
实现GO语言对数组切片去重
2022/04/20 Golang