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 ++++++++++++--- .../protected/pages/JuiControls/Interactions.page | 83 ++++++++++++++++++++++ framework/Web/UI/JuiControls/TJuiDroppable.php | 2 +- framework/Web/UI/JuiControls/TJuiSelectable.php | 2 +- 4 files changed, 133 insertions(+), 13 deletions(-) create mode 100644 demos/quickstart/protected/pages/JuiControls/Interactions.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. +

diff --git a/demos/quickstart/protected/pages/JuiControls/Interactions.page b/demos/quickstart/protected/pages/JuiControls/Interactions.page new file mode 100644 index 00000000..490daec6 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Interactions.page @@ -0,0 +1,83 @@ + +

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. +

+ + +

TJuiDraggable

+ - jQuery UI API + +

+TJuiDraggable is an extension to TActivePanel based on jQuery-UI's Draggable interaction. +

+ +

+The panel can be moved using the mouse, and eventually dropped over a TJuiDroppable. +

+ + +
+ + + +

TJuiDroppable

+ - jQuery UI API + +

+TJuiDroppable is an extension to TActivePanel based on jQuery-UI's Draggable interaction. +

+ +

+When a TJuiDraggable is dropped over a TJuiDroppable panel, the OnDrop event will be triggered. The event hanler will receive a TJuiEventParameter object containing a reference to the dropped control in the DraggableControl property. +

+ + +
+ + +

TJuiResizable

+ - jQuery UI API +

+TJuiResizable is an extension to TActivePanel based on jQuery-UI's Resizable interaction. +

+ +

+A small handle is shown on the bottom right corner of the panel, that permits the panel to be resized using the mouse. +

+ + +
+ + + +

TJuiSelectable

+ - jQuery UI API +

+TJuiSelectable is an extension to TActivePanel based on jQuery-UI's Selectable interaction. +

+ +

+TJuiSelectable can be feed a DataSource and will interally render a TRepeater that displays items in an unordered list. Items can be selected by clicking on them, individually or in a group. +

+ + +
+ + + +

TJuiSortable

+ - jQuery UI API +

+TJuiSortable is an extension to TActivePanel based on jQuery-UI's Sortable interaction. +

+ +

+TJuiSortable can be feed a DataSource and will interally render a TRepeater that displays items in an unordered list. Items can be sortered dragging and dropping them. +

+ + +
+ + diff --git a/framework/Web/UI/JuiControls/TJuiDroppable.php b/framework/Web/UI/JuiControls/TJuiDroppable.php index 3c79f536..2d2ed6b9 100644 --- a/framework/Web/UI/JuiControls/TJuiDroppable.php +++ b/framework/Web/UI/JuiControls/TJuiDroppable.php @@ -18,7 +18,7 @@ Prado::using('System.Web.UI.ActiveControls.TActivePanel'); * TJuiDroppable is an extension to {@link TActivePanel} based on jQuery-UI's * {@link http://jqueryui.com/droppable/ Droppable} interaction. * When a {@link TJuiDraggable} is dropped over a TJuiDroppable panel, the - * {@link onDrop OnDrop} event will be triggered. An event hanler will receive + * {@link onDrop OnDrop} event will be triggered. The event hanler will receive * a {@link TJuiEventParameter} object containing a reference to the dropped control * in the DraggableControl property. * diff --git a/framework/Web/UI/JuiControls/TJuiSelectable.php b/framework/Web/UI/JuiControls/TJuiSelectable.php index 8915c4a2..b370d14a 100644 --- a/framework/Web/UI/JuiControls/TJuiSelectable.php +++ b/framework/Web/UI/JuiControls/TJuiSelectable.php @@ -17,7 +17,7 @@ Prado::using('System.Web.UI.ActiveControls.TActivePanel'); * * TJuiSelectable is an extension to {@link TActivePanel} based on jQuery-UI's * {@link http://jqueryui.com/selectable/ Selectable} interaction. - * The panel can be feed a {@link setDataSource DataSource} and will interally + * TJuiSelectable can be feed a {@link setDataSource DataSource} and will interally * render a {@link TRepeater} that displays items in an unordered list. * Items can be selected by clicking on them, individually or in a group. * -- cgit v1.2.3