summaryrefslogtreecommitdiff
path: root/demos/quickstart/protected
diff options
context:
space:
mode:
Diffstat (limited to 'demos/quickstart/protected')
-rw-r--r--demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page40
-rw-r--r--demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.php19
-rw-r--r--demos/quickstart/protected/pages/Controls/Slider.page55
-rw-r--r--demos/quickstart/protected/pages/Controls/Standard.page4
-rw-r--r--demos/quickstart/protected/pages/GettingStarted/NewFeatures.page3
5 files changed, 120 insertions, 1 deletions
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page b/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page
new file mode 100644
index 00000000..7670f9d3
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page
@@ -0,0 +1,40 @@
+<com:TContent id="body">
+<h1>TSlider Sample</h1>
+
+<table class="sampletable">
+
+<tr><td class="samplenote">
+Simple horizontal slider, with no events handler attached</td><td class="sampleaction">
+<com:TSlider id="slider1" Direction="Horizontal"/>
+</td>
+<td class="sampleaction">
+ <com:TButton onClick="submit1" Text="Submit"/>
+ <com:TLabel id="slider1Result"/>
+</td></tr>
+<tr><td class="samplenote">
+Horizontal slider from -50 to 50, with image handle, Javascript 'onSlide' handler, ServerSide 'onSliderChanged' handler, initial value and autopostback=true
+</td><td class="sampleaction">
+<com:TSlider id="slider2" AutoPostBack="true" Handle.CssClass="handle-image" Direction="Horizontal" Value="30" Enabled="true" MinValue="-50" MaxValue="50" OnValueChanged="slider2Changed">
+ <prop:ClientSide.onSlide>
+ $('slider2value').innerHTML = value;
+ </prop:ClientSide.onSlide>
+</com:TSlider>
+Value : <span id="slider2value"><%=$this->slider2->value%></span>
+</td><td class="sampleaction">
+<com:TLabel id="slider2Result"/>
+</td></tr>
+<tr><td class="samplenote">
+Vertical slider from 0 to 1, with image handle, Javascript 'onSlide' handler, ServerSide 'onSliderChanged' handler, StepSize, and no autopostback
+</td><td class="sampleaction">
+<com:TSlider id="slider3" AutoPostBack="false" Handle.CssClass="handle-image" Direction="Vertical" Enabled="true" MinValue="0" MaxValue="1" StepSize="0.1" OnValueChanged="slider3Changed">
+ <prop:ClientSide.onSlide>
+ $('slider3value').innerHTML = value;
+ </prop:ClientSide.onSlide>
+</com:TSlider>
+Value : <span id="slider3value"><%=$this->slider3->value%></span>
+</td><td class="sampleaction">
+<com:TButton Text="Submit"/>
+<com:TLabel id="slider3Result"/>
+</td></tr>
+</table>
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.php b/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.php
new file mode 100644
index 00000000..4b9b61b9
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.php
@@ -0,0 +1,19 @@
+<?php
+class Home extends TPage
+{
+ public function submit1 ($sender, $param)
+ {
+ $this->slider1Result->setText('Slider Value : '.$this->slider1->getValue());
+ }
+
+ public function slider2Changed ($sender, $param)
+ {
+ $this->slider2Result->setText('onSliderChanged, Value : '.$sender->getValue());
+ }
+
+ public function slider3Changed ($sender, $param)
+ {
+ $this->slider3Result->setText('onSliderChanged, Value : '.$sender->getValue());
+ }
+}
+?> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Slider.page b/demos/quickstart/protected/pages/Controls/Slider.page
new file mode 100644
index 00000000..d71c28a0
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Slider.page
@@ -0,0 +1,55 @@
+<com:TContent ID="body" >
+
+<h1 id="4401">TSlider</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TSlider" />
+
+<p id="510314" class="block-content">
+<tt>TSlider</tt> displays a slider for numeric input purpose. A slider consists of a <em>track</em>
+which define the range of possible value, and a <em>handle</em> which can slide on the track, to select
+a value in the range. The track can be either Horizontal or Vertical, depending of the <tt>Direction</tt>
+property. By default, it's horizontal.
+</p>
+<p>
+The range boundaries are defined by <tt> MinValue</tt> and <tt>MaxValue</tt> properties.
+The default range is from 0 to 100.
+The <tt>StepSize</tt> property can be used to define the <em>step</em> between 2 values inside the range.
+Notice that this step will be recomputed if there is more than 200 values between the range boundaries.
+You can also provide the allowed values by setting the <tt>Values</tt> array.
+</p>
+
+<p>
+The handle sub-properties can be accessed by <tt>Handle</tt> property. You can also provide your own control
+for the handle, using <tt>HandleClass</tt> property. Note that this class must be a subclass of
+<tt>TSliderHandle</tt>
+</p>
+
+<p>
+The TSlider control can be easily customized using CssClasses. You can provide your own css file, using the
+<tt>CssUrl</tt> property.
+The css class for TSlider can be set by the <tt>CssClass</tt> property. Defaults values are <b>'hslider'</b> for
+an Horizontal slider, or <b>'vslider'</b> for a Vertical one.
+The css class for the Handle can be set by the <tt>Handle.CssClass</tt> subproperty. Defaults is <b>'handle'</b>, which just
+draw a red block as a cursor. <b>'handle-image'</b> css class is also provided for your convenience, which display an image
+as the handle.
+</p>
+
+<p>
+If <tt>AutoPostBack</tt> property is true, postback is performed as soon as the value changed.
+</p>
+
+<p>
+TSlider raises the <tt>onValueChanged</tt> event when the value of the slider has changed during postback.
+</p>
+
+<p>
+You can also attach ClientSide javascript events handler to the slider :
+<ul>
+<li><tt>ClientSide.onSlide</tt> is called when the handle is slided on the track. You can get the current value in the <b>value</b>
+javascript variable. You can use this event to update on client side a label with the current value</li>
+<li><tt>ClientSide.onChange</tt> is called when the slider value has changed (at the end of a move).</li>
+</ul>
+</p>
+
+<com:RunBar PagePath="Controls.Samples.TSlider.Home" />
+
+<div class="last-modified">$Id$</div></com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Standard.page b/demos/quickstart/protected/pages/Controls/Standard.page
index 7d961a84..2b8dd7ab 100644
--- a/demos/quickstart/protected/pages/Controls/Standard.page
+++ b/demos/quickstart/protected/pages/Controls/Standard.page
@@ -120,6 +120,10 @@
</li>
<li>
+ <a href="?page=Controls.Slider">TSlider</a> represents a Slider control
+ </li>
+
+ <li>
<a href="?page=Controls.Statements">TStatements</a> accepts a few PHP statements and displays their standard output on the Web page.
</li>
diff --git a/demos/quickstart/protected/pages/GettingStarted/NewFeatures.page b/demos/quickstart/protected/pages/GettingStarted/NewFeatures.page
index 53b516cc..6d5b89e4 100644
--- a/demos/quickstart/protected/pages/GettingStarted/NewFeatures.page
+++ b/demos/quickstart/protected/pages/GettingStarted/NewFeatures.page
@@ -10,7 +10,8 @@ This page summarizes the main new features that are introduced in each PRADO rel
<ul>
<li>Added a new control <a href="?page=Controls.TabPanel">TTabPanel</a> that displays tabbed views.</li>
<li>Added a new control <a href="?page=Controls.Keyboard">TKeyboard</a> that displays a virtual keyboard for text input.</li>
-<li>Added a new control <a href="?page=Controls.Captcha">TCaptcha</a> that displays a CAPTCHA to keep spammers from signing up for certain accounts online. A related validator <tt>TCaptchaValidator</tt> is also implemented.</li>
+<li>Added a new control <a href="?page=Controls.Captcha">TCaptcha</a> that displays a CAPTCHA to keep spammers from signing up for certain accounts online. A related validator <tt>TCaptchaValidator</tt> is also implemented.</li>
+<li>Added a new control <a href="?page=Controls.Slider">TSlider</a> that displays a slider which can be used for numeric input.</li>
<li>Added Oracle DB support to Active Record</li>
</ul>