2016-06-24 7 views
2

私はfarbtasticを使い始めましたし、そのことは素晴らしいです。ただし、初期化時にsetColorメソッドは認識されません。farbtasticの初期色を設定する方法は?

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は関数ではありません。私はどのように私の遠くのオブジェクトの色を設定する必要がありますか?参考までに、これは私が作成したASPコントロールです:

 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> 

どの

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が定義されているとしましょう次のようになります。

enter image description here

答えて

4

あなたがfarbtasticオブジェクトにsetColorをメソッドを呼び出す必要がthe docsから見ることができます:

farbtastic jqueryのプラグインのリターンjQueryオブジェクト、あなたが$.farbtastic関数を呼び出す必要があります。

は$ .farbtasticを呼び出す(プレースホルダ) $(プレースホルダ).farbtastic()を使用する場合と同じですが、FarbtasticオブジェクトがjQueryオブジェクトではなく である点が異なります。これは、あなたが Farbtasticメソッドとプロパティ

$.farbtastic(currentPicker).setColor(selectedColor); 
を使用することができます
関連する問題