我开始使用farbtastic,它真的很棒。然而,在初始化时它不知道setColor方法。
function initColorPickers(callback){
$(".picker-color-value").each(function () {
var hiddenColor = $(this).parent().find(".hidden-color-value");
var selectedColor = $(this).parent().find(".selected-color");
var currentPicker = $(this).farbtastic(function (color) {
hiddenColor.val(color);
selectedColor.css("background-color", color);
if (typeof callback === "function") {
callback(color);
}
});
if (typeof getColorPickerColor === "function") {
var c = getColorPickerColor(this);
hiddenColor.val(c);
selectedColor.css("background-color", c);
currentPicker.setColor(c);
}
});
}
它说setColor不是一个函数。我应该如何设置我的farbtastic对象的颜色?供您参考,这是我创建的ASP控件:
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.HtmlControls
Imports System.Web.UI.WebControls
Imports DataObjects
Public Class ColorPicker
Inherits Web.UI.Control
Protected input As HtmlInputHidden
Public Sub NeedClient()
Me.Page.ClientScript.RegisterClientScriptResource(GetType(TTControls.ColorPicker), "TTControls.farbtastic.js")
Me.Page.ClientScript.RegisterClientScriptResource(GetType(TTControls.ColorPicker), "TTControls.colorPicker.js")
Dim attributes As List(Of TTPair(Of String, String)) = New List(Of TTPair(Of String, String))
attributes.Add(New TTPair(Of String, String) With {.First = "rel", .Second = "stylesheet"})
Utils.SetCSS(Me.Page, "colorPickerCSS", Me.Page.ClientScript.GetWebResourceUrl(GetType(TTControls.ColorPicker), "TTControls.farbtastic.css"), attributes)
End Sub
Public Function GetColor() As String
Return input.Value
End Function
Public Sub SetColor(ByVal color As String)
input.Value = color
End Sub
Protected Overrides Sub OnInit(ByVal e As System.EventArgs)
input = New HtmlInputHidden()
input.Attributes.Add("class", "hidden-color-value")
Dim picker = New HtmlGenericControl("div")
picker.Attributes.Add("class", "picker-color-value")
picker.Style.Add("width", "220px")
picker.Style.Add("height", "220px")
Dim selectedColor = New HtmlGenericControl("div")
selectedColor.Style.Add("width", "100px")
selectedColor.Style.Add("height", "100px")
selectedColor.Style.Add("margin-top", "50px")
selectedColor.Style.Add("background-color", input.Value)
selectedColor.Attributes.Add("class", "selected-color")
Me.Controls.Add(input)
Me.Controls.Add(picker)
Me.Controls.Add(selectedColor)
MyBase.OnInit(e)
End Sub
Protected Overrides Sub OnPreRender(ByVal e As System.EventArgs)
NeedClient()
MyBase.OnPreRender(e)
End Sub
End Class
假设 getColorPickerColor 的定义如下:
function getColorPickerColor(picker) {
return lastColor;
}
这是输出的HTML代码:
<div class="ui-field" style="display: flex;">
<label for="ctl00_PageBody_colorPicker" id="ctl00_PageBody_lblColor" class="ui-label">Color</label>
<input name="ctl00$PageBody$ctl00" type="hidden" class="hidden-color-value" value="#822b2b"><div class="picker-color-value" style="width:220px;height:220px;"><div class="farbtastic"><div class="color" style="background-color: rgb(255, 0, 0);"></div><div class="wheel"></div><div class="overlay"></div><div class="h-marker marker" style="left: 97px; top: 13px;"></div><div class="sl-marker marker" style="left: 97px; top: 113px;"></div></div></div><div style="width: 100px; height: 100px; margin-top: 50px; background-color: rgb(130, 43, 43);" class="selected-color"></div>
</div>
看起来就像这样:
(注:此文为HTML代码翻译,仅供参考)