diff options
Diffstat (limited to 'demos/quickstart/protected/pages/JuiControls')
14 files changed, 280 insertions, 33 deletions
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: <com:TActiveLabel ID="lbl3" /> </td></tr> +<tr><td class="samplenote"> +Dialog with callbacks: +</td><td class="sampleaction"> +<com:TActiveButton + Text="Open Dialog" + OnClick="bt4Click"/> +<com:TJuiDialog + ID="dlg4" + Options.Width="400" + Options.Title="Dialog with callbacks" + Options.AutoOpen="False" + Options.Position="center center" + > + Change dialog options during callback. + <com:TJuiDialogButton + Text="change title" + OnClick="dlg4title" + /> + <com:TJuiDialogButton + Text="toggle width" + OnClick="dlg4width" + /> + <com:TJuiDialogButton + Text="toggle position" + OnClick="dlg4pos" + /> + +</com:TJuiDialog> +</td></tr> + </table> </com:TContent> 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 @@ </com:TStyleSheet> <table class="sampletable"> -<tr><td class="samplenote"> -Default options with a little css applied: +<tr><td class="samplenote" rowspan="2"> +Default options with a little css applied, change options during callback: </td><td class="sampleaction" style="height:600px"> <com:TJuiDraggable + ID="drag1" OnStart="drag1_start" OnStop="drag1_stop" > @@ -24,6 +25,29 @@ Default options with a little css applied: <com:TActiveLabel ID="label1" Text="Waiting.." /> </td></tr> +<tr><td> + <div> + Move direction + <com:TActiveButton Text="only horizontally" OnClick="drag1h" /> + <com:TActiveButton Text="only vertically" OnClick="drag1v" /> + <com:TActiveButton Text="both directions" OnClick="drag1b" /> + </div> + <div> + Cursor is + <com:TActiveDropDownList OnSelectedIndexChanged="drag2c"> + <com:TListItem Text="auto" Value="auto" Selected="true" /> + <com:TListItem Text="move" Value="move" /> + <com:TListItem Text="pointer" Value="pointer" /> + <com:TListItem Text="crosshair" Value="crosshair" /> + <com:TListItem Text="help" Value="help" /> + </com:TActiveDropDownList> + while dragging + </div> + <div> + <com:TActiveCheckBox OnCheckedChanged="drag3r" Text="Revert to original position after dragging stopped" /> + </div> +</td></tr> + </table> </com:TContent> 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.="<br/>Stop drop at (".$offset->left.",".$offset->top.")"; } + + protected function drag1h($sender, $param) + { + $this->drag1->getOptions()->axis = 'x'; + $this->label1->Text.="<br/>Drag horizontally only"; + } + + protected function drag1v($sender, $param) + { + $this->drag1->getOptions()->axis = 'y'; + $this->label1->Text.="<br/>Drag vertically only"; + } + + protected function drag1b($sender, $param) + { + $this->drag1->getOptions()->axis = false; + $this->label1->Text.="<br/>Drag all directions"; + } + + protected function drag2c($sender, $param) + { + $this->drag1->getOptions()->cursor = $sender->getSelectedValue(); + $this->label1->Text.="<br/>Change dragging cursor to ".$sender->getSelectedValue(); + } + + protected function drag3r($sender, $param) + { + $this->drag1->getOptions()->revert = $sender->getChecked(); + $this->label1->Text.="<br/>".($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; + } </com:TStyleSheet> <table class="sampletable"> <tr><td class="samplenote"> -Default options with a little css applied: +Default options with a little css applied, change options during callback: </td><td class="sampleaction" style="height:600px"> - <com:TJuiDraggable ID="drag1"> - Drag me around + <com:TJuiDraggable ID="drag1" CssClass="drag-lime"> + Drag me around + <p><com:TActiveLabel ID="label3" /></p> </com:TJuiDraggable> - <com:TJuiDroppable OnDrop="drop1_ondrop" CssClass="drop-yellow"> - Drop it here! - <br/><com:TActiveLabel ID="label1" /> + <com:TJuiDroppable ID="drop1" OnDrop="drop1_ondrop" CssClass="drop-yellow" Options.accept=".drag-lime"> + Drop it here! + <p><com:TActiveLabel ID="label1a" Text="is accepting lime draggable" /></p> + <p><com:TActiveLabel ID="label1b" /></p> </com:TJuiDroppable> - <com:TJuiDroppable OnDrop="drop2_ondrop" CssClass="drop-red"> - Drop it here! - <br/><com:TActiveLabel ID="label2" /> + <com:TJuiDroppable ID="drop2" OnDrop="drop2_ondrop" CssClass="drop-red"> + Drop it here! + <p><com:TActiveLabel ID="label2a" Text="is NOT highlighted while dragging" /></p> + <p><com:TActiveLabel ID="label2b" /></p> </com:TJuiDroppable> + + <p><com:TActiveCheckBox Text="yellow droppable accepts lime draggable" OnCheckedChanged="drop1_changed" Checked="true" /></p> + <p><com:TActiveCheckBox Text="highlight red droppable while dragging" OnCheckedChanged="drop2_changed" /></p> </td></tr> </table> 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: <br/>Top=".$top." Left=".$left; + $this->label1b->Text="Dropped ".$draggable->ID." at: <br/>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: <br/>Top=".$top." Left=".$left; + $this->label2b->Text="Dropped ".$draggable->ID." at: <br/>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: </com:TClientScript/> </td></tr> +<tr><td class="samplenote"> +Default options, Max=100, Value=50, value changed during callback: +</td><td class="sampleaction"> + <com:TJuiProgressbar + ID="pbar2" + Options.Max="100" + Options.Value="50" + /> + <com:TActiveButton ID="button2" Text="-10" OnClick="pbar2_minus" /> + <com:TActiveButton ID="button3" Text="+10" OnClick="pbar2_plus" /> +</td></tr> + </table> </com:TContent> 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 @@ <h1>TJuiResizable Samples</h1> <com:TStyleSheet> + #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; } </com:TStyleSheet> <table class="sampletable"> -<tr><td class="samplenote"> +<tr><td class="samplenote" rowspan="2"> Default options with a little css applied: </td><td class="sampleaction"> - <com:TJuiResizable - CssClass="resizable" - OnStart="resize1_start" - OnStop="resize1_stop" - > - <com:TActiveLabel ID="label1" Text="Resize me!" /> - </com:TJuiResizable> + <div id="box"> + <com:TJuiResizable + ID="resize1" + CssClass="resizable" + OnStart="resize1_start" + OnStop="resize1_stop" + Options.AnimateEasing="easeOutBounce" + > + <com:TActiveLabel ID="label1" Text="Resize me!" /> + </com:TJuiResizable> + </div> +</td></tr> + +<tr><td> + <div><com:TActiveCheckBox OnCheckedChanged="check1" Text="Resize outer box synchronously" /></div> + <div><com:TActiveCheckBox OnCheckedChanged="check2" Text="Animate final resizing" /></div> + <div><com:TActiveCheckBox OnCheckedChanged="check3" Text="Snap to [30,30] grid" /></div> </td></tr> </table> 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.="<br/>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 @@ <table class="sampletable"> <tr><td class="samplenote"> -Default options with a little css applied: +Default options with a little css applied, change options during callback: </td><td class="sampleaction"> <com:TJuiSelectable ID="repeater1" OnStop="repeater1_onStop" /> - <com:TActiveLabel ID="label1" /> + Selected items: <com:TActiveLabel ID="label1" /> + <div><com:TActiveCheckBox OnCheckedChanged="select1" Text="Disable selectable" /></div> + <div><com:TActiveCheckBox OnCheckedChanged="select2" Text="Selecting starts after dragging at least 100px" /></div> </td></tr> </table> 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('<i>none</i>'); } } 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; + } </com:TStyleSheet> <table class="sampletable"> <tr><td class="samplenote"> -Default options with a little css applied: +Default options with a little css applied, change options during callback: </td><td class="sampleaction"> <com:TJuiSortable ID="repeater1" onStop="repeater1_onStop" /> - <com:TActiveLabel ID="label1" /> + Items order: <com:TActiveLabel ID="label1" /> + <div><com:TActiveCheckBox OnCheckedChanged="sort1" Text="Apply CSS dragging placeholder" /></div> + <div><com:TActiveCheckBox OnCheckedChanged="sort2" Text="Revert to new position using a smooth animation" /></div> + <div> + Cursor is + <com:TActiveDropDownList OnSelectedIndexChanged="sort3"> + <com:TListItem Text="auto" Value="auto" Selected="true" /> + <com:TListItem Text="move" Value="move" /> + <com:TListItem Text="pointer" Value="pointer" /> + <com:TListItem Text="crosshair" Value="crosshair" /> + <com:TListItem Text="help" Value="help" /> + </com:TActiveDropDownList> + while dragging + </div> </td></tr> </table> 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(); } } |