<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>Slider（滑动条）</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>

    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>

  </head>

  <body>

    <div style="margin:100px">

        身高：<span id="tip"></span>

        <p/>

        <div id="ss" style="height:400px;width:600px"></div>

    </div>

    <script type="text/javascript">

        $("#ss").slider({

            mode : "v",

            min : 150,

            max : 190,

            rule : [ 150,'|',160,'|',170,'|',180,'|',190 ],

            showTip : true,

            value : 150

        });

    </script>

    <script type="text/javascript">

        $("#ss").slider({

            onChange : function(newValue){

                if(newValue == 160){

                    $("#tip").text("合格").css("color","blue");

                }else if(newValue == 170){

                    $("#tip").text("良好").css("color","green");

                }else if(newValue == 180){

                    $("#tip").text("优秀").css("color","pink");

                }else if(newValue == 190){

                    $("#tip").text("卓越").css("color","red");

                }

            }

        });

    </script>

  </body>

</html>

easyUI之slider滑动条框的更多相关文章

  1. 第二百二十节，jQuery EasyUI，Slider(滑动条)组件

    jQuery EasyUI,Slider(滑动条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...

  2. Slider( 滑动条) 组件

    本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个组件依赖于Draggable(拖动)组件. 一． 加载方式//class 加载方式<input class=" ...

  3. 关于Unity中NGUI的Checkbox复选框、Slider滑动条和Button的6种触发回调事件的方式

    Checkbox复选框 1.创建一个NGUI背景Sprite1节点 2.打开NGUI---->Open---->Prefab Toolbar---->选择一个复选框节点,拖拽到背景节 ...

  4. Slider 滑动条效果

    转载自:http://www.cnblogs.com/cloudgamer/archive/2008/12/24/Slider.html 这个滑动条(拖动条)效果,一开始是参考了BlueDestiny ...

  5. Slider滑动条

    Slider的Value Changed事件一般与Label结合让其显示数值 int mySlider = (int)sender.value; self.sliderLabel.text = [NS ...

  6. WPF Slider滑动条的颜色修改

    效果如下: 鄙人虽然开发WPF有些时间,但之前一直是一些简单Template和Style改改之类的工作,并没有深入研究过.此次为了完成工作,首先也是网上搜了半天,没有找到合适的代码直接拷贝(搜索能力待 ...

  7. 利用OpenCV和MFC对话框建设一个有滑动条控制的播放器--转

    (一)问题的提出: OpenCV有一个很简单的播放视频文件并加载滑动条的程序,但是如何用MFC对话框来创建一个有滑动条控制的播放器呢,网络上四处搜索都没有代码可以参考,下的都是些骗子链接文件,很过分, ...

  8. VC++ 中滑动条（slider控件）使用 [转+补充]

    滑动控件slider是Windows中最常用的控件之一.一般而言它是由一个滑动条,一个滑块和可选的刻度组成,用户可以通过移动滑块在相应的控件中显示对应的值.通常,在滑动控件附近一定有标签控件或编辑框控 ...

  9. easyui源码翻译1.32--Slider（滑动条）

    前言 使用$.fn.slider.defaults重写默认值对象.下载该插件翻译源码 滑动条允许用户从一个有限的范围内选择一个数值.当滑块控件沿着轨道移动的时候,将会显示一个提示来表示当前值.用户可以 ...

随机推荐

  1. web开发：javascript高级

    一.事件案例 二.循环绑定之变量污染 三.事件的绑定与取消 四.事件对象 一.事件案例 <!DOCTYPE html> <html> <head> <meta ...

  2. Java入门第二季——Java中的this关键字

    如果想访问一个private属性,通常会使用setter和getter方法来操作属性,属性名经常会与参数名相同,我们为了区分属性和参数的概念,我们会在属性前面加上this关键字,此时代表我将一个参数的 ...

  3. find 命令和sed命令练习

    1.查找/var目录下属主为root,且属组为mail的所有文件 find /var/ -user root -group mail 2.查找/var目录下不属于root.lp.gdm的所有文件 fi ...

  4. SQL拼串--小问题大毛病

    用字符串拼接SQL串实现动态SQL语句,经常使用. 不过在拼接SQL串中有许多技巧和小陷阱 1.遗漏""和'' 错误案例: 错误结果: 发现没有数据产生..我还以为是连接错了数据库 ...

  5. struts2之多文件上传与拦截器（8）

    前台jsp <s:form action="uploadAction" enctype="multipart/form-data" method=&quo ...

  6. 线段树（四）——两个标记（add和set）

    add无序,set有序.规定同时有两个标记时,表示先执行set再执行add. 1. 更新操作: int op,cl,cr,v; void update(int o, int L, int R) { , ...

  7. BZOJ 2631 tree / Luogu P1501 [国家集训队]Tree II (LCT，多重标记)

    题意 一棵树,有删边加边,有一条链加/乘一个数,有询问一条链的和 分析 LCT,像线段树一样维护两个标记(再加上翻转标记就是三个),维护size,就行了 CODE #include<bits/s ...

  8. POJ1423 Big Number 暴力or斯特林公式？？

    好吧这题很水...可是我没想到正解... 题意:求n!有多少位. 正解:斯特林公式. 直接放代码... #include<cstdio> #include<iostream> ...

  9. Web上传大文件的解决方案

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  10. 【csp模拟赛4】 珠江夜游 (cruise.cpp)-二分，贪心

    Problem 1 珠江夜游 (cruise.cpp) [题目描述] 小 Z 放假后难得来一趟广州游玩,当然要吃遍广州各路美食小吃然后再 到珠江新城看看远近闻名的小蛮腰啦!可当小 Z 一路吃吃吃以后, ...