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. MySQL的DML和DQL 增删改查

    DML和DQL   增删改查 SELECT * FROM grade --新增 insert -- 向年级表中新增3条数据INSERT INTO grade(gradeID,gradeName) VA ...

  2. Spring Boot (23) Lettuce Redis

    Spring Boot除了支持常见的ORM框架外,更是对常用的中间件提供了非常好的封装,随着SpringBoot2.x的到来,支持的组件也越来越丰富,也越来越成熟,其中对Redis的支持不仅仅是它丰富 ...

  3. js中添加node.js语法支持

    File——>settings

  4. 基于TensorFlow的车牌号识别系统

    简介 过去几周我一直在涉足深度学习领域,尤其是卷积神经网络模型.最近,谷歌围绕街景多位数字识别技术发布了一篇不错的paper.该文章描述了一个用于提取街景门牌号的单个端到端神经网络系统.然后,作者阐述 ...

  5. cms判断写法

    cms比较容易写出循环的网页内容,对于有些循环的网页内容有不同css设定,这样在写cms时需要对循环做出条件判断:{if 判断条件}输出内容{else}输出内容{/if}.通过判断可以实现图片轮播效果 ...

  6. jQuery——开关灯

    js对象与jquery对象的相互转化: 1.$(js对象) 2.$(selector).get(索引).$(selector)[索引] <!DOCTYPE html> <html l ...

  7. ASP.net参数传递总结

    同一页面.aspx与.aspx.cs之间参数传递 1. .aspx.cs接收.aspx的参数:由于.aspx和.aspx.cs为继承关系,所以.aspx.cs可以直接对.aspx中的ID进行值提取,具 ...

  8. 【译】x86程序员手册11- 4.1系统寄存器

    4.1 Systems Registers 系统寄存器 The registers designed for use by systems programmers fall into these cl ...

  9. 【sqli-labs】 less48 GET -Error based -Blind -Numeric -Order By Clause(GET型基于盲注的整型Order By从句注入)

    图片还是47...访问的的确是48 这个是基于bool的盲注 http://192.168.136.128/sqli-labs-master/Less-48/?sort=1 and sleep(0.1 ...

  10. IOS内购--后台PHP认证

    参考网址:https://blog.csdn.net/que_csdn/article/details/80861408 http://www.php.cn/php-weizijiaocheng-39 ...