彰化一整天的論壇

 找回密碼
 立即註冊
查看: 1891|回復: 0

jquery mobile 表格範例

[複製鏈接]
發表於 2014-3-19 21:33:37 | 顯示全部樓層 |閱讀模式
jmobile_table_01.png

1.正常顯示畫面

jmobile_table_02.png

2.可以自訂顯示欄位

jmobile_table_03.png

3.畫面變小會自動依顯示順序顯示欄位




  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
  6. <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  7. <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  8. </head>
  9. <body>

  10. <style>
  11. tr
  12. {
  13. border-bottom: 1px solid lightgray;
  14. }
  15. </style>
  16. </head>
  17. <body>

  18. <div data-role="page" id="pageone">
  19.   <div data-role="header">
  20.     <h1>Styling Column Toggle Table</h1>
  21.   </div>
  22.   
  23.   <div data-role="main" class="ui-content">
  24.     <table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
  25.       <thead>
  26.         <tr>
  27.           <th data-priority="6">CustomerID</th>
  28.           <th>CustomerName</th>
  29.           <th data-priority="1">ContactName</th>
  30.           <th data-priority="2">Address</th>
  31.           <th data-priority="3">City</th>
  32.           <th data-priority="4">PostalCode</th>
  33.           <th data-priority="5">Country</th>
  34.         </tr>
  35.       </thead>
  36.       <tbody>
  37.         <tr>
  38.           <td>1</td>
  39.           <td>Alfreds Futterkiste</td>
  40.           <td>Maria Anders</td>
  41.           <td>Obere Str. 57</td>
  42.           <td>Berlin</td>
  43.           <td>12209</td>
  44.           <td>Germany</td>
  45.         </tr>
  46.         <tr>
  47.           <td>2</td>
  48.           <td>彰化一整天</td>
  49.           <td>Antonio Moreno</td>
  50.           <td>Mataderos 2312</td>
  51.           <td>M憖ico D.F.</td>
  52.           <td>05023</td>
  53.           <td>Mexico</td>
  54.         </tr>
  55.         <tr>
  56.           <td>3</td>
  57.           <td>Around the Horn</td>
  58.           <td>Thomas Hardy</td>
  59.           <td>120 Hanover Sq.</td>
  60.           <td>London</td>
  61.           <td>WA1 1DP</td>
  62.           <td>UK</td>
  63.         </tr>
  64.         <tr>
  65.           <td>4</td>
  66.           <td>Berglunds snabbk鞿</td>
  67.           <td>Christina Berglund</td>
  68.           <td>Berguvsv輍en 8</td>
  69.           <td>Lule?</td>
  70.           <td>S-958 22</td>
  71.           <td>Sweden</td>
  72.         </tr>

  73.       </tbody>
  74.     </table>
  75.   </div>

  76.   <div data-role="footer">
  77.     <h1>Footer Text</h1>
  78.   </div>
  79. </div>

  80. </body>
  81. </html>
複製代碼
參考資料:http://www.w3schools.com/jquerymobile/jquerymobile_tables.asp


回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

 ㄚ母滴雞湯
 員林香純滴雞精

Archiver|手機版|小黑屋|彰化一整天的論壇(Excel,Office)  |网站地图

GMT+8, 2019-10-18 02:09 , Processed in 0.129113 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表