JavaScriptのカラーピッカーはCSSの構文を使用しています。

Question

javascriptカラーピッカープラグイン（link）であるjscolorを使用しています。

このドキュメントでは、CSSクラス内でjavascriptを使用しています。

<input class="jscolor {padding:20, borderWidth:3}">

どのように私はJavaScriptでこれを達成することができますか？私は以前これを見たことがない。

私の他の質問は、jscolorのドキュメントにある次のコードからです。これは、プラグインを表示したり隠したりするためのものです。

<script src="jscolor.js"></script> 
 

 
<button onclick="document.getElementById('foo').jscolor.show()"> 
 
    Show Picker</button> 
 

 
<button onclick="document.getElementById('foo').jscolor.hide()"> 
 
    Hide Picker</button> 
 

 
<p><input id="foo" class="jscolor" value="cc4499">

どのようにこのコードは、単にクラスjscolor含むからプラグインを呼び出すのですか？

document.getElementById('foo').jscolor.show()はどのようにプラグインを呼び出しますか？

特にjscolor.show()はわかりません。 jscolorはどこから来たのですか？

jQueryでそのコードを複製しようとしましたが、動作しませんでした。

$(document).ready(function(){ 
 
\t $(button).click(function(){ 
 
\t \t $('#foo').jscolor.show(); 
 
\t }); 
 
});

Answer 1

彼らは、クラス定義とかなり非定型ことをやっているので、構文があいまいと思われることは驚くべきことではありません。しかしそれは見た目ほどのものではありません。

1. jscolor
2. {パディング：20、
3. borderWidth：3}

彼らは解析する正規表現を使用し、彼らのJSファイルでは奇妙な名前を持つわずか3 CSSクラスが実際にあります要素からjscolorクラスがある場合は、{で始まり、}で終わる文字列を見つけ、角括弧とコンマを取り除き、区切り文字としてスペースを使用します。あなたのCSS属性を持っている適用する予定はありません）。おそらく、彼らはダウンロードして別のCSSファイルを出荷することを望んでいませんでした。

2番目の質問では、jscolorを独自のメソッドとプロパティを持つクラスとして定義しました。そのコード、行977：

jscolor : function (targetElement, options) { 

この中には、多くの関数呼び出しが定義されています。そのうち、ライン1046上：

this.show = function() { 
    drawPicker(); 
}; 

このコードはshow()と呼ばれる関数を定義します。実際にはjscolor.show()です。したがって、show()は、実際にピッカーの表示を処理するdrawPicker()関数を呼び出します。つまり、彼らのshow()メソッドは、おなじみのメソッドshow()とは完全に無関係です。彼らは自分自身を定義しました。

あなたが自分のコードを少しでも勉強すれば、それを使い続けることで、彼らが何をしているのかがはっきりと分かり始めます。 jscolorクラスは、JSクラスの作成方法の良い例です。しかし、クラス属性のものは間違いありません。

Answer 2

jscolorはSRCタグがロードされると、それは開始時に、クラスjscolorを持つDOM内のすべてのinputとbuttonタグを探して、自己実行機能で自分自身を呼び出しますそれらにjscolorというプロパティを追加します。それjscolorオブジェクトは、inputとbuttonタグにjscolorオブジェクトを追加し、同じロジックは、クラスデータの残りの部分を見て、{padding:20, borderWidth:3}のようなものを解析しonclick="document.getElementById('foo').jscolor.show()"

行うときに、あなたが呼んでいるものです。 CSSクラスでは、JavaScript風のコードが動作しています。

この情報のすべてがjscolorのgithubのページから発見された：https://github.com/EastDesire/jscolor/blob/2.0.4/jscolor.js