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 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
javascript Array.remove() 数组删除
Aug 06 Javascript
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
Jquery性能优化详解
May 15 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
Node.js学习入门
Jan 03 Javascript
node.js入门学习之url模块
Feb 25 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
js中如何完美的解析数据
Mar 18 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
PHP加密解密类实例代码
2016/07/20 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
python 远程统计文件代码分享
2015/05/14 Python
python语言使用技巧分享
2016/05/31 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python面试题之列表声明实例分析
2019/07/08 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python input函数使用实例解析
2019/11/22 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
四风存在的原因分析
2014/02/11 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
先进教师事迹材料
2014/12/16 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript