李炎恢_PHP_jQuery EasyUI[008] ~ ProgressBar(進度條)元件
李炎恢_PHP_jQuery EasyUI[008] ~ ProgressBar(進度條)元件
參考資料: https://github.com/jash-git/jash-WebSI
GITHUB: https://github.com/jash-git/richie_jQuery_EasyUI
My code:
$(function () {
//$.fn.progressbar.defaults.value = 30;
$('#box').progressbar({
width : 400,
height : 30,
value : 30,
text : '{value}%',
onChange : function (newValue, oldValue) {
console.log('新:' + newValue + ',旧:' + oldValue);
},
});
//settimeout() jquery從載入後延遲指定的時間去執行一個表示式或者是函式;僅執行一次 ;和window.clearTimeout一起使用.
setTimeout(function () {
$('#box').progressbar('setValue', 70);
}, 1000);
//setInterval() jquery可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。
setInterval(function () {
if($('#box').progressbar('getValue')<95)
$('#box').progressbar('setValue', $('#box').progressbar('getValue') + 5);
}, 500);
//console.log($('#box').progressbar('options'));
//$('#box').progressbar('resize', 600);
});
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="../../easyui_15/jquery.min.js"></script> <script type="text/javascript" src="../../easyui_15/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../easyui_15/locale/easyui-lang-zh_TW.js" ></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="../../easyui_15/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="../../easyui_15/themes/icon.css" /> </head> <body style="margin:100px;"> <!-- <div class="easyui-progressbar" data-options="value:60" style="width:400px"></div> --> <div id="box"></div> </body> </html>
PDF:
執行結果:
