A visual indicator depicting progress.

• Set Progressbar position to 75
• Set Progressbar position to 20
• Disable
• Enable

Source Code

<ul class="operations">
  <li><a href="#" on="click then l:m.setProgressbar75">Set Progressbar position to 75</a></li>
  <li><a href="#" on="click then l:m.setProgressbar20">Set Progressbar position to 20</a></li>			
  <li><a href="#" on="click then l:m.disable">Disable</a></li>
  <li><a href="#" on="click then l:m.enable">Enable</a></li>
</ul>
<div control="jquery_progressbar[value=20]" id="myProgressbar1" 
  on="l:m.setProgressbar75 then value[75]
    or l:m.setProgressbar20 then value[20]
    or l:m.disable then disable
    or l:m.enable then enable">
</div>

In this sample, a slider with the name of 'myProgressbar' is created. The function argument of createControl is called when the widget renders.

Create the control and call a function to set the initial value…

App.createControl(
	'myProgressbar', 
	'jquery_progressbar', 
	{
	},
	function() {
		this.value(20);
	}
);

Get the handle to an instance of the control…

App.getControl('myProgressbar', 'jquery_progressbar', function() {
 
	this.disable();
 
});

The progressbar control is made up of a single div. The control tag on the div indicates what kind of widget the div will become. The widget identity can accept the following initial parameters…

Initial options supported by the widget.

Actions accept the same argument types as their equivalent functions.