JQuery EasyUI(30)

最新推荐文章于 2022-11-19 17:11:20 发布

翻译最新推荐文章于 2022-11-19 17:11:20 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了EasyUI中Slider组件的使用方法，包括加载方式、属性、事件和方法列表，以及如何通过JavaScript进行初始化和操作。适用于希望深入了解并熟练掌握Slider组件功能的前端开发者。

第三十章：Slider（滑动条）组件

学习要点：

加载方式
属性列表
事件列表
方法列表

一、加载方式：

1.class加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
     <input id="box" class="easyui-slider" value="" style="width:300px" data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]"/>
 </body>
</html>

2.JS调用加载：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
      <input id="box"> 
 </body>
</html>

$(function(){

   $.('#box').slider({
     width:300,
     height:200,
  });
});

二、属性列表：

Slider属性
属性名	值	说明
width	number	滑动条宽度。默认值auto。
height	number	滑动条高度。默认值auto。
mode	string	申明滚动条类型。可用值有：'h'（水平），'v'（垂直）。默认值'h'。
reversed	boolean	设置为true时，最小值和最大值将对调他们的位置，默认值false。
showTip	boolean	定义是否显示值信息提示。默认值false。
disabled	boolean	定义是否禁用滑动条，默认值false。
value	number	默认值，默认值0。
min	number	允许的最小值，，默认值0。
max	number	允许的最大值，默认值100。
step	number	值增加或减少。默认值1。
rule	array	显示标签旁边的滑块，‘\|’只显示一行。默认值[]。
tipFormatter	function	该函数用于格式化滑动条。返回的字符串值将显示提示。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
      <input id="box"> 
 </body>
</html>

$(function(){

   $.('#box').slider({
     width:300,
     height:200,
     mode:'v',
     rule:[0,'|',25,'|',50,'|',75,'|',100],
     showTip:true,
     reversed:false,
     value:12,
     min:0,
     max:100,
     step:1,
     tipFormatter:function(value){
       return value + '%',
    }
  });
});

三、事件列表：

Slider事件
方法名	传参	说明
onChange	newValue，oldValue	在字段值更改的时候触发。
onSlideStart	value	在开始拖拽滑动条的时候触发。
onSliderEnd	value	在结束拖拽滑动条的时候触发。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
      <input id="box">
      <span id="text">文字</span> 
 </body>
</html>

$(function(){

   $.('#box').slider({

    onSliderStart：function(value){
         console.log(value);
    }

    onSliderEnd：function(value){
         console.log(value);
    }

    onChange:function(newValue,oldValue){
       $.('#text').css('font-size',newValue);
    }
  });
});

四、方法列表：

Slider方法
方法名	参数	说明
options	none	返回滑动条属性。
destory	none	销毁滑动条对象。
resize	param	设置滑动条大小。‘param’参数包含以下属性：width：滑动条宽度。height：滑动条高度。
getValue	none	获取滑动条的值。
setValue	value	设置滑动条的值。
clear	none	清除滑动条的值。
reset	none	重置滑动条的值。
enable	none	启用滑动条控件。
disable	none	禁用滑动条控件。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
        <input id="box">
 </body>
</html>

$(function(){

   $.('#box').slider({

  });

   //返回滑动条属性
   console.log($('#box').slider('options'));

   //返回滑动条属性
    $('#box').slider('destroy');

   //设置滑动条大小
   $('#box').slider('resize',{
        width:500,
        height:30,
   });

   //设置滑动条值
   console.log($('#box').slider('setValue',90));
   //获取滑动条值
   $('#box').slider('getValue');
   //清理重置
   $('#box').slider('clear');
   $('#box').slider('reset');
});

PS：我们可以使用$.fn.slider.defaults重写默认值对象。

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/103063492

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载