examples/core/spotlight.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   5     <title>Spotlight Example</title>
   6     <!-- Ext -->
   7     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   8     <script type="text/javascript" src="../../bootstrap.js"></script>
   9
  10     <!-- example code -->
  11     <script type="text/javascript" src="../ux/Spotlight.js"></script>
  12     <script type="text/javascript" src="spotlight-example.js"></script>
  13
  14     <!-- Common Styles for the examples -->
  15     <link rel="stylesheet" type="text/css" href="../shared/example.css" />
  16     <style type="text/css">
  17         body {
  18             overflow: hidden;
  19         }
  20
  21         #demo-ct .x-table-layout-cell {
  22             padding: 20px;
  23         }
  24
  25         .x-spotlight {
  26             background-color: #ccc;
  27
  28             z-index: 8999;
  29             position: absolute;
  30             top: 0;
  31             left: 0;
  32             -moz-opacity: 0.5;
  33             opacity: .50;
  34             filter: alpha(opacity=50);
  35             width: 0;
  36             height: 0;
  37             zoom: 1;
  38         }
  39     </style>
  40 </head>
  41 <body>
  42 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
  43
  44 <h1>Spotlight</h1>
  45
  46 <p>This utility allows you to restrict input to a particular element by masking all other page content.</p>
  47 <p>The js is not minified so it is readable. See <a href="spotlight-example.js">spotlight-example.js</a>.</p>
  48
  49 <div id="start-ct"></div>
  50
  51 </body>
  52 </html>