<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>表格: 列切換 - jQuery Mobile 演示</title> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> <link rel="stylesheet" href="https://demos.jquerymobile.com/1.4.5/css/themes/default/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script> <script src="https://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div class="table-wrapper"><table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke ui-table ui-table-columntoggle"> <thead> <tr> <th data-priority="2" data-colstart="1" class="ui-table-priority-2">排名</th> <th data-colstart="2">電影標題</th> <th data-priority="3" data-colstart="3" class="ui-table-priority-3">年份</th> <th data-priority="1" data-colstart="4" class="ui-table-priority-1"><abbr title="Rotten Tomato 評分">評分</abbr></th> <th data-priority="5" data-colstart="5" class="ui-table-priority-5">評論</th> </tr> </thead> <tbody> <tr> <th class="ui-table-priority-2">1</th> <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external" class="ui-link">公民凱恩</a></td> <td class="ui-table-priority-3">1941</td> <td class="ui-table-priority-1">100%</td> <td class="ui-table-priority-5">74</td> </tr> <tr> <th class="ui-table-priority-2">2</th> <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external" class="ui-link">北非諜影</a></td> <td class="ui-table-priority-3">1942</td> <td class="ui-table-priority-1">97%</td> <td class="ui-table-priority-5">64</td> </tr> <tr> <th class="ui-table-priority-2">3</th> <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external" class="ui-link">教父</a></td> <td class="ui-table-priority-3">1972</td> <td class="ui-table-priority-1">97%</td> <td class="ui-table-priority-5">87</td> </tr> <tr> <th class="ui-table-priority-2">7</th> <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external" class="ui-link">畢業生</a></td> <td class="ui-table-priority-3">1967</td> <td class="ui-table-priority-1">91%</td> <td class="ui-table-priority-5">122</td> </tr> <tr> <th class="ui-table-priority-2">8</th> <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external" class="ui-link">綠野仙蹤</a></td> <td class="ui-table-priority-3">1939</td> <td class="ui-table-priority-1">90%</td> <td class="ui-table-priority-5">72</td> </tr> <tr> <th class="ui-table-priority-2">9</th> <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external" class="ui-link">雨中曲</a></td> <td class="ui-table-priority-3">1952</td> <td class
嘗試此線上 jQuery Mobile 編輯器（版本 jQueryMobile (1.4.5))以直接在瀏覽器中編輯、執行和共享你的 Jquerymobile 程式碼。此線上編譯器讓你使用最新版本的 jQueryMobile (1.4.5) 編輯和編譯 Jquerymobile 程式碼，讓你倍感舒適。
如何使用線上 jQuery Mobile 編輯器？
編寫並執行程式碼
- 直接在“原始碼”標籤下編寫你的程式（或貼上它）。
- 如果你想儲存你的程式，請轉到“專案”選單並儲存它。
- 你可以直接執行你的程式，無需儲存，只需點選“執行”按鈕即可。
如何輸入使用者輸入項？
最新版本的線上 jQuery Mobile 編輯器允許在終端視窗中提供程式輸入，就像在你的計算機上執行程式一樣。因此，只需執行程式，並從右側可用的終端視窗提供程式輸入（如果有）即可。
鍵盤快捷鍵
以下是我們編輯器的關鍵字快捷鍵
| 快捷鍵 | 說明 |
|---|
| ⌘ + Enter | 執行程式 |
| ⌘ + S | 儲存專案（需要登入） |
| ⇧ + ⌘ + S | 另存為專案 |
| ⌘ + P | 新建專案 |
| ⌘ + G | 共享專案 |
| ⌘ + Z | 撤銷編輯 |
| ⌘ + Y | 恢復編輯 |
| ⌘ + A | 全選文字 |
| ⌘ + X | 剪下選定文字 |
| ⌘ + C | 複製選定文字 |
| ⌘ + V | 貼上複製的文字 |
| ⌘ + F | 搜尋文字 |
| ⌘ + ⌥ + F | 替換文字 |
| 快捷鍵 | 說明 |
|---|
| Ctrl + Enter | 執行程式 |
| Ctrl + S | 儲存專案 |
| Shift + Ctrl + S | 另存為專案 |
| Ctrl + G | 共享專案 |
| Ctrl + Z | 撤銷編輯 |
| Ctrl + Y | 恢復編輯 |
| Ctrl + A | 全選文字 |
| Ctrl + X | 剪下選定文字 |
| Ctrl + C | 複製選定文字 |
| Ctrl + V | 貼上複製的文字 |
| Ctrl + F | 搜尋文字 |
| Ctrl + H | 替換文字 |
儲存和共享專案程式碼
線上儲存 Jquerymobile 專案
你可以在我們這裡儲存你的 Jquerymobile 專案，以便稍後訪問此專案。要儲存專案，你需要向我們建立一個登入 ID。因此，在儲存專案之前，請使用此頁面右上角的連結來建立一個登入 ID。
線上共享 Jquerymobile 專案
你可以使用此功能與你的老師、同學和同事共享你的 Jquerymobile 程式碼。只需單擊共享按鈕，它就會建立一個短連結，可以透過電子郵件、WhatsApp 甚至透過社交媒體進行共享。如果共享連結已閒置近 3 個月，它將被刪除。
編輯器的更多功能
- 主題 – 你可以從“設定”選單下的“編輯器主題”選項更改當前編輯器的主題。
- 字型大小 – 你可以從“設定”選單下的“字型大小”選項更改編輯器/編譯器的字型大小。
- 製表符大小 – 你可以從“設定”選單下的“製表符大小”選項更改制表符大小。
- 顯示/隱藏行號 – 你可以使用“設定”選單下的“顯示行號”或“隱藏行號”選項從程式碼中顯示/隱藏行號。
- 還有很多其他功能。
為什麼要使用線上 jQuery Mobile 編輯器？
使用線上 jQuery Mobile 編輯器來執行 Jquerymobile 程式碼有以下幾個好處
- 平臺獨立性：無需考慮作業系統，即可在任何裝置上執行程式碼。
- 便利性：無需安裝任何內容即可使用。
- 無需設定：無需其他設定即可執行程式碼。
- 最新版本：我們的線上編譯器/編輯器/終端均為最新版本。
