From 55338f1cf947b8593a3e23094d6feab625370e28 Mon Sep 17 00:00:00 2001 From: Jens Klaer Date: Wed, 20 May 2015 15:56:09 +0200 Subject: extended quichstart tutorial for TJuiControl option changes during callback --- .../pages/JuiControls/Samples/TJuiDialog/Home.page | 30 +++++++++++++++++++ .../pages/JuiControls/Samples/TJuiDialog/Home.php | 33 +++++++++++++++++++++ .../JuiControls/Samples/TJuiDraggable/Home.page | 28 ++++++++++++++++-- .../JuiControls/Samples/TJuiDraggable/Home.php | 30 +++++++++++++++++++ .../JuiControls/Samples/TJuiDroppable/Home.page | 30 ++++++++++++------- .../JuiControls/Samples/TJuiDroppable/Home.php | 28 ++++++++++++++++-- .../JuiControls/Samples/TJuiProgressbar/Home.page | 12 ++++++++ .../JuiControls/Samples/TJuiProgressbar/Home.php | 10 +++++++ .../JuiControls/Samples/TJuiResizable/Home.page | 34 ++++++++++++++++------ .../JuiControls/Samples/TJuiResizable/Home.php | 15 ++++++++++ .../JuiControls/Samples/TJuiSelectable/Home.page | 6 ++-- .../JuiControls/Samples/TJuiSelectable/Home.php | 13 +++++++-- .../JuiControls/Samples/TJuiSortable/Home.page | 23 +++++++++++++-- .../JuiControls/Samples/TJuiSortable/Home.php | 21 +++++++++++-- 14 files changed, 280 insertions(+), 33 deletions(-) (limited to 'demos/quickstart/protected/pages/JuiControls') diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.page index 6a9df446..acf49068 100644 --- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.page +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.page @@ -62,6 +62,36 @@ Dialog with buttons: + +Dialog with callbacks: + + + + Change dialog options during callback. + + + + + + + diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.php index f9d1e3a9..3d89011c 100644 --- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.php +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDialog/Home.php @@ -18,6 +18,11 @@ class Home extends TPage $this->dlg3->open(); } + public function bt4Click($sender, $param) + { + $this->dlg4->open(); + } + public function dlg3Ok($sender, $param) { $this->lbl3->Text="Button Ok clicked"; @@ -30,4 +35,32 @@ class Home extends TPage $this->dlg3->close(); } + public function dlg4title($sender, $param) + { + $this->dlg4->getOptions()->title = 'Title changed at ' . date('Y-m-d H:i:s'); + } + + public function dlg4width($sender, $param) + { + $this->dlg4->getOptions()->width += $this->dlg4->getOptions()->width > 400 ? -200 : 200; + } + + public function dlg4pos($sender, $param) + { + list($x, $y) = explode(' ', $this->dlg4->getOptions()->position); + if ($x == 'left') { + if ($y == 'top') $x = 'right'; + else $y = 'top'; + } + elseif ($x == 'right') { + if ($y == 'top') $y = 'bottom'; + else $x = 'left'; + } + else { + $x = 'left'; + $y = 'top'; + } + $this->dlg4->getOptions()->position = "$x $y"; + } + } \ No newline at end of file diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page index 349922cb..3155afa1 100644 --- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page @@ -12,10 +12,11 @@ - + +
-Default options with a little css applied: +
+Default options with a little css applied, change options during callback: @@ -24,6 +25,29 @@ Default options with a little css applied:
+
+ Move direction + + + +
+
+ Cursor is + + + + + + + + while dragging +
+
+ +
+
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.php index 348eea55..92c30486 100644 --- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.php +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.php @@ -13,4 +13,34 @@ class Home extends TPage $offset=$param->getCallbackParameter()->offset; $this->label1->Text.="
Stop drop at (".$offset->left.",".$offset->top.")"; } + + protected function drag1h($sender, $param) + { + $this->drag1->getOptions()->axis = 'x'; + $this->label1->Text.="
Drag horizontally only"; + } + + protected function drag1v($sender, $param) + { + $this->drag1->getOptions()->axis = 'y'; + $this->label1->Text.="
Drag vertically only"; + } + + protected function drag1b($sender, $param) + { + $this->drag1->getOptions()->axis = false; + $this->label1->Text.="
Drag all directions"; + } + + protected function drag2c($sender, $param) + { + $this->drag1->getOptions()->cursor = $sender->getSelectedValue(); + $this->label1->Text.="
Change dragging cursor to ".$sender->getSelectedValue(); + } + + protected function drag3r($sender, $param) + { + $this->drag1->getOptions()->revert = $sender->getChecked(); + $this->label1->Text.="
".($sender->getChecked()?'Turn on':'Turn off')." reverting to original position."; + } } \ No newline at end of file diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page index 6059fe60..6b527375 100644 --- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page @@ -5,9 +5,10 @@ .ui-draggable { width: 100px; height:100px; - background-color: lime; border: 1px solid black; + background-color: lime; padding: 1em; + cursor: move; } .ui-droppable { width: 150px; @@ -22,25 +23,34 @@ .drop-red { background-color: red; } + .drop-red.active { + background-color: orange; + }
-Default options with a little css applied: +Default options with a little css applied, change options during callback: - - Drag me around + + Drag me around +

- - Drop it here! -
+ + Drop it here! +

+

