首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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）

jquery tools 系列 scrollable（2）

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
jQuery选择器源码解读（六）：Sizzle选择器匹配逻辑分析
Mar 31 Javascript
关于JS中prototype的理解
Sep 07 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
vue实现菜单切换功能
May 08 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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
缓冲区(1) 变量提升(1) cypress(1) 弹窗(1) ant design(2) netty(1) JOIN(1) json_extract(1) form表单(1) NoSQL(1)
You might like
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
Eclipse和PyDev搭建完美Python开发环境教程（Windows篇）
2016/11/16 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
python学习开发mock接口
2019/04/28 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Django URL参数Template反向解析
2020/11/24 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
高一地理教学反思
2014/01/18 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
大跃进口号
2014/06/16 职场文书
公务员检讨书
2014/11/01 职场文书
python tkinter模块的简单使用
2021/04/07 Python
python自动化之如何利用allure生成测试报告
2021/05/02 Python
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python