Jquery Easyui進(jìn)度條組件Progress使用詳解(8)
本文實(shí)例為大家分享了Jquery Easyui進(jìn)度條組件的實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
加載方式
Class加載
<div class="easyui-progressbar" data-options="value:60" style="width:400px;"> </div>
JS調(diào)用加載
<div id="box" style="width: 400px;"></div> <script> $(function () { $('#box').progressbar({ // 設(shè)置進(jìn)度條寬度 width : '200', // 設(shè)置進(jìn)度條高度 height : '100', //設(shè)置進(jìn)度條值 value : '60', // 設(shè)置進(jìn)度條百分比模版 text: '百分之{value}' }); }); </script>
屬性列表
事件列表
<script> $(function () { $('#box').progressbar({ // 設(shè)置進(jìn)度條寬度 width : '200', // 設(shè)置進(jìn)度條高度 height : '100', //設(shè)置進(jìn)度條值 value : '60', // 設(shè)置進(jìn)度條百分比模版 text: '百分之{value}', // 在值更改的時(shí)候觸發(fā) onChange:function (newValue,oldValue) { console.log("新值:"+newValue); console.log("舊值:"+oldValue); }, }); }); </script>
方法列表
<script> $(function () { $('#box').progressbar({ value : '40', onChange : function (newValue, oldValue) { console.log('新:' + newValue + ',舊:' + oldValue); }, }); // 返回屬性對(duì)象 console.log($('#box').progressbar('options')); // 設(shè)置組件大小(寬度) $('#box').progressbar('resize','500'); // 返回當(dāng)前進(jìn)度值 console.log($('#box').progressbar('getValue')); // 設(shè)置一個(gè)新的進(jìn)度值 $('#box').progressbar('setValue','50'); // 可以使用$.fn.progressbar.defaults 重寫默認(rèn)值對(duì)象。 $.fn.progressbar.defaults.value = '60'; }); </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery EasyUI API 中文文檔 - ProgressBar 進(jìn)度條
- jQuery EasyUI ProgressBar進(jìn)度條組件
- jquery 簡(jiǎn)單的進(jìn)度條實(shí)現(xiàn)代碼
- 6款新穎的jQuery和CSS3進(jìn)度條插件推薦
- 分享8款優(yōu)秀的 jQuery 加載動(dòng)畫和進(jìn)度條插件
- 基于HTML5 Ajax文件上傳進(jìn)度條如何實(shí)現(xiàn)(jquery版本)
- Javascript jquery css 寫的簡(jiǎn)單進(jìn)度條控件
- jQuery實(shí)現(xiàn)文件上傳進(jìn)度條特效
- Jquery進(jìn)度條插件 Progress Bar小問(wèn)題解決
- jQuery監(jiān)聽文件上傳實(shí)現(xiàn)進(jìn)度條效果的方法
- jQuery簡(jiǎn)單實(shí)現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進(jìn)度條的方法
- jquery-ui 進(jìn)度條功能示例【測(cè)試可用】
相關(guān)文章
快速實(shí)現(xiàn)jQuery多級(jí)菜單效果
這篇文章主要教大家如何快速實(shí)現(xiàn)jQuery多級(jí)菜單效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02JQuery 簡(jiǎn)便實(shí)現(xiàn)頁(yè)面元素?cái)?shù)據(jù)驗(yàn)證功能
JQuery 簡(jiǎn)便實(shí)現(xiàn)頁(yè)面元素?cái)?shù)據(jù)驗(yàn)證功能...2007-03-03jQuery固定浮動(dòng)側(cè)邊欄實(shí)現(xiàn)思路及代碼
如果頁(yè)面比較高,當(dāng)滾動(dòng)條拖到頁(yè)面的下面的時(shí)候,側(cè)邊欄會(huì)出現(xiàn)一個(gè)固定跟隨瀏覽器的DIV框,下面將思路及具體實(shí)現(xiàn)與大家分享下2014-09-09載入jQuery庫(kù)的最佳方法詳細(xì)說(shuō)明及實(shí)現(xiàn)代碼
網(wǎng)站開發(fā)的項(xiàng)目中使用Google CDN的jQuery庫(kù)雖然加載速度很快,但調(diào)用本地服務(wù)器的庫(kù)才可以確保萬(wàn)無(wú)一失,接下來(lái)介紹載入jQuery庫(kù)的最佳方法,感興趣的朋友可以研究下2012-12-12用jquery中插件dialog實(shí)現(xiàn)彈框效果實(shí)例代碼
這篇文章介紹了jquery中插件dialog實(shí)現(xiàn)彈框效果實(shí)例代碼,有需要的朋友可以參考一下2013-11-11