git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/dtl/demos/demo_Events.html

   1 <html>
   2         <head>
   3                         <title>Demo using dojox.dtl._Templated</title>
   4             <script type="text/javascript" src="../../../dojo/dojo.js"
   5                                 djConfig="isDebug: true, parseOnLoad: true"></script>
   6             <script type="text/javascript" src="../../../dijit/dijit.js"></script>
   7                         <style type="text/css">
   8                                 @import "../../../dijit/themes/tundra/tundra.css";
   9                         </style>
  10             <script type="text/javascript">
  11                                         dojo.require("dojox.dtl._HtmlTemplated");
  12                                         dojo.require("dijit.form.Button");
  13
  14                                         dojo.declare("Fruit", [dijit._Widget, dojox.dtl._HtmlTemplated], {
  15                                                 widgetsInTemplate: true,
  16                                                 items: ["apple", "banana", "orange"],
  17                                                 keyUp: function(e){
  18                                                         if((e.type == "click" || e.keyCode == dojo.keys.ENTER) && this.input.value){
  19                                                                 var i = dojo.indexOf(this.items, this.input.value);
  20                                                                 if(i != -1){
  21                                                                         this.items.splice(i, 1);
  22                                                                 }else{
  23                                                                         this.items.push(this.input.value);
  24                                                                 }
  25                                                                 this.input.value = "";
  26                                                                 this.render();
  27                                                         }
  28                                                 },
  29                                                 postCreate: function(){
  30                                                         this.render();
  31                                                         dojo.connect(this.button, "onClick", this, "keyUp");
  32                                                 },
  33                                                 debug: function(e, verb, fruit){
  34                                                         console.debug("You " + verb + " a:", fruit);
  35                                                 },
  36                                                 // Note, the load tag here is superfluous, since _HtmlTemplate has a dojo.require for it.
  37                                                 templateString: '<!--{% load dojox.dtl.contrib.dijit %}--><div><input dojoAttachEvent="onkeyup: keyUp" dojoAttachPoint="input"> <button dojoType="dijit.form.Button" dojoAttachPoint="button">Add/Remove Item</button><ul><!--{% for item in items %}--><li onclick="debug \'ate\' item"><!--{{ item }}--></li><!--{% endfor %}--></ul></div>'
  38                                         });
  39
  40                 dojo.require("dojo.parser");
  41             </script>
  42                         <body class="tundra">
  43                                 <div dojoType="Fruit"></div>
  44                         </body>
  45         </head>
  46 </html>