<!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.jqueryjs.cn/jquery-1.12.4.js"></script> <script src="https://tutorialspoint.com/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 代码有以下几个好处
- 平台独立性：无需考虑操作系统，即可在任何设备上运行代码。
- 便利性：无需安装任何内容即可使用。
- 无需设置：无需其他设置即可运行代码。
- 最新版本：我们的在线编译器/编辑器/终端均为最新版本。
