1

我正在尝试将 jQuery 颜色选择器放入我的网站。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>
4

1 回答 1

2

您的代码有一些问题阻止了它的工作......它们是：

  1. 该插件需要 jQuery UI - 你需要加载它
  2. 您没有加载包含插件的实际 Javascript 文件
  3. 您没有加载样式表文件
  4. 您需要等待页面加载后才能使用.colorPicker
  5. 这不是那么重要，但我建议将您的选择器 ( 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" />
于 2013-07-15T08:56:37.393 回答