Question

我想在表单中显示颜色选择器。我正在使用bootstrap-colorpicker并构建了我的颜色选择器（好吧，我已经从Admin LTE 2 demo的高级表单页面复制了它）：

<!-- Color Picker -->
<div class="form-group">
     <label>Color picker with addon:</label>
     <div class="input-group colorpicker-critically">
         <input type="text" class="form-control" />
         <div class="input-group-addon">
              <i></i>
         </div>
     </div>
     <!-- /.input group -->
</div>

我初始化插件：

 $(document).ready(function () {
    //color picker with addon
    $(".colorpicker-critically").colorpicker();
});

我在.js标记中的.css之前链接<head>。当然也包括jQuery。

当我尝试该页面时，我收到以下错误：

这是我的<head>代码：

<head><title></title>
<!-- bootstrap color picker -->
<script src="/plugins/colorpicker/bootstrap-colorpicker.min.js" type="text/javascript"></script>
<!-- Bootstrap Color Picker -->
<link href="/plugins/colorpicker/bootstrap-colorpicker.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/plugins/ionslider/ion.rangeSlider.min.js"></script>
<!-- Ion Slider -->
<link href="/plugins/ionslider/ion.rangeSlider.css" rel="stylesheet" type="text/css" />
<!-- ion slider Nice -->
<link href="/plugins/ionslider/ion.rangeSlider.skinNice.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/css/ion.rangeSlider.css"/>
    <link rel="stylesheet" href="/plugins/ionslider/ion.rangeSlider.skinFlat.css"/>
    <link rel="stylesheet" href="/plugins/ionslider//ion.rangeSlider.skinHTML5.css"/>
    <link rel="stylesheet" href="/plugins/ionslider/ion.rangeSlider.skinModern.css"/>
    <link rel="stylesheet" href="/plugins/ionslider/ion.rangeSlider.skinNice.css"/>
    <link rel="stylesheet" href="/plugins/ionslider/ion.rangeSlider.skinSimple.css"/>
    <link rel="stylesheet" href="/plugins/ionslider/normalize.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 


<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
<!-- Bootstrap 3.3.4 -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- FontAwesome 4.3.0 -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons 2.0.0 -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
<link href="../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
<!-- iCheck -->
<link href="../plugins/iCheck/flat/blue.css" rel="stylesheet" type="text/css" />
<!-- Morris chart -->
<link href="../plugins/morris/morris.css" rel="stylesheet" type="text/css" />
<!-- jvectormap -->
<link href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<!-- Date Picker -->
<link href="../plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<!-- Daterange picker -->
<link href="../plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->
<link href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

感谢您的帮助。

Answer 1

您的颜色选择器库是冲突的，这就是为什么没有定义颜色选择器功能我还有另一种方法可以使用颜色选择器直接使用

<input type="color" class="form-control" />

它会添加你不需要添加颜色选择器库的颜色选择器。

Answer 2

bootstrap-colorpicker.js需要加入jQuery。

这样做之后一切正常。

Bootstrap-Colorpicker：无法设置未定义的属性'colorpicker'

2 个答案: