diff options
Diffstat (limited to 'demos/quickstart/protected/pages/JuiControls')
16 files changed, 580 insertions, 0 deletions
diff --git a/demos/quickstart/protected/pages/JuiControls/Home.page b/demos/quickstart/protected/pages/JuiControls/Home.page new file mode 100644 index 00000000..2573b162 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Home.page @@ -0,0 +1,85 @@ +<com:TContent ID="body" > +<h1>Jui Controls (jQuery UI)</h1> +<p class="block-content"> +Jui controls are the PRADO port of the standard <a href="http://jqueryui.com/">jQuery UI</a> widgets. They can be used as standard <a href="?page=ActiveControls.Introduction">Active Controls</a>, but will automatically load the needed jQuery-UI javascript libraries. +</p> +<h3>Options</h3> +<p class="block-content"> +The <tt>Options</tt> property of PRADO Jui controls is used to pass options to the underlying javascript object. Each subproperty set on <tt>Options</tt> will be translated to a javascript property added to the object. The complete list of options available for each widget is availble at jQuery-UI's API Documentation. +</p> + +<h4>Example</h4> +<p class="block-content"> +jQuery-UI's <a href="http://jqueryui.com/resizable/">Resizable</a> adds an handle to a target element making it resizable. Its PRADO counterpart is <a href="?page=JuiControls.Interactions#TJuiResizable">TJuiResizable</a>. Resizable offers an <a href="http://api.jqueryui.com/resizable/#option-aspectRatio">aspectRatio</a> property to constrain the aspect ratio of the target element. The same property can be applied to TJuiResizable as a subproperty of the <tt>Options</tt> property: +</p> +<com:TTextHighlighter Language="php" CssClass="source block-content"> + <com:TJuiResizable + ID="resize1" + Options.aspectRatio="true" + // Additional options being set + Options.maxHeight="250" + Options.maxWidth="350" + Options.minHeight="150" + Options.minWidth="200" + /> +</com:TTextHighlighter> + +<h3>Events</h3> +<p class="block-content"> +jQuery-UI widgets offers a lot of events that PRADO can hook up and trasmit to the serverside using a <a href="?page=ActiveControls.Introduction">callback request</a>. Event available for PRADO Jui controls inherits their names from their jQuery-UI counterparts, prefixed with "On". +Jui controls doesn't make use of the AutoPostback property anymore, but only triggers a callback when an event handler is associated to the corresponding event. +</p> + +<h4>Example</h4> +<p class="block-content"> +jQuery's <a href="http://jqueryui.com/draggable/">Draggable</a> allows a target element to the moved using the mouse. Its PRADO counterpart is <a href="?page=JuiControls.Interactions#TJuiDraggable">TJuiDraggable</a>. Draggable exposes two useful events: <a href="http://api.jqueryui.com/draggable/#event-start">start</a> and <a href="http://api.jqueryui.com/draggable/#event-stop">stop</a>, that gets triggered respectively when the element starts to move and when the movement stops. TJuiDraggable exposes these same events: +</p> +<com:TTextHighlighter Language="php" CssClass="source block-content"> + <com:TJuiDraggable + ID="drag1" + OnStart="drag1_start" + OnStop="drag1_stop" + /> +</com:TTextHighlighter> + +<h2>PRADO Jui interactions controls</h2> +<p class="block-content"> +Jui interactions adds basic mouse-based interactions to elements like moving, resizing or sorting. PRADO Jui interactions controls applies there interactions to a <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> +For informations of the specific options of each interaction, follow jQuery-UI Interaction <a href="http://api.jqueryui.com/category/interactions/">API Documentation</a> for the specific interaction. +</p> +<ul id="u1" class="block-content"> + <li> + <a href="?page=JuiControls.Interactions#TJuiDraggable">TJuiDraggable</a> + is an element that can be moved using the mouse. + </li> + + <li> + <a href="?page=JuiControls.Interactions#TJuiDroppable">TJuiDroppable</a> + is an area where TJuiDraggable elements can be released. + </li> + + <li> + <a href="?page=JuiControls.Interactions#TJuiResizable">TJuiResizable</a> + is an element that cna be resized using the mouse. + </li> + + <li> + <a href="?page=JuiControls.Interactions#TJuiSelectable">TJuiSelectable</a> + displays a list of elements that can be selected individually. + </li> + + <li> + <a href="?page=JuiControls.Interactions#TJuiSortable">TJuiSortable</a> + displays a list of elements that can be selected individually. + </li> +</ul> + +<h2>PRADO Jui widgets controls</h2> +<ul id="u2" class="block-content"> + <li> + <a href="?page=JuiControls.Widgets#TJuiProgressbar">TJuiProgressbar</a> + displays a progress bar. + </li> +</ul> + +</com:TContent> diff --git a/demos/quickstart/protected/pages/JuiControls/Interactions.page b/demos/quickstart/protected/pages/JuiControls/Interactions.page new file mode 100644 index 00000000..2b48da68 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Interactions.page @@ -0,0 +1,83 @@ +<com:TContent ID="body"> +<h1>Jui interactions controls</h1> +<p class="block-content"> +Jui interactions adds basic mouse-based interactions to elements like moving, resizing or sorting. PRADO Jui interactions controls applies these interactions to a <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> +For informations of the specific options of each interaction, follow jQuery-UI Interaction <a href="http://api.jqueryui.com/category/interactions/">API Documentation</a> for the specific interaction. +</p> + +<a name="TJuiDraggable"></a> +<h2>TJuiDraggable</h2> +<com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiDraggable" /> - <a href="http://api.jqueryui.com/draggable/">jQuery UI API</a> + +<p class="block-content"> +<tt>TJuiDraggable</tt> is an extension to <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> based on jQuery-UI's <a href="http://jqueryui.com/draggable/">Draggable</a> interaction. +</p> + +<p class="block-content"> +The panel can be moved using the mouse, and eventually dropped over a <a href="?page=JuiControls.Interactions#TJuiDroppable">TJuiDroppable</a>. +</p> + +<com:RunBar PagePath="JuiControls.Samples.TJuiDraggable.Home" /> +<br/> + + +<a name="TJuiDroppable"></a> +<h2>TJuiDroppable</h2> +<com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiDroppable" /> - <a href="http://api.jqueryui.com/droppable/">jQuery UI API</a> + +<p class="block-content"> +<tt>TJuiDroppable</tt> is an extension to <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> based on jQuery-UI's <a href="http://jqueryui.com/draggable/">Draggable</a> interaction. +</p> + +<p class="block-content"> +When a <a href="?page=JuiControls.Interactions#TJuiDroppable">TJuiDraggable</a> is dropped over a <tt>TJuiDroppable panel</tt>, the <tt>OnDrop</tt> event will be triggered. The event hanler will receive a <tt>TJuiEventParameter</tt> object containing a reference to the dropped control in the <tt>DraggableControl</tt> property. +</p> + +<com:RunBar PagePath="JuiControls.Samples.TJuiDroppable.Home" /> +<br/> + +<a name="TJuiResizable"></a> +<h2>TJuiResizable</h2> +<com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiResizable" /> - <a href="http://api.jqueryui.com/resizable/">jQuery UI API</a> +<p class="block-content"> +<tt>TJuiResizable</tt> is an extension to <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> based on jQuery-UI's <a href="http://jqueryui.com/resizable/">Resizable</a> interaction. +</p> + +<p class="block-content"> +A small handle is shown on the bottom right corner of the panel, that permits the panel to be resized using the mouse. +</p> + +<com:RunBar PagePath="JuiControls.Samples.TJuiResizable.Home" /> +<br/> + + +<a name="TJuiSelectable"></a> +<h2>TJuiSelectable</h2> +<com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiSelectable" /> - <a href="http://api.jqueryui.com/selectable/">jQuery UI API</a> +<p class="block-content"> +<tt>TJuiSelectable</tt> is an extension to <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> based on jQuery-UI's <a href="http://jqueryui.com/selectable/">Selectable</a> interaction. +</p> + +<p class="block-content"> +<tt>TJuiSelectable</tt> can be feed a <tt>DataSource</tt> and will interally render a <a href="?page=Controls.Repeater">TRepeater</a> that displays items in an unordered list. Items can be selected by clicking on them, individually or in a group. +</p> + +<com:RunBar PagePath="JuiControls.Samples.TJuiSelectable.Home" /> +<br/> + + +<a name="TJuiSortable"></a> +<h2>TJuiSortable</h2> +<com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiSortable" /> - <a href="http://api.jqueryui.com/sortable/">jQuery UI API</a> +<p class="block-content"> +<tt>TJuiSortable</tt> is an extension to <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> based on jQuery-UI's <a href="http://jqueryui.com/sortable/">Sortable</a> interaction. +</p> + +<p class="block-content"> +<tt>TJuiSortable</tt> can be feed a <tt>DataSource</tt> and will interally render a <a href="?page=Controls.Repeater">TRepeater</a> that displays items in an unordered list. Items can be sortered dragging and dropping them. +</p> + +<com:RunBar PagePath="JuiControls.Samples.TJuiSortable.Home" /> +<br/> + +</com:TContent> diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page new file mode 100644 index 00000000..349922cb --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page @@ -0,0 +1,29 @@ +<com:TContent ID="body"> +<h1>TJuiDraggable Samples</h1> + +<com:TStyleSheet> + .ui-draggable { + width: 100px; + height:100px; + background-color: lime; + border: 1px solid black; + padding: 1em; + } +</com:TStyleSheet> +<table class="sampletable"> + +<tr><td class="samplenote"> +Default options with a little css applied: +</td><td class="sampleaction" style="height:600px"> + <com:TJuiDraggable + OnStart="drag1_start" + OnStop="drag1_stop" + > + Drag me around + </com:TJuiDraggable> + <com:TActiveLabel ID="label1" Text="Waiting.." /> +</td></tr> + +</table> + +</com:TContent> diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.php new file mode 100644 index 00000000..348eea55 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.php @@ -0,0 +1,16 @@ +<?php + +class Home extends TPage +{ + protected function drag1_start($sender, $param) + { + $offset=$param->getCallbackParameter()->offset; + $this->label1->Text.="<br/>Start drag at (".$offset->left.",".$offset->top.")"; + } + + protected function drag1_stop($sender, $param) + { + $offset=$param->getCallbackParameter()->offset; + $this->label1->Text.="<br/>Stop drop at (".$offset->left.",".$offset->top.")"; + } +}
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page new file mode 100644 index 00000000..6059fe60 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page @@ -0,0 +1,48 @@ +<com:TContent ID="body"> +<h1>TJuiDroppable Samples</h1> + +<com:TStyleSheet> + .ui-draggable { + width: 100px; + height:100px; + background-color: lime; + border: 1px solid black; + padding: 1em; + } + .ui-droppable { + width: 150px; + height:150px; + border: 1px solid black; + padding: 1em; + margin: 1em; + } + .drop-yellow { + background-color: yellow; + } + .drop-red { + background-color: red; + } +</com:TStyleSheet> +<table class="sampletable"> + +<tr><td class="samplenote"> +Default options with a little css applied: +</td><td class="sampleaction" style="height:600px"> + <com:TJuiDraggable ID="drag1"> + Drag me around + </com:TJuiDraggable> + + <com:TJuiDroppable OnDrop="drop1_ondrop" CssClass="drop-yellow"> + Drop it here! + <br/><com:TActiveLabel ID="label1" /> + </com:TJuiDroppable> + + <com:TJuiDroppable OnDrop="drop2_ondrop" CssClass="drop-red"> + Drop it here! + <br/><com:TActiveLabel ID="label2" /> + </com:TJuiDroppable> +</td></tr> + +</table> + +</com:TContent> diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php new file mode 100644 index 00000000..c59d035c --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php @@ -0,0 +1,30 @@ +<?php + +class Home extends TPage +{ + public function drop1_ondrop($sender, $param) + { + $draggable=$param->DraggableControl; + /* Equals to: + * $draggable=$param->getControl($param->getCallbackParameter()->draggable); + */ + $offset=$param->getCallbackParameter()->offset; + $target=$param->getCallbackParameter()->target->offset; + $top=$offset->top - $target->top; + $left=$offset->left - $target->left; + $this->label1->Text="Dropped ".$draggable->ID." at: <br/>Top=".$top." Left=".$left; + } + + public function drop2_ondrop($sender, $param) + { + $draggable=$param->DraggableControl; + /* Equals to: + * $draggable=$param->getControl($param->getCallbackParameter()->draggable); + */ + $offset=$param->getCallbackParameter()->offset; + $target=$param->getCallbackParameter()->target->offset; + $top=$offset->top - $target->top; + $left=$offset->left - $target->left; + $this->label2->Text="Dropped ".$draggable->ID." at: <br/>Top=".$top." Left=".$left; + } +} diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.page new file mode 100644 index 00000000..63436516 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.page @@ -0,0 +1,55 @@ +<com:TContent ID="body"> +<h1>TJuiProgressbar Samples</h1> + +<table class="sampletable"> + +<tr><td class="samplenote"> +Default options, Max=100, Value=50: +</td><td class="sampleaction"> + <com:TJuiProgressbar + Options.Max="100" + Options.Value="50" + /> +</td></tr> + +<tr><td class="samplenote"> +Undefined progressbar, Value=false: +</td><td class="sampleaction"> + <com:TJuiProgressbar + Options.Value="false" + /> +</td></tr> + +<tr><td class="samplenote"> +Undefined progresbar, value changed from javascript: +</td><td class="sampleaction"> + <com:TJuiProgressbar + ID="pbar1" + Options.Max="100" + Options.Value="false" + OnChange="pbar1_changed" + OnComplete="pbar1_complete" + /> + <com:TActiveLabel ID="label1" Text="Waiting.." /> + <com:TButton ID="button1" Text="Start example" Attributes.OnClick="startExample1(); return false" /> + <com:TClientScript> + function progress() { + var pbar = $('#<%= $this->pbar1->ClientID %>'); + var val = pbar.progressbar('value') || 0; + pbar.progressbar('value', val + 10); + if (val < 99) { + setTimeout(progress, 500); + } + } + + function startExample1() + { + $('#<%= $this->pbar1->ClientID %>').progressbar('value', false) + progress(); + } + </com:TClientScript/> +</td></tr> + +</table> + +</com:TContent> diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.php new file mode 100644 index 00000000..8f6d9ec6 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.php @@ -0,0 +1,14 @@ +<?php + +class Home extends TPage +{ + public function pbar1_complete($sender,$param) + { + $this->label1->Text="Progressbar complete!"; + } + + public function pbar1_changed($sender,$param) + { + $this->label1->Text="Progressbar changed."; + } +}
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page new file mode 100644 index 00000000..6c61f7df --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page @@ -0,0 +1,29 @@ +<com:TContent ID="body"> +<h1>TJuiResizable Samples</h1> + +<com:TStyleSheet> + .resizable { + width: 150px; + height: 150px; + padding: 0.5em; + background: #fff; + border: 1px solid #000; + } + </com:TStyleSheet> +<table class="sampletable"> + +<tr><td class="samplenote"> +Default options with a little css applied: +</td><td class="sampleaction"> + <com:TJuiResizable + CssClass="resizable" + OnStart="resize1_start" + OnStop="resize1_stop" + > + <com:TActiveLabel ID="label1" Text="Resize me!" /> + </com:TJuiResizable> +</td></tr> + +</table> + +</com:TContent> diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.php new file mode 100644 index 00000000..435b8a9b --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.php @@ -0,0 +1,16 @@ +<?php + +class Home extends TPage +{ + protected function resize1_start($sender, $param) + { + $size=$param->getCallbackParameter()->size; + $this->label1->Text.="<br/>Start: ".intval($size->width)." x ".intval($size->height); + } + + protected function resize1_stop($sender, $param) + { + $size=$param->getCallbackParameter()->size; + $this->label1->Text.="<br/>Stop: ".intval($size->width)." x ".intval($size->height); + } +}
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page new file mode 100644 index 00000000..cd778625 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page @@ -0,0 +1,41 @@ +<com:TContent ID="body"> +<h1>TJuiSelectable Samples</h1> + +<com:TStyleSheet> + .ui-selectable { + list-style: none; + cursor: pointer; + } + .ui-selectable li { + border: 1px solid transparent; + padding: 3px; + border-radius:3px; + } + + .ui-selectable li:hover { + background: #FECA40; + border: 1px solid black; + } + + .ui-selecting { + background: #FECA40; + } + .ui-selected { + background: #F39814; color: white; + } +</com:TStyleSheet> +<table class="sampletable"> + +<tr><td class="samplenote"> +Default options with a little css applied: +</td><td class="sampleaction"> + <com:TJuiSelectable + ID="repeater1" + OnStop="repeater1_onStop" + /> + <com:TActiveLabel ID="label1" /> +</td></tr> + +</table> + +</com:TContent> diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php new file mode 100644 index 00000000..ada38408 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php @@ -0,0 +1,32 @@ +<?php + +class Home extends TPage +{ + protected $data = array( + 'PRADO', + 'quickstart', + 'tutorial', + 'sample', + 'for the', + 'TJuiSortable', + 'control', + ); + + public function onLoad($param) + { + if(!$this->IsPostback) + { + $this->repeater1->DataSource=$this->data; + $this->repeater1->dataBind(); + } + } + + public function repeater1_onStop($sender, $param) + { + $this->label1->Text="Selected items:"; + $items = $param->getCallbackParameter()->index; + + foreach($items as $index) + $this->label1->Text.=' '.$this->data[$index]; + } +} diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page new file mode 100644 index 00000000..cbb1465b --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page @@ -0,0 +1,35 @@ +<com:TContent ID="body"> +<h1>TJuiSortable Samples</h1> + +<com:TStyleSheet> + .ui-sortable { + list-style: none; + cursor: pointer; + } + + .ui-sortable li { + border: 1px solid transparent; + padding: 3px; + border-radius:3px; + } + + .ui-sortable li:hover { + background: lime; + border: 1px solid black; + } +</com:TStyleSheet> +<table class="sampletable"> + +<tr><td class="samplenote"> +Default options with a little css applied: +</td><td class="sampleaction"> + <com:TJuiSortable + ID="repeater1" + onStop="repeater1_onStop" + /> + <com:TActiveLabel ID="label1" /> +</td></tr> + +</table> + +</com:TContent> diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php new file mode 100644 index 00000000..d96df302 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php @@ -0,0 +1,31 @@ +<?php + +class Home extends TPage +{ + protected $data = array( + 'PRADO', + 'quickstart', + 'tutorial', + 'sample', + 'for the', + 'TJuiSortable', + 'control', + ); + + public function onLoad($param) + { + if(!$this->IsPostback) + { + $this->repeater1->DataSource=$this->data; + $this->repeater1->dataBind(); + } + } + + public function repeater1_onStop($sender, $param) + { + $this->label1->Text="Items order:"; + $order = $param->getCallbackParameter()->index; + foreach($order as $index) + $this->label1->Text.=' '.$this->data[$index]; + } +} diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/config.xml b/demos/quickstart/protected/pages/JuiControls/Samples/config.xml new file mode 100644 index 00000000..315e42af --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/config.xml @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- $Id: config.xml 1405 2006-09-10 01:03:56Z wei $ --> +<configuration> + <paths> + <using namespace="System.Web.UI.JuiControls.*" /> + </paths> + <pages MasterClass="SampleLayout" /> +</configuration>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/JuiControls/Widgets.page b/demos/quickstart/protected/pages/JuiControls/Widgets.page new file mode 100644 index 00000000..cf72d41d --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Widgets.page @@ -0,0 +1,28 @@ +<com:TContent ID="body"> +<h1>Jui widgets controls</h1> +<p class="block-content"> +Jui widgets are complex controls built on the foundations of jQuery effects and jQueryUI interactions. +PRADO Jui widgets controls can be divided in two groups: +<ol> + <li>Standard Widgets, extend a control affecting its aspect and functionality: eg. <tt>TJuiProgressbar</tt> transforms an <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> into a Progressbar</li> + <li>List Widgets, take a repeated list of items and relayout their presentation: eg. ... +</ol> +For informations of the specific options of each widget, follow jQuery-UI Widget <a href="http://api.jqueryui.com/category/widgets/">API Documentation</a> for the specific interaction. +</p> + +<a name="TJuiProgressbar"></a> +<h2>TJuiProgressbar</h2> +<com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiProgressbar" /> - <a href="http://api.jqueryui.com/progressbar/">jQuery UI API</a> + +<p class="block-content"> +<tt>TJuiProgressbar</tt> is an extension to <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> based on jQuery-UI's <a href="http://jqueryui.com/progressbar/">Progressbar</a> widget. +</p> + +<p class="block-content"> +The panel takes the aspect of a progressbar ranging from a value of 0 to the value of the <tt>Max</tt> property. The current value can be set using the <tt>Value</tt> property; setting it to <tt>false</tt> will create an undefined progressbar. +</p> + +<com:RunBar PagePath="JuiControls.Samples.TJuiProgressbar.Home" /> +<br/> + +</com:TContent> |