git.infodrom.org Git - infodrom/rico3/blob - examples/html/cssSelect.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 - CSS Selection</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 function ToggleElements(id,cssSelect) {
  12   var elements=Rico.select(cssSelect,id);
  13   for (var i=0; i<elements.length; i++) {
  14     if (Rico.visible(elements[i]))
  15       Rico.hide(elements[i]);
  16     else
  17       Rico.show(elements[i]);
  18   }
  19 }
  20 </script>
  21
  22 </head>
  23
  24 <body>
  25
  26 <div id='explanation'>
  27 Base Library:
  28 <script type='text/javascript'>
  29 document.write(Rico.Lib+' '+Rico.LibVersion);
  30 </script>
  31 <hr>
  32 <h1>Rico: CSS Selection</h1>
  33 <p>This example demonstrates the library's CSS selector engine.
  34 Click on a button to toggle the visibility of the specified items.
  35 </p>
  36 </div>
  37
  38
  39 <p>
  40 <button onclick='ToggleElements("test","#list1 li");'>Toggle all items in list 1</button>
  41 <button onclick='ToggleElements("test","#list2 li:first-child");'>Toggle first item in list 2</button>
  42 <button onclick='ToggleElements("test","ul li:last-child");'>Toggle last item in all lists</button>
  43 </p>
  44
  45 <table border='1' cellpadding='4' id='test'>
  46 <tr>
  47
  48 <td>
  49 List 1
  50 <ul id='list1'>
  51 <li>Apple 1
  52 <li>Apple 2
  53 <li>Apple 3
  54 <li>Apple 4
  55 </ul>
  56 </td>
  57
  58 <td>
  59 List 2
  60 <ul id='list2'>
  61 <li>Banana 1
  62 <li>Banana 2
  63 <li>Banana 3
  64 <li>Banana 4
  65 </ul>
  66 </td>
  67
  68 <td>
  69 List 3
  70 <ul id='list3'>
  71 <li>Coconut 1
  72 <li>Coconut 2
  73 <li>Coconut 3
  74 <li>Coconut 4
  75 </ul>
  76 </td>
  77
  78 </tr>
  79 </table>
  80
  81 </body>
  82 </html>