1: <%@ Page Title="AtomicSlider -- Client Side API" Language="C#" AutoEventWireup="true" CodeBehind="ClientSideAPI.aspx.cs"
2: Inherits="Atom.Website.Samples.AtomicSlider.ClientSideAPI" %>
3:
4: <%@ Register Src="../Source.ascx" TagName="Source" TagPrefix="sample" %>
5: <%@ Register Assembly="Atom.Web" Namespace="Atom.Web.UI.WebControls" TagPrefix="atom" %>
6: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7: <html xmlns="http://www.w3.org/1999/xhtml">
8: <head id="Header1" runat="server">
9: <link rel="Shortcut Icon" type="image/ico" href="../images/icon.png" />
10: <!-- The jQuery UI theme that will be used by the components. -->
11: <link href="../themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
12: <!-- jQuery runtime minified -->
13: <script src="../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
14: <!-- jQuery UI runtime minified, client-side javascript of the components.-->
15: <script src="../Scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
16: <!-- This style reference is needed only for the current example. -->
17: <link href="../css/example.css" rel="stylesheet" type="text/css" />
18: <script type="text/javascript">
19: var increaseInterval;
20: var decreaseInterval;
21:
22: $(document).ready(function () {
23: $('#increase').button().click(function () {
24: var currnetValue = <%= AtomicSlider1.ClientID %>.slider("value");
25: <%= AtomicSlider1.ClientID %>.slider("value", currnetValue + 1);
26: });
27:
28: $('#setValue').button().click(function () {
29: var newValue = parseInt($('#newValue').val());
30:
31: if(isNaN(newValue)) {
32: alert("Invalid input");
33: } else {
34: <%= AtomicSlider1.ClientID %>.slider("value", newValue);
35: }
36: });
37:
38: $('#decrease').button().click(function () {
39: var currnetValue = <%= AtomicSlider1.ClientID %>.slider("value");
40: <%= AtomicSlider1.ClientID %>.slider("value", currnetValue - 1);
41: });
42: });
43:
44: function ClearLogContainer() {
45: $("#<%= LogContainer.ClientID %>").val('');
46: }
47:
48: function SetValue(value){
49: <%= AtomicSlider1.ClientID %>.slider("value", value);
50: }
51:
52: function OnValueChanged(e, ui) {
53: $("#<%= LogContainer.ClientID %>").val($("#<%= LogContainer.ClientID %>").val() + '\nOnValueChanged at ' + Date() + ' value = ' + ui.value);
54: <%=AtomicProgressbar1.ClientID%>.progressbar('value',<%= AtomicSlider1.ClientID%>.slider('value'));
55: }
56: function OnSliding(){
57: <%=AtomicProgressbar1.ClientID%>.progressbar('value',<%= AtomicSlider1.ClientID%>.slider('value'));
58: }
59: </script>
60: </head>
61: <body>
62: <form id="form1" runat="server">
63: <fieldset>
64: <legend>Action </legend>
65: <div>
66: <input id="increase" type="button" value="Increase with 1" />
67: <input id="decrease" type="button" value="Decrease with 1" />
68: </div>
69: <div>
70: <label for="newValue">
71: Value:</label>
72: <input type="text" id="newValue" value="" />
73: <input id="setValue" type="button" value="Set value" />
74: </div>
75: </fieldset>
76: <br />
77: <div>
78: <atom:AtomicSlider ID="AtomicSlider1" runat="server" MinValue="0" MaxValue="100"
79: Range="Max">
80: <ClientSideEvents OnSliding="OnSliding" OnValueChanged="OnValueChanged" />
81: </atom:AtomicSlider>
82: <br />
83: <atom:AtomicProgressbar ID="AtomicProgressbar1" runat="server">
84: </atom:AtomicProgressbar>
85: </div>
86: <br />
87: <fieldset>
88: <legend>Events</legend>
89: <div>
90: <a href="javascript:void(0);" style="float: right;" onclick="ClearLogContainer()">clear
91: log container</a>
92: <asp:TextBox ID="LogContainer" runat="server" TextMode="MultiLine" Width="100%" Text=""
93: Height="150px"></asp:TextBox>
94: </div>
95: </fieldset>
96: <br />
97: <sample:Source ID="Code" runat="server" />
98: </form>
99: </body>
100: </html>