[轉]jQuery加載進度插件 - Percentage Loader

轉自[url=http://site518.net]給力技術[/url] [url=http://site518.net/jquery-percentage-loader/]超給力的jQuery加載進度插件 - Percentage Loader[/url]

　　[url=http://site518.net/jquery-percentage-loader/]Percentage Loader[/url] 是一個基於 [url=http://site518.net/tag/jquery-2/]jQuery[/url] 開發的加載進度(百分比顯示)插件，它有着非常吸引人眼球的外觀，也非常易於使用。它也用到了目前很熱門的 HTML5 canvas 技術，只要是支持 [url=http://site518.net/tag/html5/]HTML5[/url] 的瀏覽器都能運行此插件。如果你正好在尋找這樣的插件，那麼 [url=http://site518.net/jquery-percentage-loader/]Percentage Loader[/url] 會是一個相當不錯的選擇。
如何使用

　　首先引入 jQuery 框架和 Percentage Loader 插件的相關文件

<script src="jquery.min.js"></script>
<script src="jquery.percentageloader.min.js"></script>
<link rel="stylesheet" href="jquery.percentageloader.css"/>

　　然後在 HTML 頁面的 body 中放置如下代碼，用於展現加載進度

<div id="topLoader"></div>

　　之後就可以對它進行初始化了，可以使用 .setProgress() 和 .setValue() 來更新它的值，再借助 onProgressUpdate 這個回調方法就可以實現進度加載的動態效果

var $loader = $("#topLoader").percentageLoader({
width: 256,
height: 256,
controllable: true,
progress: 0.5,
onProgressUpdate: function (val) {
$loader.setValue(val * 100.0);
}
});

[url=http://site518.net/demo/jqloader/demo.htm]查看演示[/url]