Question

我正在使用这个插件：

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的新手，有点困惑。不知道如何让它工作。关于我可能做错的任何想法？

Answer 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>

Answer 2

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

<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，并在启动颜色选择器之前加载。

如何制作JQuery Color Box？

2 个答案: