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 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...
随机推荐
- JSP所需要掌握的部分
JSP基本语法 指令 <%@ 指令%> JSP指令是JSP的引擎 主要的两种指令是page和include(taglib) <%@ page import="java.ut ...
- [转]HTML5 Day 4: Add Drop Down Menu to ASP.NET MVC HTML5 Template using CSS and jQuery
本文转自:http://pietschsoft.com/post/2010/11/17/HTML5-Day-4-Add-DropDown-Menu-ASPNET-MVC-HTML5-Template- ...
- iis设置404错误页，返回500状态码
一般在II6下,设置自定义404错误页时,只需要在错误页中选择自定义的页面,做自己的404页面即可.但是在IIS7.0及以上时,设置完404错误页后,会发现状态码返回的是500,并且可能会引起页面乱码 ...
- html5——动画案例（无缝滚动）
无缝滚动:是两组拼在一起的 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- DOS批处理命令-字符串操作
1.字符串替换 语法结构:%变量名:替换前=替换后% @set str=teh cat in teh hat @echo %str% @set str=%str:teh=the% @echo %str ...
- The Standard SSL Handshake
The following is a standard SSL handshake when RSA key exchange algorithm is used: 1. Client Hello ...
- Haproxy 【转载】
一.HAProxy简介 (1)HAProxy 是一款提供高可用性.负载均衡以及基于TCP(第四层)和HTTP(第七层)应用的代理软件,支持虚拟主机,它是免费.快速并且可靠的一种解决方案. HAProx ...
- 手把手从python安装到setuptools、pip工具安装
一.python安装1.基础开发库 apt-get install gccapt-get install openssl libssl-dev 2.安装数据库和开发库 apt-get install ...
- 针对mdadm的RAID1失效测试
背景 对软RAID(mdadm)方式进行各个场景失效测试. 一.初始信息 内核版本: root@omv30:~# uname -a Linux omv30 4.18.0-0.bpo.1-amd64 # ...
- 6.3.3 使用 shelve 模块操作二进制文件
Python标准库shelve也提供了二进制文件操作的功能,可以像字典赋值一样来写入二进制文件,也可以像字典一样读取二进制文件,有点类似于NoSQL数据库MongoDB. import shelve ...