0

我正在使用这个插件：

https://github.com/evoluteur/colorpicker

我被困在这一步：

Now, let's attach it to an existing <input> tag:

<script type="text/javascript">
    $(document).ready(function() {
        $("#mycolor").colorpicker();
    });
</script>

<input style="width:100px;" id="mycolor" />

我将脚本放在头上，显然输入在正文中。我确保文件路径正确并且没有错误。当我进入 mycolor 字段时，颜色框不显示。我是 JS 新手，有点困惑。不知道如何让它工作。关于我可能做错了什么的任何想法？

4

2 回答 2

1

如果您继续阅读该网站上的说明，则说明您还必须放置以下内容：

<div style="width:128px;">
   <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
   <div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>

之后<input>。

基本上，绝对最小值是这样的：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css">
    <link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
        $(document).ready(function() {
            $("#mycolor").colorpicker();
         });
    </script>
    <div style="width:128px;">
        <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
        <div class="evo-colorind" style="background-color:#8db3e2"></div>
   </div>
于 2013-08-27T15:32:08.697 回答
0

实际上不，绝对最小值是这样的：

<link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css" type="text/css" media="all">
<link href="css/evol.colorpicker.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/evol.colorpicker.js" type="text/javascript"></script>

<input id="mycolor" value="#000000" />

<script>
    $(document).ready(function(){   
        $('#mycolor').colorpicker()
    });
</script>

颜色选择器会为您放置额外的 div 标签。@DevlshOne 所指的方向部分显示了另一种通过手动添加标签来启动颜色选择器的方法，但它们不是必需的。指示不是最清楚的。

您只需确保存在先决条件：JQuery、JQuery-UI、任何 JQuery-UI 主题（它仍然会在没有主题的情况下显示，但将是透明的）、evol.colorpicker.js（或 evol.colorpicker.min.js） , evol.colorpicker.css，并在您启动颜色选择器之前加载。

于 2013-09-10T08:10:03.277 回答