emacs/nxhtml/tests/in/mjt-imagesearch.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   4 <head>
   5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6 <title>mjt yahoo test</title>
   7 <script type="text/javascript" src="http://mjtemplate.org/dist/mjt-0.6/mjt.js"></script>
   8 <script type="text/javascript" src="http://mjtemplate.org/dist/mjt-0.6/src/yahooapi/yahooapi.js"></script>
   9 </head>
  10 <body onload="mjt.run('top')">
  11 <h2>Yahoo image search example</h2>
  12 using
  13 <a href="http://mjtemplate.org">mjt</a>
  14 to interact with the
  15 <a href="http://developer.yahoo.com/common/json.html">yahoo json api</a>
  16 <div id="top" style="display:none;">
  17 <div mjt.task="o">
  18        mjt.yahooapi.ImageSearch(mjt.urlquery.query||'kathakali')
  19     </div>
  20 <form method="get" action="">
  21 <div>
  22 <input type="text" name="query" value="${mjt.urlquery.query||''}" />
  23 <input type="submit" value="search" />
  24 </div>
  25 </form>
  26 <div mjt.choose="o.state">
  27 <div mjt.when="ready">
  28 <div mjt.for="img in o.result.Result">
  29 <h3>$img.Title</h3>
  30 <img alt="image" src="#" mjt.src="$img.Thumbnail.Url" style="float:left" />
  31 <div>$img.Summary</div>
  32 <hr style="clear:both" />
  33 </div>
  34 </div>
  35 <div mjt.when="wait">
  36         loading...
  37       </div>
  38 <div mjt.when="error">
  39 <div mjt.for="msg in o.messages">
  40           $msg.message
  41         </div>
  42 </div>
  43 </div>
  44 </div>
  45 </body>
  46 </html>