当前位置:Web前端 > extjs> 正文

Ext.slider控件的用法

时间:2014-5-4类别:Web前端

Ext.slider控件的用法

Ext.slider控件的用法

一、定义slider滚轴控件

  •  
  • HTML 代码   复制
  • 
        <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>
    
    		
  •  

  • JScript 代码   复制
  • 
     
        //横向,初始值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);
                }
            })
        });
    
    
    		
  •  

    效果图

     

    二、获取、设置滚轴控件的值

  •  
  • HTML 代码   复制
  • 
        <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>
    
    		
  •  
  •  
  • JScript 代码   复制
  • 
        //设置滚轴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());
        });
    
    
    		
  •  

    效果图

     

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