博客

下面是使用jQuery Mobile创建一个颜色输入的完整攻略，包含两个示例：

步骤1：引入jQuery Mobile库

首先需要在html文件中引入jQuery和jQuery Mobile的库文件。在标签中添加以下两行代码：

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

步骤2：创建颜色输入控件

使用标准的HTML元素来创建颜色输入控件：

<label for="color-input">Choose a color:</label>
<input type="color" name="color-input" id="color-input" value="#336699">

这个元素的type属性设置为”color”，表示这是一个颜色输入控件。

步骤3：使用jQuery Mobile美化控件

为了让控件具有更好看的样式和更好的交互效果，需要使用jQuery Mobile的特殊样式和JavaScript功能。我们可以为元素添加data-role属性并设置为”none”，然后手动调用JavaScript代码来达到想要的效果：

<label for="color-input">Choose a color:</label>
<input type="color" name="color-input" id="color-input" value="#336699" data-role="none">

$(document).on("pagecreate", function () {
  $("#color-input").on("focus", function () {
    $(this).attr("type", "text");
  }).on("blur", function () {
    $(this).attr("type", "color");
  });
});

这段JavaScript代码的作用是为控件添加了一个事件监听器。当用户点击控件并获得焦点时，控件的type属性被设置为”text”，这样就可以显示一个文本输入框，并允许用户以文本方式输入颜色值。当控件失去焦点时，type属性被设置为”color”，控件将再次显示为一个颜色选择器。

示例1：将选定的颜色应用到元素上

<label for="color-input">Choose a color:</label>
<input type="color" name="color-input" id="color-input" value="#336699" data-role="none">

<div id="output" style="padding: 50px; background-color: #336699;"></div>

<script>
$(document).on("pagecreate", function () {
  $("#color-input").on("change", function () {
    var color = $(this).val();
    $("#output").css("background-color", color);
  });
});
</script>

这个示例中，我们在页面上添加了一个

<label for="color-input">Choose a color:</label>
<input type="color" name="color-input" id="color-input" value="#336699" data-role="none">

<div id="output"></div>

<script>
$(document).on("pagecreate", function () {
  $("#color-input").on("change", function () {
    var color = $(this).val();
    $("#output").text("Selected color: " + color);
  });
});
</script>