Action


Events
clear log container


Info
   1:  <%@ Page Title="AtomicProgressbar -- Client side events" Language="C#" AutoEventWireup="true" CodeBehind="ClientSideEvents.aspx.cs"
   2:      Inherits="Atom.Website.Samples.AtomicProgressbar.ClientSideEvents" %>
   3:   
   4:  <%@ Register Src="../Source.ascx" TagName="Source" TagPrefix="sample" %>
   5:  <%@ Register TagPrefix="atom" Namespace="Atom.Web.UI.WebControls" Assembly="Atom.Web" %>
   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 = <%= AtomicProgressbar1.ClientID %>.progressbar("value");
  25:                  <%= AtomicProgressbar1.ClientID %>.progressbar("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:                      <%= AtomicProgressbar1.ClientID %>.progressbar("value", newValue);
  35:                  }
  36:              });
  37:   
  38:              $('#decrease').button().click(function () {
  39:                  var currnetValue = <%= AtomicProgressbar1.ClientID %>.progressbar("value");
  40:                  <%= AtomicProgressbar1.ClientID %>.progressbar("value", currnetValue - 1);
  41:              });
  42:   
  43:              $('#fill').button().click(function(){
  44:                  clearInterval(increaseInterval);
  45:                  decreaseInterval= setInterval(function(){
  46:                      <%= AtomicProgressbar1.ClientID %>.progressbar('value', <%= AtomicProgressbar1.ClientID %>.progressbar('value') + 1) 
  47:                  }, 1000);
  48:              });
  49:   
  50:              $('#empty').button().click(function(){
  51:                  clearInterval(decreaseInterval);
  52:                  increaseInterval = setInterval(function(){
  53:                      <%= AtomicProgressbar1.ClientID %>.progressbar('value', <%= AtomicProgressbar1.ClientID %>.progressbar('value') - 1) 
  54:                  }, 1000);
  55:              });
  56:          });
  57:          function OnCompleted() {
  58:              $("#<%= LogContainer.ClientID %>").val($("#<%= LogContainer.ClientID %>").val() + '\nOnValueChanged at ' + Date() + ' value = AtomicProgressbar completed');
  59:          }
  60:          function ClearLogContainer() {
  61:              $("#<%= LogContainer.ClientID %>").val('');
  62:          }
  63:          
  64:          function SetValue(value){
  65:              <%= AtomicProgressbar1.ClientID %>.progressbar("value", value);
  66:          }
  67:   
  68:          function OnValueChanged(event, ui) {
  69:              var value = <%= AtomicProgressbar1.ClientID %>.progressbar("value");
  70:   
  71:              if (value == 0 || value == 100) {
  72:                  clearInterval(increaseInterval);
  73:                  clearInterval(decreaseInterval);
  74:              }
  75:   
  76:              $("#<%= LogContainer.ClientID %>").val($("#<%= LogContainer.ClientID %>").val() + '\nOnValueChanged at ' + Date() + ' value = ' + value);
  77:          }
  78:   
  79:      </script>
  80:  </head>
  81:  <body>
  82:      <form id="form1" runat="server">
  83:      <fieldset>
  84:          <legend>Action </legend>
  85:          <div class="progressbar-action-left">
  86:              <input id="increase" type="button" value="Increase with 1" />
  87:              <input id="decrease" type="button" value="Decrease with 1" />
  88:          </div>
  89:          <div class="progressbar-action-center">
  90:              <input type="text" id="newValue" value="" />
  91:              <input id="setValue" type="button" value="Set value" />
  92:          </div>
  93:          <div class="progressbar-action-right">
  94:              <input id="empty" type="button" value="To empty" />
  95:              <input id="fill" type="button" value="To fill " />
  96:          </div>
  97:      </fieldset>
  98:      <br />
  99:      <div>
 100:          <atom:AtomicProgressbar runat="server" ID="AtomicProgressbar1" Value="50">
 101:              <ClientSideEvents OnValueChanged="OnValueChanged" OnCompleted="OnCompleted" />
 102:          </atom:AtomicProgressbar>
 103:      </div>
 104:      <br />
 105:      <fieldset>
 106:          <legend>Events</legend>
 107:          <div>
 108:              <a href="javascript:void(0);" style="float: right;" onclick="ClearLogContainer()">clear
 109:                  log container</a>
 110:              <asp:TextBox ID="LogContainer" runat="server" TextMode="MultiLine" Width="100%" Text=""
 111:                  Height="150px"></asp:TextBox>
 112:          </div>
 113:      </fieldset>
 114:      <br />
 115:      <sample:Source ID="Code" runat="server" />
 116:      </form>
 117:  </body>
 118:  </html>
   1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Linq;
   4:  using System.Web;
   5:  using System.Web.UI;
   6:  using System.Web.UI.WebControls;
   7:   
   8:  namespace Atom.Website.Samples.AtomicProgressbar
   9:  {
  10:      public partial class ClientSideEvents : System.Web.UI.Page
  11:      {
  12:          protected void Page_Load(object sender, EventArgs e)
  13:          {
  14:   
  15:          }
  16:      }
  17:  }
   1:  Imports System
   2:  Imports System.Collections.Generic
   3:  Imports System.Linq
   4:  Imports System.Web
   5:  Imports System.Web.UI
   6:  Imports System.Web.UI.WebControls
   7:  Namespace Atom.Website.Samples.AtomicProgressbar
   8:      Public Partial Class ClientSideEvents
   9:          Inherits System.Web.UI.Page
  10:          Protected Sub Page_Load(sender As Object, e As EventArgs)
  11:          End Sub
  12:      End Class
  13:  End Namespace