Easyui Series Learning (eight)-progressbar (progress bar)

First, create the component

1.class loading

<class= "Easyui-progressbar"></div>

2.js loading

<DivID= "PB"></Div><Script>    $(function () {        $("#pb"). ProgressBar (); })</Script>

Second, the attribute

<DivID= "PB"></Div><Script>    $(function () {        $("#pb"). ProgressBar ({//progress bar width, default autoWidth:" -",            //progress bar height, default toHeight: -,            //progress bar value, default is 0Value: -,            //set the progress bar percent templateText:"{value}%"        }); })</Script>

The generated HTML

<DivID= "PB"class= "ProgressBar"style= "width:398px; height:28px;">    <Divclass= "Progressbar-text"style= "width:398px; height:28px; line-height:28px;">60%</Div>    <Divclass= "Progressbar-value"style= "width:60%; height:28px; line-height:28px;">        <Divclass= "Progressbar-text"style= "width:398px; height:28px; line-height:28px;">60%</Div>    </Div></Div>

III. Events

OnChange: Triggered when a value is changed

<DivID= "PB"></Div><Script>    $(function () {        $("#pb"). ProgressBar ({value: -, OnChange:function(NewValue, OldValue) {Console.log ("NEW:" +NewValue+ ", old:" +oldValue);        }        }); SetTimeout (function () {            $("#pb"). ProgressBar ("SetValue",  -); },  +); SetInterval (function () {            $("#pb"). ProgressBar ("SetValue", $("#pb"). ProgressBar ("GetValue") + 5); },  +); })</Script>

Iv. methods

1.options

<DivID= "PB"></Div><Script>    $(function () {        $("#pb"). ProgressBar ({}); Console.log ($ ("#pb"). ProgressBar ("Options")); })</Script>

Results of the output

2.resize

<DivID= "PB"></Div><Script>    $(function () {        $("#pb"). ProgressBar ({value: -        }); //Set Component Length        $("#pb"). ProgressBar ("Resize", " -"); })</Script>

3.getvalue,setvalue

V. Setting default values

$.fn.progressbar.defaults.value = 60;

Easyui Series Learning (eight)-progressbar (progress bar)