在本文中,我们将学习如何使用 jQuery 移动插件设计可编辑的列表视图功能。该插件提供了一个直观的用户界面来向现有列表添加或删除列表项。
要设计和实现插件,请从链接下载所需的预编译文件或库并将其保存在您的工作文件夹中。编码时应注意文件路径名。
注意:请使用 HTML 代码头部部分中的以下链接进行执行,如下所示。
rel=”stylesheet” type=”text/css”/>
rel=”stylesheet” type=”text/css”/>
示例 1:以下示例使用 jQuery 移动插件演示了一个简单的可编辑列表视图。用户可以在列表中添加和删除水果名称,如下面的输出所示。
HTML
jQuery Mobile Editable Listview
- Pineapple
- Mango
- Orange
- Banana
HTML
jQuery Mobile editable listview
Complex Editable Listview
输出:
- 编辑前:
- 编辑后:
示例 2:以下示例演示了另一个具有一些添加属性的可编辑列表视图。表单“id”应与“ul”标签上的 data-editable-form属性匹配,并且 data-editable属性设置为“true”。
HTML
jQuery Mobile editable listview
Complex Editable Listview
输出:
- 编辑前:
- 编辑后: