From 53ef46637f49ba745bb43c891cae593454502979 Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Wed, 15 Jan 2014 00:24:58 +0100 Subject: Added basic events for JuiControls, added quickstart demos --- demos/quickstart/protected/controls/TopicList.tpl | 1 + .../protected/pages/JuiControls/Home.page | 49 ++++++++++++++++++++++ .../JuiControls/Samples/TJuiDraggable/Home.page | 25 +++++++++++ .../JuiControls/Samples/TJuiDroppable/Home.page | 48 +++++++++++++++++++++ .../JuiControls/Samples/TJuiDroppable/Home.php | 16 +++++++ .../JuiControls/Samples/TJuiResizable/Home.page | 25 +++++++++++ .../JuiControls/Samples/TJuiSelectable/Home.page | 38 +++++++++++++++++ .../JuiControls/Samples/TJuiSelectable/Home.php | 32 ++++++++++++++ .../JuiControls/Samples/TJuiSortable/Home.page | 32 ++++++++++++++ .../JuiControls/Samples/TJuiSortable/Home.php | 31 ++++++++++++++ .../protected/pages/JuiControls/Samples/config.xml | 8 ++++ 11 files changed, 305 insertions(+) create mode 100644 demos/quickstart/protected/pages/JuiControls/Home.page create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/config.xml (limited to 'demos/quickstart/protected') diff --git a/demos/quickstart/protected/controls/TopicList.tpl b/demos/quickstart/protected/controls/TopicList.tpl index 3c2198b1..a44e56eb 100644 --- a/demos/quickstart/protected/controls/TopicList.tpl +++ b/demos/quickstart/protected/controls/TopicList.tpl @@ -59,6 +59,7 @@
  • Data Controls
  • AJAX: Introduction
  • Active Controls (AJAX)
    • +
  • Jui Controls (jQuery UI)
  • Writing New Controls
    • diff --git a/demos/quickstart/protected/pages/JuiControls/Home.page b/demos/quickstart/protected/pages/JuiControls/Home.page new file mode 100644 index 00000000..dee08dfe --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Home.page @@ -0,0 +1,49 @@ + +

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

    + +

    PRADO Jui interactions controls

    + + +

    PRADO Jui controls

    + + +     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..6912389d --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page @@ -0,0 +1,25 @@ + +

    TJuiDraggable Samples

    + + + .ui-draggable { + width: 100px; + height:100px; + background-color: lime; + border: 1px solid black; + padding: 1em; + } + + + + + +
    +Default options with a little css applied: + + + Drag me around + +
    + +     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..59cd3838 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page @@ -0,0 +1,48 @@ + +

    TJuiDraggable Samples

    + + + .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; + } + + + + + +
    +Default options with a little css applied: + + + Drag me around + + + + Drop it here! +
    +     + + + Drop it here! +
    +     +
    + +     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..cdbe85ba --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php @@ -0,0 +1,16 @@ +getDroppedControl()->ID; + $this->label1->Text="Dropped ".$draggable." at:
    Top=".$param->getOffsetTop()." Left=".$param->getOffsetLeft(); + } + + public function drop2_ondrop($sender, $param) + { + $draggable=$param->getDroppedControl()->ID; + $this->label2->Text="Dropped ".$draggable." at:
    Top=".$param->getOffsetTop()." Left=".$param->getOffsetLeft(); + } +} 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..b5a207c0 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page @@ -0,0 +1,25 @@ + +

    TJuiResizable Samples

    + + + .resizable { + width: 150px; + height: 150px; + padding: 0.5em; + background: #fff; + border: 1px solid #000; + } + + + + + +
    +Default options with a little css applied: + + + Resize me! + +
    + +     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..4af5d637 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page @@ -0,0 +1,38 @@ + +

    TJuiSelectable Samples

    + + + .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; + } + + + + + +
    +Default options with a little css applied: + + + +
    + +     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..cf8d40f1 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php @@ -0,0 +1,32 @@ +IsPostback) + { + $this->repeater1->DataSource=$this->data; + $this->repeater1->dataBind(); + } + } + + public function repeater1_onSelectedIndexChanged($sender, $param) + { + $this->label1->Text="Selected items:"; + $items = $param->getSelectedIndexes(); + + 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..2e1d2f55 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page @@ -0,0 +1,32 @@ + +

    TJuiSortable Samples

    + + + .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; + } + + + + + +
    +Default options with a little css applied: + + + +
    + +     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..4b3a0ff4 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php @@ -0,0 +1,31 @@ +IsPostback) + { + $this->repeater1->DataSource=$this->data; + $this->repeater1->dataBind(); + } + } + + public function repeater1_onSort($sender, $param) + { + $this->label1->Text="Items order:"; + $order = $param->getOrder(); + 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 @@ + + + + + + + + \ No newline at end of file -- cgit v1.2.3