如何使用 jQuery Mobile 制作表单元素按钮？

jQuery Mobile 是一个基于 jQuery 的框架，专门用于开发适用于所有移动设备的网站和应用程序。如果您希望在移动设备上创建漂亮的表单元素按钮，那么 jQuery Mobile 是一个非常好的选择。

步骤

1. 引入 jQuery 和 jQuery Mobile 库

您需要在代码中引入 jQuery 库和 jQuery Mobile 库。 您可以从以下网址下载它们：jquery.com和http://jquerymobile.com。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

2. 创建一个表单元素

使用 HTML 创建一个表单元素。 例如：

<form>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
</form>

3. 添加 jQuery Mobile 标记

为了将表单元素转换为 jQuery Mobile 按钮，您需要用以下代码中的 data-role 属性替换元素的 type 属性（例如 submit 替换为 button）。 例如：

<form>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
    <button type="submit" data-role="button">Submit</button>
</form>

现在这个按钮就被 jQuery Mobile 转换成了漂亮的按钮。

总结

使用 jQuery Mobile 可以让您的表单和按钮看起来更漂亮和更适合移动设备。 只需要添加 data-role 属性，就可以将表单元素转换成漂亮的按钮。