jQuery UI Server Controls

The jQuery UI Server controls package consists of five lightweight server controls, built with jQuery and jQuery UI Libraries. These server controls act as wrapper classes for the jQuery UI widgets, by providing server-side functionalities to these client-side libraries. The jQuery UI client-side libraries and the jQuery javascript library used in this process, remain unmodified. The following are the jQuery UI Server controls.

The client-side functionalities and the client-side APIs of the jQuery UI widget, remain unmodified and fully functional with the jQuery UI Server controls. These controls completely support the jQuery UI 1.7.1 themes. The jQuery UI Server controls are built with the jQuery V1.3 and jQuery UI V1.7.1. Design-time support is currently unavailable for the jQueryUI Server controls.

License

The jQuery UI is used under the jQuery UIs GPL and MIT licenses. Only stable versions of jQuery UI will be shipped.

jQuery UI ibrary is used “as-is”. You bear the risk of using it. No express warranties, guarantees or conditions are provided.

Theme

All the controls require the jQuery UI V7.1 style sheet to be linked to the page, in order to view the controls at run time with appropriate styles. You can download the Styles directly from the jQuery UI website, or use the themes available with the Syncfusion samples.

The documentation for “Theming jQuery UI” is available in the jQuery UI website. You can download the themes with or without scoping. If you download the themes with scoping, then you must specify the name in the CssClass property. Scoping enables to use more than one theme in a single page.

The jQueryUIDatePicker styles cannot be applied with scoping while it is in the PopUp / Inline False mode.

<syncfusion:jQueryUISlider ID="JQueryUISlider1" runat="server" CssClass="uilightness">
jQueryUISlider1.CssClass = "uilightness";
jQueryUISlider1.CssClass = "uilightness"

Client-Side Functionalities

The jQuery UI widget’s client-side APIs remain unmodified. All the Options and Methods of the jQuery UI Dialog Widget, Slider Widget, Accordion Widget, Tabs Widget, and DatePicker Widget must be used with their appropriate ClientIDs.

For example: the autoOpen option of jQueryUIDialog widget is used as follows.

<syncfusion:jQueryUIDialog ID="JQueryUIDialog1" runat="server" CssClass="uilightness">

<DialogContent>This is a dialog.</DialogContent>

</syncfusion:jQueryUIDialog>
jQuery(document).ready(function(){$('#'+'<%=this.JQueryUIDialog1.ClientID %>').dialog('option',’autoOpen’,true);});

The Open client-side method of jQueryUIDialog widget, on button click, is used as follows.

<syncfusion:jQueryUIDialog ID="JQueryUIDialog1" runat="server" CssClass="uilightness">

<DialogContent>This is a dialog.</DialogContent>

</syncfusion:jQueryUIDialog>

<input id="Button1" type="button" value="Open" onclick="ShowWin()"/>
function ShowWin()

{

	$('#'+'<%=this.JQueryUIDialog1.ClientID %>').dialog('open');        

}

All the widget options and methods remain the same, and the only thing you need to do, is to use the ClientID of the server control for the selector.

The whole documentation for the client-side Options and Methods of the preceding five widgets are available in the jQuery UI website.