3

私は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>

次のようになります。

ここに画像の説明を入力

4

1 に答える 1

6

farbtastic オブジェクトで setColor メソッドを呼び出す必要があることは、ドキュメントから確認できます。

$.farbtasticfarbtastic jquery プラグインは jquery オブジェクトを返します。関数を呼び出す必要があります。

$.farbtastic(placeholder) の呼び出しは、jQuery オブジェクトの代わりに Farbtastic オブジェクトが返されることを除いて、$(placeholder).farbtastic() の使用と同じです。これにより、Farbtastic のメソッドとプロパティを使用できます。

$.farbtastic(currentPicker).setColor(selectedColor);
于 2016-06-24T12:38:46.963 に答える