IT教程 | 加入收藏 | 简体 | 繁体
Tangram教程:JavaScript...JQuery教程ExtJS教程Tangram教程Ajax教程
当前位置: 首页 > Js+Ajax > Tangram教程

baidu.ui.ScrollBar 创建一个简单的滚动条

2012-07-22来源:[www.121ask.com]热度:0℃ 【字体:

baidu.ui.ScrollBar

创建一个简单的滚动条

  语法: new baidu.ui.ScrollBar(options)  

返回值:<instance> 实例对象

  扩展插件(增加对象参数和实例方法)

$container 支持绑定一个容器 查看+
+参数
<String|HTMLElement> * options.container 一个容器的dom或是id的字符串
+实例方法
<HTMLElement> getContainer() 取得用户传入的需要被滚动条管理的对象

参数

<Object> * options config参数.
<String>    options.orientation 设置横向或是竖向滚动条,默认值:vertical,可取值:horizontal.
<Number> * options.value 滚动条滚动的百分比值,定义域(0, 100)
<Number> * options.dimension 滚动条滑块占全部内容的百分比,定义域(0, 100)
<Number> * options.step 用户自定义当点击滚动按钮时每次滚动百分比距离,定义域(0, 100)
<Function>    options.onscroll 当滚动时触发该事件,function(evt){},evt.value可以取得滚动的百分比

实例方法

<void> render(...) 将scrollBar的body渲染到用户给出的target
<void> flushUI(...) 更新组件的外观,通过传入的value来使滚动滑块滚动到指定的百分比位置,通过dimension来更新滑块所占整个内容的百分比宽度
<void> scrollTo(...) 滚动内容到参数指定的百分比位置
<void> setVisible(...) 设置滚动条的隐藏或显示
<Boolean> isVisible() 取得当前是隐藏或是显示状态
<Object> getSize() 取得滚动条的宽度和高度
<void> update(...) 更新滚动条的外观
<void> dispose() 销毁对象

[NextPage] 

实例:

<body>
 
<div id="scrollID"></div><div id="info">0</div>
 
</body>
 
<script type="text/javascript">
 
var instance = new baidu.ui.ScrollBar({skin: "scrollbar-a", onscroll: function(evt){baidu.dom.g("info").innerHTML=evt.value+"%";}});
 
instance.render("scrollID");
 
/*
 
(function(visible){
 
  instance.setVisible(visible);
 
})('1');
 
*/
 
/*
 
(function(){
 
  alert( instance.isVisible() );
 
})();
 
*/
 
/*
 
(function(per){
 
  instance.scrollTo(per);
 
})('50');
 
*/
 
/*
 
(function(a, b){
 
  instance.flushUI(a, b);
 
})('20','30');
 
*/
 
/*
 
(function(position,width,step){
 
  var opt = {};
 
  opt.value = parseInt(position);
 
  opt.dimension = parseInt(width);
 
  opt.step = parseInt(step);
 
  instance.update(opt);
 
})('80','40','10');
 
*/
 
//提示:您可以使用注释中的代码进行演示
 
</script>

 

以上IT文章《baidu.ui.ScrollBar 创建一个简单的滚动条》由名客技术网[www.121ask.com]提供阅读!
推广信息
推广信息
名客技术网是一个免费为广大IT技术人员提供IT教程,绿色软件,asp/php/jsp/java/net等实例视频教程,CMS教程,破解软件下载以及学习相关源码、知识的IT网站。
名客技术网如果无意之中侵犯了您的版权,请来电告知,本站将在3个工作日内删除 QQ:175352796
Copyright 2011-2017 Powered by 121ASK.COM, All Rights Reserved.
备案号:鄂ICP备11013833号-3