當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

EasyUI中进度条的简单使用

發布時間：2025/3/19 编程问答 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 EasyUI中进度条的简单使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

場景

效果

屬性

名稱類型描述默認值

width	string	設置進度條（progressbar）的寬度。	auto
height	number	組件的高度。該屬性自版本 1.3.2 起可用。	22
value	number	百分比值。	0
text	string	顯示在組件上的文本模板。	{value}%

事件

名稱參數描述

onChange

newValue,oldValue

當值改變時觸發。
代碼實例：

$('#p').progressbar({

onChange: function(value){

alert(value)

}

});

方法

名稱參數描述

options	none	返回選項（options）對象。
resize	width	調整組件尺寸。代碼實例： $('#p').progressbar('resize'); // 調整進度條為初始寬度 $('#p').progressbar('resize', 350); // 調整進度條為一個新的寬度
getValue	none	返回當前的進度值。
setValue	value	設置一個新的進度值。

實現

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>進度條</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div> <input type="button" value="開始" onclick="start()"> <script type="text/javascript">function? start() {var value=$("#p").progressbar("getValue");$("#p").progressbar("setValue",value+10);} </script> </body> </html>

總結

以上是生活随笔為你收集整理的EasyUI中进度条的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SpringBoot+Jquery实现前
下一篇： EasyUI中分页的简单使用