Bootstrap-Colorpicker：無法設置屬性'colorpicker'undefined

我想在窗體中顯示顏色選擇器。我使用的是bootstrap-colorpicker，並有建立我的ColorPicker（好吧，我從高級形式的頁面複製它從Admin LTE 2 demo）：Bootstrap-Colorpicker：無法設置屬性'colorpicker'undefined

<!-- 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]-->

感謝您的幫助。

來源

2015-08-03 Hack4Life

您能否提供您的'' HTML部件？由於Bootstrap在其組件中使用JQuery，因此可能需要在任何事情之前放置JQuery。 –

發佈更新@Zeratops – Hack4Life

bootstrap-colorpicker.js需要根據jQuery包含。

做完這一切後，一切工作正常。

來源

2015-08-04 06:09:58 Hack4Life

你的顏色選擇器庫是相互矛盾的，爲什麼你的顏色選擇器的功能沒有定義我有另一種方式來使用顏色選擇器that`s您可以直接使用

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

它會增加你`噸拾色器需要添加一個顏色選擇器庫。

來源

2015-08-03 10:51:07

是的，這個工程，但它看起來......是可怕的。有沒有辦法可以使用bootstrap-colorpicker插件？ – Hack4Life

你可以使用這個 - http://bootstrapformhelpers.com/colorpicker/ 或http://mjolnic.com/bootstrap-colorpicker/ –

你必須在底部使用js和css顏色選擇器庫你可以 –

Bootstrap-Colorpicker：無法設置屬性'colorpicker'undefined

回答

相關問題