使用minicolors jquery

我一直試圖暗示minicolors。一切都很好，我已經定位它的方式我想，但也有一些問題，爲我jliery我在控制檯上得到這個錯誤未捕獲TypeError：對象[對象對象]沒有方法'miniColors'我已經包括所有jquery文件需要。使用minicolors jquery

<script src="javascripts/jquery.minicolors.js"></script> 
<link rel="stylesheet" href="stylesheets/jquery.minicolors.css" /> 

<input class="mini" type="minicolors" data-swatch-position="left" value="#75bd25" 

data-textfield="false" name="color" /> 


<script type="text/javascript"> 
$(document).ready(function() { 

$('INPUT[type=minicolors]').miniColors({ 
change: function(hex, rgb) {  $('body').css("background-color",hex); } 
}); 

}); 

</script>

感謝您的幫助！

這是reviced代碼我畫感謝您的幫助

$(document).ready(function() { 

    $('INPUT[type=minicolors]').on('change', function() { 

    var input = $(this), 
     hex = input.val(); 

     $('body').css("background-color",hex); 

    }); 

});

沒有錯誤，但這次它不工作我到底做錯了什麼？

再次感謝您的幫助！

來源

2012-12-22 Ragzor

UPDATE：

基於用戶反饋，對於MiniColors 2.0 API已經恢復到一個類似的方法來1.0。請參閱GitHub上的更新文檔。

科裏在這裏從ABS（插件作者）。 Jason和ickreheay都是對的。就在幾天前，MiniColors 2.0發佈了beta版，API確實發生了變化。開發商99.9％將只需要包含JavaScript文件的MiniColors並創建一個輸入控制是這樣的：

<input type="minicolors" />

該插件會自動啓用時，它首先加載網頁上的所有控件。對於那些誰需要動態地添加控件，只需插入<input>元素，然後調用init方法：

$.minicolors.init();

無需指定一個選擇。該插件的工作原理是儘可能簡化您的開銷。有關更多詳細信息，請參閱文檔中的Utility Functions。

至於你的新的錯誤，你需要：

綁定change事件以原始輸入元素
變化background-color到backgroundColor
使用輸入元素的value（和data-opacity屬性，如果你已啓用不透明度）

$('INPUT[type=minicolors]').on('change', function() { 

    // This shows how to obtain the hex color and opacity (when in use) 
    var hex = $(this).val(), 
     opacity = $(this).attr('data-opacity'); 

    $('BODY').css('backgroundColor', hex); 

});

注：雖然以前的MiniColors版本是基於元素的，但我覺得在2.0中使用前瞻性思維方法更合適。 99.9％的用戶只需要包含MiniColors JavaScript文件並添加一個輸入元素，其類型爲minicolors。對於那些需要額外功能的用戶，這只是一個額外的函數調用來更新事物。

請幫助測試MiniColors 2.0並向其家庭提交任何錯誤報告，功能請求等。GitHub。

來源

2012-12-24 23:26:21 claviska

您正在使用MiniColors的第2版，但使用的代碼僅適用於MiniColors版本1.使用舊版本1或read the new documentation並更新您的代碼。

來源

2012-12-22 04:57:29 icktoofay

我從來沒有使用過minicolors，但它看起來像是在嘗試將它用作基於插件的元素（大多數插件作者是如何編寫它們的插件的），但minicolors似乎是基於原型的。

換句話說，你不能使用$(selector).miniColors(...);，而是你必須使用$.minicolors.init()和他們支持的其他功能。

來源

2012-12-22 04:57:41

使用minicolors jquery

回答

相關問題