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. 巧用Eclipse Java编辑器调试

    在使用Eclipse开发Java Web应用时,使用的编辑器不但能够为开发者提供代码编写.辅助提示和实时编译等常用功能,而且还能够对Java源代码进行快捷修改.重构和语法纠错等高级操作.通过Eclip ...

  2. elasticsearch——海量文档高性能索引系统

    elasticsearch elasticsearch是一个高性能高扩展性的索引系统,底层基于apache lucene. 可结合kibana工具进行可视化. 概念: index 索引: 类似SQL中 ...

  3. JS——预解析

    1.排查语法错误 <script> console.log(1; </script> 2.变量提升和函数整体提升 <script> console.log(n1); ...

  4. （转）Struts2的拦截器

    http://blog.csdn.net/yerenyuan_pku/article/details/68648101 Struts2的拦截器 拦截器的概述 拦截器,在AOP(Aspect-Orien ...

  5. 大神所写的深度好文---Gradle 构建工具

    什么是构建工具? 我们大家都知道 Gradle 是一种构建工具,那么什么是构建工具呢? 网上一大堆的文字解释我觉得很难理解,这里我以咱们 Android 开发来举个例子吧. 我们以前开发都是用 Ecl ...

  6. 让System.Drawing.Bitmap可以在linux运行

    .net core的bitmap使用的是以下类库,但无法在linux运行 https://github.com/CoreCompat/CoreCompat 在linux运行需要安装runtime.li ...

  7. CAD当前选择实体发生变化调用事件（com接口）

    主要用到函数说明: _DMxDrawXEvents::SelectModified 当前选择实体发生变化,会调用该事件,详细说明如下: 参数 说明 IDispatch* pAryId 当前被选择的实体 ...

  8. 1 WebService 常见问题

    <binding name="> <readerQuotas maxStringContentLength=" /> </binding> &l ...

  9. 四、Spider用法

    本文转载自以下链接: https://scrapy-chs.readthedocs.io/zh_CN/latest/topics/spiders.html https://doc.scrapy.org ...

  10. 让TP5.0在SWOOLE上飞起来

    TP-SWOOLE 目前,TP5.1官方已经提供了think-swoole2.0,集成程度以前优雅很多,不过5.0的集成方式确实有些鸡肋.所以看了下2.0,为5.0开发了一个扩展包,可以采用compo ...