Ext.slider控件的用法
类别:Web前端 浏览量:2114
时间:2014-5-4 Ext.slider控件的用法
Ext.slider控件的用法一、定义slider滚轴控件
<h1>滚轴控件</h1>
<li class="content">
<h2>横向,初始值50</h2>
<li id="slider1"></li>
<h2>纵向,带提示</h2>
<li id="slider2"></li>
<h2>多值,自定义提示</h2>
<li id="slider3"></li>
</li>
//横向,初始值50
var slider1 = Ext.create('Ext.slider.Single', {
renderTo: 'slider1',
width: 214,
minValue: 0,
maxValue: 100,
value: 50
});
//纵向,带提示
new Ext.create('Ext.slider.Single', {
renderTo: 'slider2',
height: 150,
minValue: 0,
maxValue: 20,
vertical: true,
plugins: new Ext.slider.Tip()
});
//多值,自定义提示
var slider3 = Ext.create('Ext.slider.Multi', {
renderTo: 'slider3',
width: 214,
minValue: 0,
maxValue: 20,
values: [5, 12],
plugins: new Ext.slider.Tip({
getText: function (thumb) {
return Ext.String.format('当前:<b>{0}/20</b>', thumb.value);
}
})
});
效果图
二、获取、设置滚轴控件的值
<h1>操作滚轴控件</h1>
<li class="content">
<button id="button1">设置滚轴1的值为10</button>
<button id="button2">获取滚轴1的值</button>
<button id="button3">设置滚轴3的值为10,15</button>
<button id="button4">获取滚轴3的值集合</button>
</li>
//设置滚轴1的值为10
Ext.fly("button1").on('click', function () {
slider1.setValue(10);
});
//获取滚轴1的值
Ext.fly("button2").on('click', function () {
Ext.MessageBox.alert("获取值", "滚轴1的值:" + slider1.getValue());
});
//设置滚轴3的值为10,15
Ext.fly("button3").on('click', function () {
slider3.setValue(0, 10);
slider3.setValue(1, 15);
});
//获取滚轴3的值集合
Ext.fly("button4").on('click', function () {
Ext.MessageBox.alert("获取值", "滚轴3的值集合:" + slider3.getValues());
});
效果图
标签:Ext.slider
热门推荐
- mvc razor 输出html
- nginx中https配置(Nginx配置同一个域名同时支持http与https两种方式访问实现)
- 数据库常见的索引结构(数据库索引知识点整理)
- sqlserver序列可以自定义(sql server 自定义分割月功能详解及实现代码)
- mysqlexplain各个字段作用(MySQL EXPLAIN语句的使用示例)
- mysql查询语法总结(MySQL全面瓦解之查询的过滤条件详解)
- js中Attribute和Property区别
- css3基础选择器有哪些(对CSS3选择器的研究详解)
- 常见的php五大运行模式详解(php设计模式之职责链模式定义与用法经典示例)
- UML类图概念讲解(一)