Layout & UI
The imixs-ui.js provides some layout methods to apply the jQuery UI widgets to a page section. See the following example to layout a jQuery UI tab navigation
<script type="text/javascript" src="./js/imixs-ui.js"></script> <script> $(document).ready(function() { $('#form1').imixsLayout(); }); </script>
Tab Navigation
The jQuery Tab Navigation can be used to split up a form into several sections:
... <form id="form1"> <div class="imixs-tabs"> <ul> <li><a href="#tab-1">Tab1</a></li> <li><a href="#tab-2">Tab2</a></li> </ul> <div id="tab-1"> <p>Some data...</p> </div> <div id="tab-2" class="imixs-form-section"> <p>Another page...</p> </div> </div> ...
Date Time Picker
An input field assigend to the class ‘imixs-date’ will be automatically displayed using the jQuery UI DatePicker component
<dl> <dt>Created:</dt> <dd> <input type="text" class="imixs-date" id="from" /> - <input type="text" class="imixs-date" id="to" /> </dd> </dl>
Imixs-Script provides also a DateTime component to additional select hours and minutes:
<input type="text" class="imixs-datetime" id="from" />
See the section Documents so see how to work with date values.