Available in the OSS Version

Themes - Overview

This sample demonstrates the Ignite UI for jQuery Metro theme inspired by Windows UI design.

igGrid

Show
records
Product Name
Product Number
List Price
Standard Cost
Add new row
Adjustable RaceAR-538100
Bearing BallBA-832700
BB Ball BearingBE-234900
Headset Ball BearingsBE-290800
BladeBL-203600
LL CrankarmCA-596500
ML CrankarmCA-673800
HL CrankarmCA-745700
Chainring BoltsCB-290300
Chainring NutCN-613700

igEditors

igCombo

igTree

igDialog

igDataChart

jQuery UI Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget porta urna. Ut gravida mi at ligula commodo feugiat vehicula lacus tincidunt. Proin lobortis magna sed lacus malesuada commodo fermentum felis auctor. Sed quis nulla quis tellus facilisis malesuada. Mauris aliquam neque consequat mi blandit in luctus magna rutrum. Fusce sit amet ipsum magna. Vivamus porttitor arcu vitae eros molestie et sagittis dolor cursus. Quisque ultrices feugiat risus, vitae molestie felis interdum ac. Suspendisse pellentesque magna nec est commodo porttitor.

jQuery UI Datepicker

PrevNext
March 2025
SuMoTuWeThFrSa
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Copy to Clipboard
<h2>igGrid</h2>
<table id="grid"></table>

<h2>igEditors</h2>
<!-- Editors can also be created from DIV elements -->
<p>
    <input id="textEditor" value="John"></input></p>
<p>
    <input id="dateEditor" value="07/07/2012"></input></p>
<p>
    <input id="maskEditor" value="mask edit"></input></p>
<p>
    <input id="currencyEditor" value="42"></input></p>
<p>
    <input id="numericEditor" value="42"></input></p>
<p>
    <input id="percentEditor" value="0.42"></input></p>
<p style="padding: 2px">
    <input id="datePicker" type="date"></input></p>

<h2>igCombo</h2>
<div id="combo"></div>

<h2>igTree</h2>
<ul id="tree"></ul>

<h2>igDialog</h2>
<input type="button" id="openDialog"></input>
<div id="dialog">
    <img style="width: 200px" src="/images/samples/dialog-window/content.jpg"></img>
</div>

<h2>igDataChart</h2>
<div style="width: 80%; min-width: 210px;">
    <div id="chart"></div>
</div>

<h2>jQuery UI Tabs</h2>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Lorem ipsum</a></li>
    <li><a href="#tabs-2">Nunc lacinia</a></li>
    <li><a href="#tabs-3">Praesent tristique</a></li>
  </ul>
  <div id="tabs-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget porta urna. Ut gravida mi at ligula commodo feugiat vehicula lacus tincidunt. Proin lobortis magna sed lacus malesuada commodo fermentum felis auctor. Sed quis nulla quis tellus facilisis malesuada. Mauris aliquam neque consequat mi blandit in luctus magna rutrum. Fusce sit amet ipsum magna. Vivamus porttitor arcu vitae eros molestie et sagittis dolor cursus. Quisque ultrices feugiat risus, vitae molestie felis interdum ac. Suspendisse pellentesque magna nec est commodo porttitor.</p>
  </div>
  <div id="tabs-2">
    <p>Nunc lacinia ligula a nisl porta sed facilisis mauris facilisis. Sed a ante turpis, eget semper odio. Curabitur facilisis faucibus iaculis. Ut fermentum pretium ultrices. Etiam sem dui, adipiscing sed tempus et, adipiscing eget erat. Vestibulum nec eros magna.</p>
  </div>
  <div id="tabs-3">
    <p>Praesent tristique arcu eget ligula pulvinar mollis. Maecenas at elit at justo posuere gravida id eu enim. Duis imperdiet lectus nec augue sollicitudin hendrerit. Suspendisse consectetur, lorem nec eleifend rutrum, eros metus sodales libero, et rutrum diam augue et lectus. Integer sed est vitae risus dignissim condimentum ullamcorper at massa. Donec a orci nisl, eget ullamcorper augue. Quisque sagittis fringilla tortor. Vivamus ligula velit, aliquam ut pellentesque quis, fringilla sit amet tortor.</p>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis risus sit amet lorem facilisis posuere. Cras malesuada lobortis sodales. Praesent aliquam elementum tortor nec sollicitudin. Phasellus sed erat lectus, elementum adipiscing odio.</p>
  </div>
</div>

<h2>jQuery UI Datepicker</h2>
<div id="datepickerui"></div>