git.infodrom.org Git - infodrom/rico3/blob - examples/html/events.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   2 <html>
   3 <head>
   4
   5 <title>Rico 3.0 - Events</title>
   6
   7 <script src="LoadRicoClient.js" type="text/javascript"></script>
   8 <link href="../demo.css" type="text/css" rel="stylesheet" />
   9
  10 <script type='text/javascript'>
  11 Rico.TestClass=function(name,msg) {
  12   this.initialize(name,msg);
  13 }
  14
  15 Rico.TestClass.prototype = {
  16   initialize: function(name,msg) {
  17     this.msg=msg;
  18     this.addBtn=document.getElementById('add'+name);
  19     this.remBtn=document.getElementById('rem'+name);
  20     this.tstBtn=document.getElementById('tst'+name);
  21     Rico.eventBind(this.addBtn, 'click', Rico.eventHandle(this,'addClick'));
  22     Rico.eventBind(this.remBtn, 'click', Rico.eventHandle(this,'remClick'));
  23     this.tstHandle=Rico.eventHandle(this,'tstClick');
  24     this.isAttached=false;
  25   },
  26   addClick: function(e) {
  27     if (this.isAttached) {
  28       alert('already attached!');
  29     } else {
  30       Rico.eventBind(this.tstBtn, 'click', this.tstHandle);
  31       this.isAttached=true;
  32     }
  33   },
  34   remClick: function(e) {
  35     if (this.isAttached) {
  36       Rico.eventUnbind(this.tstBtn, 'click', this.tstHandle);
  37       this.isAttached=false;
  38     } else {
  39       alert('not attached!');
  40     }
  41   },
  42   tstClick: function(e) {
  43     var elem=Rico.eventElement(e);
  44     var loc=Rico.eventClient(e);
  45     alert(this.msg+'\nElement '+elem.id+' clicked at '+loc.x+','+loc.y);
  46   }
  47 }
  48
  49 Rico.onLoad(function() {
  50   var a=new Rico.TestClass('A','i am A king');
  51   var b=new Rico.TestClass('B','i am the queen B');
  52 });
  53 </script>
  54
  55 </head>
  56
  57 <body>
  58
  59 <table id='explanation' border='0' cellpadding='0' cellspacing='5' style='clear:both'><tr valign='top'><td>
  60 Base Library:
  61 <script type='text/javascript'>
  62 document.write(Rico.Lib+' '+Rico.LibVersion);
  63 </script>
  64 <hr>
  65 <h1>Rico: Events</h1>
  66 <p>In this example, the "Add" button adds an event to the "Test" button.
  67 Conversely, the "Remove" button removes that event from the "Test" button.
  68 </p>
  69 </td>
  70 <td>
  71 <script type="text/javascript"><!--
  72 google_ad_client = "pub-7218597156507462";
  73 /* 125x125, created 5/11/09 */
  74 google_ad_slot = "9298106441";
  75 google_ad_width = 125;
  76 google_ad_height = 125;
  77 //-->
  78 </script>
  79 <script type="text/javascript"
  80 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  81 </script>
  82 </td>
  83 </tr></table>
  84
  85 <p>
  86 <button id='addA'>Add event to A</button>
  87 <button id='remA'>Remove event from A</button>
  88 <button id='tstA'>Test A</button>
  89 </p>
  90
  91 <p>
  92 <button id='addB'>Add event to B</button>
  93 <button id='remB'>Remove event from B</button>
  94 <button id='tstB'>Test B</button>
  95 </p>
  96
  97 </body>
  98 </html>