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 <table id='explanation' border='0' cellpadding='0' cellspacing='5' style='clear:both'><tr valign='top'><td>
  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 </td>
  37 <td>
  38 <script type="text/javascript"><!--
  39 google_ad_client = "pub-7218597156507462";
  40 /* 125x125, created 5/11/09 */
  41 google_ad_slot = "9298106441";
  42 google_ad_width = 125;
  43 google_ad_height = 125;
  44 //-->
  45 </script>
  46 <script type="text/javascript"
  47 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  48 </script>
  49 </td>
  50 </tr></table>
  51
  52
  53 <p>
  54 <button onclick='ToggleElements("test","#list1 li");'>Toggle all items in list 1</button>
  55 <button onclick='ToggleElements("test","#list2 li:first-child");'>Toggle first item in list 2</button>
  56 <button onclick='ToggleElements("test","ul li:last-child");'>Toggle last item in all lists</button>
  57 </p>
  58
  59 <table border='1' cellpadding='4' id='test'>
  60 <tr>
  61
  62 <td>
  63 List 1
  64 <ul id='list1'>
  65 <li>Apple 1
  66 <li>Apple 2
  67 <li>Apple 3
  68 <li>Apple 4
  69 </ul>
  70 </td>
  71
  72 <td>
  73 List 2
  74 <ul id='list2'>
  75 <li>Banana 1
  76 <li>Banana 2
  77 <li>Banana 3
  78 <li>Banana 4
  79 </ul>
  80 </td>
  81
  82 <td>
  83 List 3
  84 <ul id='list3'>
  85 <li>Coconut 1
  86 <li>Coconut 2
  87 <li>Coconut 3
  88 <li>Coconut 4
  89 </ul>
  90 </td>
  91
  92 </tr>
  93 </table>
  94
  95 </body>
  96 </html>