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. java基础之吃货联盟

    因为用的是普通数组,所以编写的代码可能比较长,而且有的功能还比较不健全,代码如下: 0.定义数组(因为用static修饰可以不用New,比较方便,但可能比较损耗性能) //订餐人名字 static S ...

  2. CF126B Password

    思路: kmp略作修改. 实现: #include <iostream> #include <cstdio> using namespace std; ; int neXt[M ...

  3. input获得焦点和失去焦点

    总结:placeholder因为在IE7 8 9 浏览器不支持所以没用它效果:当input获取光标的时候如果是默认提示则input内容为空.如果不是则为输入内容           当失去光标的时候, ...

  4. Android开发高手课笔记 - 01 崩溃优化（上）：关于“崩溃”那点事

    Android 的两种崩溃 Java 崩溃就是在 Java 代码中,出现了未捕获的异常,导致程序异常退出 Native 崩溃一般都是因为在 Native 代码中访问非法地址,也可能是地址对齐出了问题, ...

  5. 高级Java知识

    高级Java知识(JVM.字节码.内存模型) 内存=方法区+栈空间+堆+程序计数器 栈(stack)包括虚拟机栈(VM stack)和本地方法栈(native method stack). 方法区(m ...

  6. html5——表单

    type类型 email //输入email格式 tel //手机号码 url //只能输入url格式 number //只能输入数字 search //搜索框 range //范围 滑动条 colo ...

  7. React-Native WebView动态加载字体

    背景 使用react-native构建的iOS/Android双端APP,通过WebView加载本地页面,需要根据服务器提供的字体列表实现下载和动态加载. 本地字体检查 有些字体手机操作系统已经提供了 ...

  8. dubbo之配置规则

    配置规则 向注册中心写入动态配置覆盖规则 1.该功能通常由监控中心或治理中心的页面完成. RegistryFactory registryFactory = ExtensionLoader.getEx ...

  9. SSL&TLS传输层加密协议实现图解--(重要)

    一.SSL&TLS 1.SSL:Secure Sockets Layer ,加密套接字协议层 1)SSL是为网络通信提供安全及数据完整性的一种安全协议,在传输层对网络连接进行加密 Secure ...

  10. tbType和TypeList操作

    tbType查询数据库后 获得一个DataTable的数据表 数据表是写在内存里面的 可以在这个项目的其他地方去访问它,由于在内存里面 所以访问速度很快 用代码获取它的哪一行的数据供使用 例如 tbB ...