Source

jqui / test / index.html

Full commit
<!DOCTYPE html>
<html>
  <head>
    <title>jQUI Test</title>
    <link href='../css/jqui.css' rel='stylesheet' type='text/css' />
    <script src='../js/jquery-1.4.2.min.js'></script>
    <script src='../js/jqui.js'></script>
  </head>
  <body>
    <div class='tab-demo'>
      <h2>Tab Demo</h2>
      <ul role='tabbed-browser'>
        <li>
          <a href='tab1.html'>Tab 1</a>
        </li>
        <li>
          <a href='tab2.html'>Tab 2</a>
        </li>
        <li>
          <a href='tab3.html'>Tab 3</a>
        </li>
        <li>
          <a href='tab4.html'>Tab 4</a>
        </li>
        <li>
          <a href='tab5.html'>Tab 5</a>
        </li>
        <div role='tab-content'>Tab content goes here.</div>
      </ul>
      <h3>HTML5 Tab bar</h3>
      <section role='tabbed-browser'>
        <header role='tab-bar'>
          <li>
            <a href='tab1.html'>Tab 1</a>
          </li>
          <li>
            <a href='tab2.html'>Tab 2</a>
          </li>
          <li>
            <a href='tab3.html'>Tab 3</a>
          </li>
          <li>
            <a href='tab4.html'>Tab 4</a>
          </li>
          <li>
            <a href='tab5.html'>Tab 5</a>
          </li>
        </header>
        <section role='tab-content'>
          Tab content goes here
        </section>
      </section>
    </div>
    <div class='button-demo'>
      <h2>Button Demo</h2>
      <h3>Buttons</h3>
      <button>Button</button>
      <button disabled='disabled'>Disabled Button</button>
      <button class='default'>Default Button</button>
      <br />
      <div class='button'>Div Button</div>
      <div class='button disabled'>Disabled Div Button</div>
      <div class='button default'>Default Div Button</div>
      <br />
      <input type='button' value='Input Button' />
      <input disabled='disabled' type='button' value='Disabled Input Button' />
      <input class='default' type='button' value='Default Input Button' />
      <input type='submit' value='Input Submit' />
      <input disabled='disabled' type='submit' value='Disabled Input Submit' />
      <h3>Icon buttons</h3>
      <button left-icon='action'>Left Icon</button>
      <button left-icon='action' right-icon='close'>Left & Right Icons</button>
      <h3>Button set</h3>
      <div class='button-set'>
        <input id='radio1' name='button-set' type='radio' />
        <label for='radio1'>Choice 1</label>
        <input checked='checked' id='radio2' name='button-set' type='radio' />
        <label for='radio2'>Choice 2</label>
        <input id='radio3' name='button-set' type='radio' />
        <label for='radio3'>Choice 3</label>
        <input disabled='disabled' id='radio4' name='button-set' type='radio' />
        <label for='radio4'>Disabled</label>
      </div>
      <h3>Radio buttons</h3>
      <input id='radio-a' name='radio' type='radio' />
      <input checked='checked' id='radio-b' name='radio' type='radio' />
      <input id='radio-c' name='radio' type='radio' />
      <h3>Disabled radio buttons</h3>
      <input disabled='disabled' name='radio-dis' type='radio' />
      <input checked='checked' disabled='disabled' name='radio-dis' type='radio' />
      <h3>Checkboxes</h3>
      <input type='checkbox' />
      <input checked='checked' type='checkbox' />
      <h3>Disabled checkboxes</h3>
      <input disabled='disabled' type='checkbox' />
      <input checked='checked' disabled='disabled' type='checkbox' />
    </div>
  </body>
  <div class='dialog-demo'>
    <h2>Dialog demo</h2>
    <h3>Modal dialog</h3>
    <button href='dialog.html' modal='true' role='dialog-source'>Open Modal Dialog</button>
    <h3>Non-modal dialog</h3>
    <button href='dialog.html' role='dialog-source'>Open Non Modal Dialog</button>
  </div>
  <div class='html5-demo'>
    <h2>HTML5 demo</h2>
    <h3>Number fields</h3>
    <input style='width:350px' type='range' value='26' />
    <br />
    <input disabled='disabled' style='width:350px' type='range' value='26' />
    <br />
    <input max='21' min='0' type='number' value='11' />
    <h3>Placeholder</h3>
    <input placeholder='Placeholder text' type='text' />
    <h3>Email, URL</h3>
    <input placeholder='Enter email address' type='email' />
    <br />
    <input placeholder='Enter website address' type='url' />
    <h3>Datepicker</h3>
    <h2>Datepicker fields</h2>
    <input type='date' />
    <input type='month' />
    <input type='week' />
    <input type='time' />
    <input type='datetime' />
    <input type='datetime-local' />
    <h2>Datepicker inline</h2>
    <h3>Search</h3>
    <input placeholder='Google' type='search' />
    <h3>Colour picker</h3>
    <input type='color' />
  </div>
  <div class='scrollbar-demo'>
    <h2>Scrollbars</h2>
    <div>
      <p>Text goes here</p>
    </div>
  </div>
  <div class='status-demo'>
    <h2>Highlight / Error / Success</h2>
    <p class='error'>
      <b>Error:</b>
      needs more cowbell.
    </p>
    <p class='success'>
      <b>Success:</b>
      your data was saved.
    </p>
    <p class='notice'>
      <b>Did you know:</b>
      that bananas are seedless, and thus likely to go extinct.
    </p>
    <p class='help'>
      <b>Help:</b>
      These boxes contain useful help.
    </p>
  </div>
  <div class='progress-bar-demo'>
    <h2>Progress bar</h2>
    <div class='progress' max='100' value='22'>
      <div></div>
    </div>
    <progress max='100' value='22'></progress>
    <script>
      setInterval(function(){$('.progress div').css('width', function(i, w){ if (parseInt(w) > 110) return 0; return parseInt(w) + 5 + "%";})}, 1000);
      setInterval(function(){$('.progress div').css('width', function(i, w){ if (parseInt(w) > 110) return 0; return parseInt(w) + 3 + "%";})}, 700);
      setInterval(function(){$('.progress div').css('width', function(i, w){ if (parseInt(w) > 110) return 0; return parseInt(w) + 1 + "%";})}, 1200);
    </script>
    <h2>Spinner</h2>
    <div class='spinner'></div>
  </div>
  <div class='resizeable-demo'>
    <h2>Resizeable demo</h2>
    <div left='true' right='true' role='resizeable'>
      <div class='handle left'></div>
      <div class='handle right'></div>
    </div>
  </div>
  <div class='disclosure-demo'>
    <h2>Disclosure demo</h2>
    <div role='disclosure'>
      <div class='header'>Disclose</div>
      <div class='content'>
        <p>
          Vivamus justo ligula, blandit et consequat nec, vulputate a elit. Morbi feugiat metus in ante scelerisque a pulvinar quam condimentum. Suspendisse potenti. Pellentesque convallis scelerisque nunc eget dapibus. Pellentesque ut enim justo. Fusce egestas urna sed nulla placerat iaculis. Donec porta malesuada massa, at fermentum nunc tincidunt ac. Integer nisi ligula, sodales bibendum interdum id, sodales sit amet orci. In rhoncus libero in purus vestibulum consequat. Aenean vel purus molestie leo pharetra sagittis. In hac habitasse platea dictumst. Quisque bibendum, metus a egestas convallis, est orci dapibus odio, vel pretium ante erat quis ipsum. Praesent at est in odio rhoncus cursus in sollicitudin velit. Aenean auctor molestie hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat nisl eget nisi consequat pretium. Nullam dui purus, commodo a vestibulum nec, semper varius nulla.
        </p>
      </div>
    </div>
  </div>
</html>