- - 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 index c59d035c..69139e9d 100644 --- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php @@ -12,7 +12,8 @@ class Home extends TPage $target=$param->getCallbackParameter()->target->offset; $top=$offset->top - $target->top; $left=$offset->left - $target->left; - $this->label1->Text="Dropped ".$draggable->ID." at:
Top=".$top." Left=".$left; + $this->label1b->Text="Dropped ".$draggable->ID." at:
Top=".$top." Left=".$left; + $this->label3->Text="Dropped into yellow droppable!"; } public function drop2_ondrop($sender, $param) @@ -25,6 +26,29 @@ class Home extends TPage $target=$param->getCallbackParameter()->target->offset; $top=$offset->top - $target->top; $left=$offset->left - $target->left; - $this->label2->Text="Dropped ".$draggable->ID." at:
Top=".$top." Left=".$left; + $this->label2b->Text="Dropped ".$draggable->ID." at:
Top=".$top." Left=".$left; + $this->label3->Text="Dropped into red droppable!"; + } + + public function drop1_changed($sender, $param) { + if ($sender->getChecked()) { + $this->drop1->getOptions()->accept = '.drag-lime'; + $this->label1a->Text="is accepting lime draggable"; + } + else { + $this->drop1->getOptions()->accept = ''; + $this->label1a->Text="is NOT accepting lime draggable"; + } + } + + public function drop2_changed($sender, $param) { + if ($sender->getChecked()) { + $this->drop2->getOptions()->activeClass = 'active'; + $this->label2a->Text="is highlighted while dragging"; + } + else { + $this->drop2->getOptions()->activeClass = ''; + $this->label2a->Text="is NOT highlighted while dragging"; + } } } diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.page index 63436516..9a6b2ff2 100644 --- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.page +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.page @@ -50,6 +50,18 @@ Undefined progresbar, value changed from javascript: + +Default options, Max=100, Value=50, value changed during callback: + + + + + + diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.php index 8f6d9ec6..247b88c8 100644 --- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.php +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiProgressbar/Home.php @@ -11,4 +11,14 @@ class Home extends TPage { $this->label1->Text="Progressbar changed."; } + + public function pbar2_minus($sender,$param) + { + $this->pbar2->getOptions()->value = max(0, $this->pbar2->getOptions()->value - 10); + } + + public function pbar2_plus($sender,$param) + { + $this->pbar2->getOptions()->value = min($this->pbar2->getOptions()->max, $this->pbar2->getOptions()->value + 10); + } } \ No newline at end of file diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page index 6c61f7df..05cc4a94 100644 --- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page @@ -2,26 +2,42 @@

TJuiResizable Samples

+ #box { + width: 800px; + height: 500px; + border: 1px solid #000; + } .resizable { width: 150px; height: 150px; padding: 0.5em; background: #fff; - border: 1px solid #000; + border: 1px solid #f00; + overflow: hidden; } - + +
+
Default options with a little css applied: - - - +
+ + + +
+
+
+
+
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.php index 435b8a9b..e4f126e1 100644 --- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.php +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.php @@ -13,4 +13,19 @@ class Home extends TPage $size=$param->getCallbackParameter()->size; $this->label1->Text.="
Stop: ".intval($size->width)." x ".intval($size->height); } + + protected function check1($sender, $param) + { + $this->resize1->getOptions()->alsoResize = $sender->getChecked() ? '#box' : ''; + } + + protected function check2($sender, $param) + { + $this->resize1->getOptions()->animate = TPropertyValue::ensureString($sender->getChecked()); + } + + protected function check3($sender, $param) + { + $this->resize1->getOptions()->grid = $sender->getChecked() ? '30' : false; + } } \ No newline at end of file diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page index cd778625..d7b1e8a8 100644 --- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page @@ -27,13 +27,15 @@
-Default options with a little css applied: +Default options with a little css applied, change options during callback: - + Selected items: +
+
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php index ada38408..81d5ea27 100644 --- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php @@ -18,15 +18,22 @@ class Home extends TPage { $this->repeater1->DataSource=$this->data; $this->repeater1->dataBind(); + $this->label1->setText('none'); } } public function repeater1_onStop($sender, $param) { - $this->label1->Text="Selected items:"; $items = $param->getCallbackParameter()->index; + foreach ($items as $key => $index) $items[$key] = $this->data[$index]; + $this->label1->Text = implode(' ', $items); + } + + public function select1($sender, $param) { + $this->repeater1->getOptions()->disabled = $sender->getChecked(); + } - foreach($items as $index) - $this->label1->Text.=' '.$this->data[$index]; + public function select2($sender, $param) { + $this->repeater1->getOptions()->distance = $sender->getChecked() ? 100 : 0; } } diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page index cbb1465b..e653308c 100644 --- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page @@ -17,17 +17,36 @@ background: lime; border: 1px solid black; } + + .ui-sortable li.ui-sortable-highlight { + background: red; + border: 1px solid black; + height: 17px; + }
-Default options with a little css applied: +Default options with a little css applied, change options during callback: - + Items order: +
+
+
+ Cursor is + + + + + + + + while dragging +
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php index d96df302..cca55f67 100644 --- a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php @@ -18,14 +18,29 @@ class Home extends TPage { $this->repeater1->DataSource=$this->data; $this->repeater1->dataBind(); + $this->label1->Text = implode(' ', $this->data); } } public function repeater1_onStop($sender, $param) { - $this->label1->Text="Items order:"; $order = $param->getCallbackParameter()->index; - foreach($order as $index) - $this->label1->Text.=' '.$this->data[$index]; + foreach ($order as $key => $index) $order[$key] = $this->data[$index]; + $this->label1->Text = implode(' ', $order); + } + + public function sort1($sender, $param) + { + $this->repeater1->getOptions()->placeholder = $sender->getChecked() ? 'ui-sortable-highlight' : false; + } + + public function sort2($sender, $param) + { + $this->repeater1->getOptions()->revert = $sender->getChecked(); + } + + protected function sort3($sender, $param) + { + $this->repeater1->getOptions()->cursor = $sender->getSelectedValue(); } } -- cgit v1.2.3