jqueryui组件progressbar进度条和日期组件datepickers的简单使用

最新推荐文章于 2020-12-06 22:47:14 发布

weixin_33946020

最新推荐文章于 2020-12-06 22:47:14 发布

阅读量73

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/reblue520/p/8480244.html

版权

<!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>

转载于:https://www.cnblogs.com/reblue520/p/8480244.html

weixin_33946020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqueryui组件progressbar进度条和日期组件datepickers的简单使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>datepickers</title> <meta charset="utf-8"> <link rel="stylesh...
复制链接

扫一扫