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>

jquery ui progressbar简单使用deom的更多相关文章

  1. Jquery ui autocomplete简单api

    重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...

  2. jQuery UI 入门之实用实例分享

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  3. jQuery UI 入门之实用实例

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  4. jquery ui的css设计

    jquery ui 是当前最强大的UI库之一,其两大卖点是对IE6的良好支持与换肤功能.为了构建avalon ui,今天起我将投入一部分精力来研究时下最流行的几个CSS框架.它是首当其冲. jquer ...

  5. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  6. jquery ui 怎么实现tab标签切换效果

    1.效果图 2.HTML 代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  7. jQuery UI简单的讲解

    我们先进入一下问答时间,你都知道多少呢? (1)什么是jQuery UI 呢? 解答:jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互. ...

  8. 使用 jQuery UI Widget Factory 编写有状态的插件（Stateful Plugins）

    使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) Note 这一章节的内容是基于 Scott Gonzalez 一篇博客 Building ...

  9. jQuery 使用 jQuery UI 部件工厂编写带状态的插件（翻译）

    首先,我们要创建一个progress bar,它只允许我们简单的设置进度值.正如我们接下来将要看到的,我们需要通过调用 jQuery.widget 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...

随机推荐

  1. html基础代码演示2

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. 334 Increasing Triplet Subsequence 递增的三元子序列

    给定一个未排序的数组,请判断这个数组中是否存在长度为3的递增的子序列.正式的数学表达如下:    如果存在这样的 i, j, k,  且满足 0 ≤ i < j < k ≤ n-1,    ...

  3. 安装office1406错误！！！急死个人。。。。。

    因为用到Microsoft.Office.Interop.Word,将word转PDF.所以在服务器上需要安装office,但是报错1406,不能将值插入注册表..... 然后百度各种问题,说需要将注 ...

  4. Razor的使用

    Razor可以识别尖括号,且关键词是@,默认情况下会对输出的html代码进行转义 1.C#代码 用 @ 加 中括号 包起来 @{ ; i < ; i++) { <h3>C#语句块要用 ...

  5. java定时器和实时查询数据库

    定时器: Timer timer = new Timer();                    timer.schedule(new TimerTask() {                  ...

  6. Java继承体系中this的表示关系

    在继承关系下,父类中的this关键字并不总是表示父类中的变量和方法.this关键字的四种用法如前文所述,列举如下. 1) this(paras…); 访问其他的构造方法 2) this.xxx; 访问 ...

  7. JS——this与new

    this: 1.this只出现在函数中 2.谁调用函数,this就指的是谁 3.new People的this指的就是被创建的对象实例 new: 1.开辟内存空间,存储新创建的对象 2.把this设置 ...

  8. JS——标记

    continue 语句(带有或不带标签引用)只能用在循环中.break 语句(不带标签引用),只能用在循环或 switch 中.通过标签引用,break 语句可用于跳出任何 JavaScript 代码 ...

  9. spring 将配置文件中的值注入 属性

    1.编写配置文件 #债权转让 #默认周期 必须大于0 credit.defaultDuration=1 #最小转让金额(元) credit.minBidAmount=1.00 #最小转让时间 到期时间 ...

  10. JavaScript面试题链接汇总

    最新JavaScript笔试题(含答案) - 爱思资源网 前端工程师面试问题列表 - 爱思资源网 腾讯最新前端面试题记录分享 - 爱思资源网 优酷前端JS部分面试题 - 爱思资源网 百度校园招聘web ...