1. 程式人生 > >easyui 進度條(ProgressBar)

easyui 進度條(ProgressBar)

Create ProgressBar

The ProgressBar component can be created from html markup or programatically. Creation from markup is even easier. Add 'easyui-progressbar' class to <div/> markup.

  1. <div id="p" class="easyui-progressbar" style="width:400px;"></div>  

Get or Set Value

We get the current value and set a new value for this component.

  1. var value = $('#p').progressbar('getValue');  
  2. if (value < 100){  
  3.     value += Math.floor(Math.random() * 10);  
  4.     $('#p').progressbar('setValue', value);  
  5. }  

Properties

Name Type Description Default
width string Set the progressbar width. auto
value number The percentage value. 0
text string The text template to be displayed on component. {value}%

Events

Name Parameters Description
onChange newValue,oldValue Fires when the value is changed.

Methods

Name Parameter Description
options none Return the options object.
resize width Resize the component.
getValue none Return the current progress value.
setValue value Set a new progress value.