jQuery Mobile is a touch-optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
Ref:http://demos.jquerymobile.com/1.4.1/
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>審批信息</h1> </div> <div role="main" class="ui-content"> <label for="text-basic">批示意見:</label> <input type="text" name="text-basic" data-clear-btn="true" id="text-basic"> <input type="button" value="同意"> <input type="button" value="拒絕"> <form> <fieldset data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"> <legend>申請人資料</legend> <div class="ui-field-contain"> <label for="textinput-1">建議書編號：</label> <input type="text" name="textinput-1" id="textinput-1" data-mini="true" value="P-001"> </div> <div class="ui-field-contain"> <label for="textinput-2">批示日期：</label> <input type="text" name="textinput-1" id="textinput-2" data-mini="true" value="01/01/1014"> </div> <div class="ui-field-contain"> <label for="textinput-3">預留鐘數：</label> <input type="text" name="textinput-1" id="textinput-3" data-mini="true" value="20"> </div> <div class="ui-field-contain"> <label for="textinput-4">申請編號：</label> <input type="text" name="textinput-1" id="textinput-4" data-mini="true" value="000001-14"> </div> <div class="ui-field-contain"> <label for="textinput-5">申請人：</label> <input type="text" name="textinput-1" id="textinput-5" data-mini="true" value="Max"> </div> <div class="ui-field-contain"> <label for="textinput-6">申請日期：</label> <input type="text" name="textinput-1" id="textinput-6" data-mini="true" value="05/02/2014"> </div> </fieldset> <fieldset data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"> <legend>申請明細</legend> <div class="ui-field-contain"> <table class="ui-responsive table-stroke table-stripe" id="table1" data-role="table" data-mode="reflow"> <thead> <tr> <th data-priority="persist">日期</th> <th data-priority="1">時間</th> <th data-priority="2">原因</th> <th data-priority="3">補償類別</th> </tr> </thead> <tbody> <tr> <th>01/02/2014</th> <td>8:00-9:00</td> <td>xxx</td> <td>02</td> </tr> <tr> <th>02/02/2014</th> <td>10:00-11:00</td> <td>xxx</td> <td>01</td> </tr> <tr> <th>03/02/2014</th> <td>7:00-9:00</td> <td>xxx</td> <td>01</td> </tr> <tr> <th>04/02/2014</th> <td>9:00-10:00</td> <td>xxx</td> <td>02</td> </tr> </tbody> </table> </div> </fieldset> <fieldset data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"> <legend>審批歷史</legend> <div class="ui-field-contain"> <table class="ui-responsive table-stroke table-stripe" id="table2" data-role="table" data-mode="reflow"> <thead> <tr> <th data-priority="persist">審批人</th> <th data-priority="1">審批時間</th> <th data-priority="2">批示意見</th> </tr> </thead> <tbody> <tr> <th>Nick</th> <td>06/02/2014</td> <td>同意</td> </tr> <tr> <th>Sam</th> <td>06/02/2014</td> <td>同意</td> </tr> </tbody> </table> </div> </fieldset> </form> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-refresh" href="#">刷新</a> <h1>工作清單</h1> </div> <div role="main" class="ui-content"> <form> <div class="ui-field-contain"> <table class="ui-responsive table-stroke table-stripe" id="tablex" data-role="table" data-mode="reflow"> <thead> <tr> <th data-priority="persist">選擇</th> <th data-priority="persist">申請編號</th> <th data-priority="1">申請人</th> <th data-priority="2">申請日期</th> <th data-priority="3">建議書編號</th> <th data-priority="4">批示日期</th> </tr> </thead> <tbody> <tr> <th> <input type="checkbox" /></th> <th>000001-14</th> <td>Nick</td> <td>01/02/2014</td> <td>P-001</td> <td>02/02/2014</td> </tr> <tr> <th> <input type="checkbox" /></th> <th>000002-14</th> <td>Sam</td> <td>02/02/2014</td> <td>P-002</td> <td>03/02/2014</td> </tr> <tr> <th> <input type="checkbox" /></th> <th>000003-14</th> <td>Max</td> <td>03/02/2014</td> <td>P-003</td> <td>04/02/2014</td> </tr> </tbody> </table> <input type="button" value="審批"> </div> </form> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-back" href="#">返回</a> <h1>審批信息</h1> </div> <div role="main" class="ui-content"> <fieldset data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"> <legend>選取列表</legend> <div class="ui-field-contain"> <fieldset data-role="controlgroup" data-type="horizontal"> <button class="ui-shadow ui-btn ui-corner-all ui-icon-check ui-btn-icon-left">同意</button> <button class="ui-shadow ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">拒絕</button> <button class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-left">上一個</button> <button class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-left">下一個</button> </fieldset> <div class="ui-field-contain"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">申請編號：000001-14<span class="ui-li-count" style="color:green;">同意</span></li> <li><h2>情況屬實</h2></li> <li data-role="list-divider">申請編號：000002-14<span class="ui-li-count" style="color:red;">拒絕</span></li> <li><h2>情況不符合</h2></li> </ul> </div> </div> <label for="text-basic">批示意見:</label> <input type="text" name="text-basic" data-clear-btn="true" id="text-basic"> <input type="button" value="確定"> </fieldset> <form> <fieldset data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"> <legend>申請人資料</legend> <div class="ui-field-contain"> <label for="textinput-1">建議書編號：</label> <input type="text" name="textinput-1" id="textinput-1" data-mini="true" value="P-001"> </div> <div class="ui-field-contain"> <label for="textinput-2">批示日期：</label> <input type="text" name="textinput-1" id="textinput-2" data-mini="true" value="01/01/1014"> </div> <div class="ui-field-contain"> <label for="textinput-3">預留鐘數：</label> <input type="text" name="textinput-1" id="textinput-3" data-mini="true" value="20"> </div> <div class="ui-field-contain"> <label for="textinput-4">申請編號：</label> <input type="text" name="textinput-1" id="textinput-4" data-mini="true" value="000001-14"> </div> <div class="ui-field-contain"> <label for="textinput-5">申請人：</label> <input type="text" name="textinput-1" id="textinput-5" data-mini="true" value="Max"> </div> <div class="ui-field-contain"> <label for="textinput-6">申請日期：</label> <input type="text" name="textinput-1" id="textinput-6" data-mini="true" value="05/02/2014"> </div> </fieldset> <fieldset data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"> <legend>申請明細</legend> <div class="ui-field-contain"> <table class="ui-responsive table-stroke table-stripe" id="table3" data-role="table" data-mode="reflow"> <thead> <tr> <th data-priority="persist">日期</th> <th data-priority="1">時間</th> <th data-priority="2">原因</th> <th data-priority="3">補償類別</th> </tr> </thead> <tbody> <tr> <th>01/02/2014</th> <td>8:00-9:00</td> <td>xxx</td> <td>02</td> </tr> <tr> <th>02/02/2014</th> <td>10:00-11:00</td> <td>xxx</td> <td>01</td> </tr> <tr> <th>03/02/2014</th> <td>7:00-9:00</td> <td>xxx</td> <td>01</td> </tr> <tr> <th>04/02/2014</th> <td>9:00-10:00</td> <td>xxx</td> <td>02</td> </tr> </tbody> </table> </div> </fieldset> <fieldset data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"> <legend>審批歷史</legend> <div class="ui-field-contain"> <table class="ui-responsive table-stroke table-stripe" id="table4" data-role="table" data-mode="reflow"> <thead> <tr> <th data-priority="persist">審批人</th> <th data-priority="1">審批時間</th> <th data-priority="2">批示意見</th> </tr> </thead> <tbody> <tr> <th>Nick</th> <td>06/02/2014</td> <td>同意</td> </tr> <tr> <th>Sam</th> <td>06/02/2014</td> <td>同意</td> </tr> </tbody> </table> </div> </fieldset> </form> </div> </div> </body> </html>