jqueryui组件progressbar进度条和日期组件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>
    <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>

 

posted @ 2018-02-27 18:04  reblue520  阅读(246)  评论(0)  编辑  收藏  举报