Question

我正在尝试将jQuery颜色选择器放入我的网站。 The color picker, by lindekleiv，无效。我的代码是：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$('input#myColorPicker').colorPicker({
      format: 'hex',
      size: 100
});
</script>

页面的完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" href="../css/mainpage.css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Josefin+Slab:400,700,700italic,400italic' rel='stylesheet' type='text/css' />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="jquery.ui.colorPicker.min.js"></script>
<script>
$(function() { // Wait for page to load
    $('#myColorPicker').colorPicker({
        format: 'hex',
        size: 100
    });
});
</script>
</head>

<body>

<div id="head">
<h1><span>Welcome to CodeTowel&copy;.</span></h1>
<h1>The place to code, with help from Towel!</h1>
</div>

<p>Snippets are bits of code that you can download and put into your webpage. We have seperate snippets for the <code>&lt;code&gt;</code>, <code>&lt;pre&gt;</code>, and <code>&lt;kbd&gt;</code> elements.</p>
<p>Don't like the colors for the current website? Change 'em!</p>
<input id="myColorPicker" type="text" />
</body>
</html>

Answer 1

您的代码存在一些阻止其工作的问题 ......这里是：

该插件需要jQuery UI - 您需要加载
您没有加载包含插件的实际Javascript文件
您没有加载样式表文件
在使用.colorPicker
这不重要，但我建议您将选择器（input#myColorPicker）更改为#myColorPicker

所以..在完成所有这些更改后，这里将是最终代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" type="text/javascript"></script>
<script src="jquery.ui.colorPicker.min.js"></script>
<link rel="stylesheet" href="css/jquery.ui.colorPicker.css">
<script>
$(function() { // wait for page to load
    $("#myColorPicker").colorPicker({
        format: 'hex',
        size:   100
    });
});
</script>

然后，您要将颜色选择器放在HTML中，请添加

<input type="text" id="myColorPicker" name="color" />

我不能使用jQuery Color Picker小部件

页面的完整代码：

1 个答案: