jquery ui progressbar简单使用deom
2015-03-17 11:26
399 查看
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 BlockUI
- j2ee 简单网站搭建:(九)jquery datatables + jquery ui dialog 插件使用入门
- Jquery esay ui datagrid formatter属性简单使用
- [转]WeiFenLuo.winFormsUI.Docking.dll的使用(简单入门版)
- 使用JQuery blockUI插件示例(加载数据时使用相当于updateprogress)
- jQuery 图像裁剪插件Jcrop的简单使用
- jQuery 图像裁剪插件Jcrop的简单使用
- jQuery Slider UI使用
- jQuery UI AutoComplete 自动完成使用小记
- Jquery最简单的使用举例
- Jquery UI tab 使用注意
- jQuery 兼容ie6的固定定位插件,使用简单
- jquery 验证插件的简单入门使用
- jQuery UI AutoComplete 使用小记
- jQuery文字高亮插件,使用简单,功能强大,支持FF/IE等主流浏览器
- jQuery的图像裁剪插件Jcrop的简单使用
- 学习新事物:使用jquery+xml实现ajax简单实例
- 使用jQuery操作简单的JSON数据
- jQuery 兼容ie6的固定定位插件,使用简单