<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>datepickers</title>

    <meta charset="utf-8">

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>

    <div id="progressbar"></div>

    <button class="btn btn-success" id="test01">增加10%</button>

    <button class="btn btn-success" id="test02">100%</button>

    <button class="btn btn-success" id="test03">切换</button>

    <script>

      $(function() {

              var num = 0

            $( "#progressbar" ).progressbar({

              value: num

            });

           //点一次进度条增加10%

          $('#test01').on('click', function(){

              num = num+10

              console.log(num)

            $( "#progressbar" ).progressbar("value", num );

          })

          //进度条100%

          $('#test02').on('click', function(){

              $( "#progressbar" ).progressbar({

              value: 100

            })

          })

           //禁用和激活进度条

          $('#test03').on('click', function(){

              var is_disabled = $( "#progressbar" ).progressbar( "option", "disabled" );

              // alert(is_disabled);

              if(is_disabled){

                  $( "#progressbar" ).progressbar( "enable" );

                  $('#test03').html('禁用');

              }else{

                  $( "#progressbar" ).progressbar( "option", "disabled", true );

                  $('#test03').html('激活');

              }

          })

      } );

     </script>

</body>

</html>

jqueryui组件datepickers的使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>datepickers</title>

    <meta charset="utf-8">

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>

    <p>Date: <input type="text" id="datepicker"></p>

    <script>

      $( function() {

          $( "#datepicker" ).datepicker({

              //改变格式为yy-mm-dd

              dateFormat: "yy-mm-dd"

        })

      } );

     </script>

</body>

</html>

jqueryui组件progressbar进度条和日期组件datepickers的简单使用的更多相关文章

  1. progressbar进度条组件

    Progressbar 进度条组件 通过$.fn.progressbar.fn.defaults重写默认的defaults进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更 ...

  2. 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件

    jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...

  3. 第33讲 UI组件_进度条ProcessBar和消息队列处理器handler

    第33讲UI组件_进度条ProcessBar和消息队列处理器handler 1. 进度条ProcessBar 一个可视化的进度指示器,代表正在执行的耗时任务.可以为用户展示一个进度条,表示正在执行的任 ...

  4. 使用tqdm组件构造程序进度条

    使用tqdm组件构造程序进度条 觉得有用的话,欢迎一起讨论相互学习~Follow Me 主要代码 import tqdm # 引用tqdm组件 TRAIN_STEPS = N for i in tqd ...

  5. progress组件（进度条）

    progress组件:进度条 progress组件的属性: percent:类型:number 设置百分比 (0~100) show-info:类型:布尔 在进度条右侧显示百分比 border-rad ...

  6. EasyUI系列学习(八)-ProgressBar(进度条)

    一.创建组件 1.class加载 <div class="easyui-progressbar"></div> 2.js加载 <div id=&quo ...

  7. Android学习笔记- ProgressBar(进度条)

    本节引言: 本节给大家带来的是Android基本UI控件中的ProgressBar(进度条),ProgressBar的应用场景很多,比如 用户登录时,后台在发请求,以及等待服务器返回信息,这个时候会用 ...

  8. ProgressBar(进度条)、SeekBar(拖动条)与星级评分条(RatingBar)

    1.ProgressBar(进度条) (1)介绍 (2)常用属性 (3)xml代码 <ProgressBar android:id="@+id/progressBar2" s ...

  9. Qt Quick 常用元素：ComboBox(下拉列表) 与 ProgressBar(进度条)

    一.ComboBox ComboBox,即下拉列表框,由一个列表框和一个标签控件(或编辑控件)组成.ComboBox 的下拉列表是使用 Menu 实现的,列表内的每个条目对应一个 Menultem. ...

随机推荐

  1. Nginx 之六： Nginx服务器的正向及反向代理功能

    一:Nginx作为正向代理服务器: 1.正向代理:代理(proxy)服务也可以称为是正向代理,指的是将服务器部署在公司的网关,代理公司内部员工上外网的请求,可以起到一定的安全作用和管理限制作用,正向代 ...

  2. java的TCP和UDP编程

    TCP 客户端: import java.io.BufferedReader; import java.io.InputStreamReader; import java.io.PrintWriter ...

  3. docker 系列 - 容器数据持久化和数据共享

    docker 主要有两种数据存储形式, 一种是storage driver(也叫做 Graph driver), 另一种是 volume driver. stroage driver主要是存储那些无状 ...

  4. rabbitMQ学习1:消息队列介绍与rabbitmq安装使用

    1. 什么是消息队列 生活里的消息队列,如同邮局的邮箱, 如果没邮箱的话, 邮件必须找到邮件那个人,递给他,才玩完成,那这个任务会处理的很麻烦,很慢,效率很低 但是如果有了邮箱, 邮件直接丢给邮箱,用 ...

  5. Django的csrf中间件

    csrf中间件 ​ csrf 跨站请求伪造 ​ 补充两个装饰器: ​ from django.views.decorators.csrf import csrf_exempt,csrf_protect ...

  6. python 关于文件操作

    ,要求在文件 .py 第六行插入一句话: #cat /root/python/2.py 2 昨夜雨疏风骤1 3 昨夜雨疏风骤2 4 昨夜雨疏风骤3 5 昨夜雨疏风骤4 6 昨夜雨疏风骤5 7 昨夜雨疏 ...

  7. Rem自适应js---flexible.min.js

    网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应 ...

  8. 【译】第八篇 SQL Server安全数据加密

    本篇文章是SQL Server安全系列的第八篇,详细内容请参考原文. Relational databases are used in an amazing variety of applicatio ...

  9. 使用Docker部署javaWeb应用

    1. 安装Dcoker http://www.cnblogs.com/zhangqian27/p/9089815.html 2. 查看镜像 $ docker images 3. 搜索镜像 $ dock ...

  10. CentOS6.8合并DVD1和DVD2作为本地yum源

    转载自:http://www.study365.org/blog/45.html CentOS一般都会提供DVD1和DVD2两个镜像文件,形如CentOS-6.8-x86_64-bin-DVD1.is ...