git.roojs.org Git - roojs1/blob - examples/tabs/tabs-adv.html

   1 <html>
   2 <head>
   3 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   4 <title>Tabs Example</title>
   5     <link rel="stylesheet" type="text/css" href="../../cssX/roojs-all.css"/>
   6     <link rel="stylesheet" type="text/css" href="../../cssX/xtheme-slate.css"/>
   7
   8      <script type="text/javascript" src="../../roojs-all.js"></script>
   9
  10 <link rel="stylesheet" type="text/css" href="tabs-example.css" />
  11 <script type="text/javascript" src="tabs-adv.js"></script>
  12
  13 <!-- Common Styles for the examples -->
  14 <link rel="stylesheet" type="text/css" href="../examples.css" />
  15         </head>
  16 <body>
  17 <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
  18 <h1>Tab Panel Example 2</h1>
  19 <p>Note that the js and css is not minified so it is readable. See <a href="tabs-adv.js">tabs-adv.js</a> for the tab creation code
  20 and <a href="tabs-example.css">tabs-example.css</a> for the css.</p>
  21
  22      <h3>Closable tabs with auto tab resize turned on.</h3><br /><br />
  23     <div id="tab-panel1" style="width:800px;height:300px;">
  24         <div id="root-tab">
  25             <a href="#" id="add-link">Add a new Tab</a>
  26             <div id="content">
  27             <hr />
  28             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
  29             <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
  30             <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
  31             </div>
  32         </div>
  33     </div>
  34 </body>
  35 </html>