From d8f79c9c1338054d9d0d60955d6813a4477ff50c Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Sat, 8 Feb 2014 13:41:59 +0100 Subject: Quickstart documentation for Interactions --- .../protected/pages/JuiControls/Home.page | 59 ++++++++++++++++++---- 1 file changed, 48 insertions(+), 11 deletions(-) (limited to 'demos/quickstart/protected/pages/JuiControls/Home.page') diff --git a/demos/quickstart/protected/pages/JuiControls/Home.page b/demos/quickstart/protected/pages/JuiControls/Home.page index dee08dfe..bc087e73 100644 --- a/demos/quickstart/protected/pages/JuiControls/Home.page +++ b/demos/quickstart/protected/pages/JuiControls/Home.page @@ -1,39 +1,76 @@

Jui Controls (jQuery UI)

-Jui controls are the PRADO port of the standard jQuery UI widgets. They can be used as standard Active Controls, but will automatically load the needed jQuery UI javascript libraries. Jui controls have a Options property used to pass options to the underlying javascript object. For informations of the specific options of each widget, follow the API Documentation for the specific widget. +Jui controls are the PRADO port of the standard jQuery UI widgets. They can be used as standard Active Controls, but will automatically load the needed jQuery-UI javascript libraries. +

+

Options

+

+The Options property of PRADO Jui controls is used to pass options to the underlying javascript object. Each subproperty set on Options 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.

+

Example

+

+jQuery-UI's Resizable adds an handle to a target element making it resizable. Its PRADO counterpart is TJuiResizable. Resizable offers an aspectRatio property to constrain the aspect ratio of the target element. The same property can be applied to TJuiResizable as a subproperty of the Options property: +

+ + <com:TJuiResizable + ID="resize1" + Options.aspectRatio="true" + // Additional options being set + Options.maxHeight="250" + Options.maxWidth="350" + Options.minHeight="150" + Options.minWidth="200" + /> + + +

Events

+

+jQuery-UI widgets offers a lot of events that PRADO can hook up and trasmit to the serverside using a callback request. 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. +

+ +

Example

+

+jQuery's Draggable allows a target element to the moved using the mouse. Its PRADO counterpart is TJuiDraggable. Draggable exposes two useful events: start and stop, that gets triggered respectively when the element starts to move and when the movement stops. TJuiDraggable exposes these same events: +

+ + <com:TJuiDraggable + ID="drag1" + OnStart="drag1_start" + OnStop="drag1_stop" + /> + +

PRADO Jui interactions controls

+

+Jui interactions adds basic mouse-based interactions to elements like moving, resizing or sorting. PRADO Jui interactions controls applies there interactions to a TActivePanel +For informations of the specific options of each interaction, follow jQuery-UI Interaction API Documentation for the specific interaction. +

-- cgit v1.2.3