zoukankan      html  css  js  c++  java
  • jquery ui progressbar简单使用deom

    jquery api 和下载: http://api.jqueryui.com/progressbar/#option-value


    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Progressbar - Indeterminate Value</title>
     
       <link rel="stylesheet" href="jquery-ui.css" />
        <script src="jquery-1.8.3.js"></script>
        <script src="jquery-ui.js"></script>
    	
      
    	<script >
       $(function() {
        $( "#progressbar" ).progressbar({
          value: false
        });
        $( "button" ).on( "click", function( event ) {
          var target = $( event.target ),
            progressbar = $( "#progressbar" ),
            progressbarValue = progressbar.find( ".ui-progressbar-value" );
     
          if ( target.is( "#numButton" ) ) {
            progressbar.progressbar( "option", {
              value: Math.floor( Math.random() * 100 )
            });
          } else if ( target.is( "#colorButton" ) ) {
            progressbarValue.css({
              "background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
            });
          } else if ( target.is( "#falseButton" ) ) {
    	    alert('dd');
            progressbar.progressbar( "option", "value", 50 );
          }
        });
      });
      </script>
      <style>
      #progressbar .ui-progressbar-value {
        background-color: #ccc;
      }
      </style>
    </head>
    <body>
    
    
     
    <div id="progressbar"></div>
    <button id="numButton">Random Value - Determinate</button>
    <button id="falseButton">Indeterminate</button>
    <button id="colorButton">Random Color</button>
    
    
     
    </body>
    </html>


  • 相关阅读:
    2021总结、2022展望
    新人报到
    第六次实验
    第五次实验
    第一次实验
    第三次实验
    第二次实验
    第四次实验
    实验七
    Tomcat10巨坑,软件不是越新越好。(用到tomcat9及以下就可以)
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/6881429.html
Copyright © 2011-2022 走看看