<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" /> <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/> <a name="TJuiAutoComplete" /> <h2>TJuiAutoComplete</h2> <com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiAutoComplete" /> - <a href="http://api.jqueryui.com/autocomplete/">jQuery UI API</a> <p class="block-content"> <tt>TJuiAutoComplete</tt> is an extension to <a href="?page=ActiveControls.ActiveTextBox">TActiveTextBox</a> based on jQuery-UI's <a href="http://jqueryui.com/autocomplete/">autocomplete</a> widget. </p> <p class="block-content"> TJuiAutoComplete is an extended ActiveTextBox that provides a list of suggestions on the current partial word typed in the textbox. The suggestions are requested using callbacks. The <tt>Frequency</tt> and <tt>MinChars</tt> properties sets the delay and minimum number of characters typed, respectively, before requesting for sugggestions. An embedded <tt>TRepeater</tt> is used to Display the list of suggestions. It can be accessed and styled through the Suggestions property and its sub-properties. </p> <p class="block-content"> On each request for suggestions, the <tt>OnSuggestion</tt> event will be raised. The event handler receives the entered token that can be used to build the list of suggestions and to <tt>dataBind()</tt> it to the Suggestions repeater. </p> <p class="block-content"> When a suggestion is selected the <tt>OnSuggestionSelected</tt> event is raised, with the index of the selected suggestion contained in the parameter. Multiple selections can be performed in the same textbox. The selections must be separated by any characters specified with the <tt>Separator</tt> property. </p> <com:RunBar PagePath="JuiControls.Samples.TJuiAutoComplete.Home" /> <br/> <a name="TJuiDialog" /> <h2>TJuiDialog</h2> <com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiDialog" /> - <a href="http://api.jqueryui.com/dialog/">jQuery UI API</a> <p class="block-content"> <tt>TJuiDialog</tt> is an extension to <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> based on jQuery-UI's <a href="http://jqueryui.com/dialog/">dialog</a> widget. </p> <p class="block-content"> TJuiDialog is an extended TActivePanel that shows an dialog. The dialog may contain buttons that can fire callback events. </p> <p class="block-content"> The dialog may contain one or more <tt>TJuiDialogButton</tt> Controls. The buttons may contain a callback that will be fired when they are clicked. </p> <com:RunBar PagePath="JuiControls.Samples.TJuiDialog.Home" /> <br/> <a name="TJuiDatePicker" /> <h2>TJuiDatePicker</h2> <com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiDatePicker" /> - <a href="http://api.jqueryui.com/datepicker/">jQuery UI API</a> <p class="block-content"> <tt>TJuiDatePicker</tt> is an extension to <a href="?page=ActiveControls.ActiveTextBox">TActiveTextBox</a> based on jQuery-UI's <a href="http://jqueryui.com/datepicker/">datepicker</a> widget. </p> <p class="block-content"> TJuiDatePicker is an extended TActiveTextBox that shows a date picker dialog on focus for an easy way to enter a date into the textbox. </p> <com:RunBar PagePath="JuiControls.Samples.TJuiDatePicker.Home" /> <br/> </com:TContent>