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>
jquery ui progressbar简单使用deom的更多相关文章
- Jquery ui autocomplete简单api
重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...
- jQuery UI 入门之实用实例分享
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- jQuery UI 入门之实用实例
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- jquery ui的css设计
jquery ui 是当前最强大的UI库之一,其两大卖点是对IE6的良好支持与换肤功能.为了构建avalon ui,今天起我将投入一部分精力来研究时下最流行的几个CSS框架.它是首当其冲. jquer ...
- 创建一个jQuery UI的垂直进度条效果
日期:2013-9-24 来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...
- jquery ui 怎么实现tab标签切换效果
1.效果图 2.HTML 代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
- jQuery UI简单的讲解
我们先进入一下问答时间,你都知道多少呢? (1)什么是jQuery UI 呢? 解答:jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互. ...
- 使用 jQuery UI Widget Factory 编写有状态的插件（Stateful Plugins）
使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) Note 这一章节的内容是基于 Scott Gonzalez 一篇博客 Building ...
- jQuery 使用 jQuery UI 部件工厂编写带状态的插件（翻译）
首先,我们要创建一个progress bar,它只允许我们简单的设置进度值.正如我们接下来将要看到的,我们需要通过调用 jQuery.widget 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...
随机推荐
- websocket的原理
首先明确几点: 1. websocket是一种协议.是html5的一种新协议: 2. 与http的区别是,它是一种双向通信协议,服务器和客户端都能主动向对方发送或接受数据: 3. websocket需 ...
- SQL基本操作——约束
我们将主要探讨以下几种约束: 1.NOT NULL 2.UNIQUE 3.PRIMARY KEY 4.FOREIGN KEY 5.CHECK 6.DEFAULT SQL NOTNULL约束:NOT N ...
- PHP7安装Memcache+Memcached缓存加速WordPress教程
PHP7安装Memcache+Memcached缓存加速WordPress教程 2016年1月19日 6,691 Views 生活方式 PHP7最显著的变化就是性能的极大提升,已接近Facebook开 ...
- java主要集合类的数据结构
1).ArrayList ArrayList维护着一个对象数组.如果调用new ArrayList()后,它会默认初始一个size=10的数组. 每次add操作都要检查数组容量,如果不够,重新 ...
- C# invoke和begininvoke的用法
namespace invoke和begininvoke的用法 { public partial class Form1 : Form { public Form1() { InitializeCom ...
- mstsc windows7/10远程桌面身份验证错误 要求的函数不受支持
之前好好的能远程桌面连接到服务器,但是今天来就不能连接上了,并提示:身份验证错误.要求的函数不受支持. 猜想可能是Windows又更新了什么鬼,后面查询资料知道是由于CredSSP加密Oracle修正 ...
- 控制台输出(System.out.printf)的使用
一． 介绍 System.out.printf 与 C语言中的 printf 使用方法类似,可以向控制台(Console) 输出指定格式的内容.使用 System.out.printf 的方法比使 ...
- ES6学习历程(变量的解构赋值)
一.数组的解构赋值 1.举几个例子足以理解 let [a, b, c] = [1, 2, 3]; a:1; b:2; c:3; let [x, , y] = [1, 2, 3]; x:1 y ...
- Spring MVC 笔记 概述
学习笔记 模型:封装装程序数据 视图:渲染模型数据,一般来说就是输出HTML 控制:处理请求,构建模型并将其传递给视图进行渲染 以上三者均围绕DispatcherServlet设计,它处理所有的HTT ...
- Eclipse中使用struts标签时出错
原因是Action和ActionForm对应文件中没有继承相应的类,具体来说: ActionForm的编写: 必须继承org.apache.struts.action.ActionForm Actio ...