git.infodrom.org Git - infodrom/rico3/blob - examples/html/classTest.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>CSS Class Test</title>
   6
   7 <script src="LoadRicoClient.js" type="text/javascript"></script>
   8 <link href="../demo.css" type="text/css" rel="stylesheet" />
   9 <style type="text/css">
  10 .class1 {
  11   background-color: red;
  12   font-weight: bold;
  13 }
  14
  15 .class2 {
  16   color: blue;
  17 }
  18
  19 #test {
  20   border:1px solid black;
  21   padding: 3px;
  22 }
  23 .css {
  24   font-size: smaller;
  25 }
  26 </style>
  27 </head>
  28
  29 <body>
  30
  31 <div id='explanation'>
  32 Base Library:
  33 <script type='text/javascript'>
  34 document.write(Rico.Lib+' '+Rico.LibVersion);
  35 </script>
  36 <hr>
  37 <h1>Rico: Classes and Dimensions</h1>
  38 <p>This example adds and removes classes from the test element.
  39 </div>
  40
  41
  42 <p>
  43 <button onclick='Rico.addClass("test","class1");'>Add class 1</button>
  44 <button onclick='Rico.removeClass("test","class1");'>Remove class 1</button>
  45 <button onclick='alert(Rico.hasClass("test","class1"));'>Has class 1?</button>
  46 <span class='css'>(background=red, font=bold)</span>
  47 <br>
  48 <button onclick='Rico.addClass("test","class2");'>Add class 2</button>
  49 <button onclick='Rico.removeClass("test","class2");'>Remove class 2</button>
  50 <button onclick='alert(Rico.hasClass("test","class2"));'>Has class 2?</button>
  51 <span class='css'>(text color=blue)</span>
  52 <br>
  53 <button onclick='alert(Rico.windowWidth()+"x"+Rico.windowHeight());'>Window size?</button>
  54 <button onclick='alert("Top: "+Rico.cumulativeOffset("test").top);'>Paragraph position?</button>
  55 <button onclick='alert(Rico.getStyle("test","background-color"));'>Background color?</button>
  56 </p>
  57
  58 <p id='test'>
  59 This is the test element
  60 </p>
  61
  62 </body>
  63 </html>