コンポーネントノートの先頭

ドロップダウンリスト

単純なコンポーネント、ドロップダウンリストを作成しましょう。 （すべてのメモのコードにjQueryが含まれないことに注意してください）。 アンカー（入力フォーム）があり、フォーカスを受け取ると、その下に定義済みの値のドロップダウンリストが表示されるとします。 リスト項目をクリックすると、任意の関数でその値を取得します。



サンプルコードはhttps://github.com/mbykov/component-dropdown-exampleで入手できます 。 クローンを作成し、ブラウザでファイルtest/example.htmlを開き、 inputクリックしinput 。



この例のスケルトンコンポーネントを作成します。

 $ component create dropdown-example repo (username/project): mbykov/component-dropdown-example description: simple dropdown example . . . 

components.jsonで、必要なコンポーネントを指定する必要があります。

 "dependencies": { "component/domify": "*", "component/each": "*", "component/classes": "*" }, 

そして$ makeます。 Makefileには、特に（ make makefile vs. gruntのメモファイル形式について）が表示されます：

 build: components index.js dropdown.css @component build --dev components: component.json @component install --dev 

これは、 componentすべての依存関係componentインストールし、 build/build.js build/build.cssを作成するbuild/build.js build/build.css 。 （元のdd-example.cssの名前をdropdown.cssに変更し、それに応じてMakefileを修正しました）。

作成例

次に例を作成します。 testディレクトリとその中にexample.htmlファイルを作成しexample.html 。

  <p><input type="text" id="anchor"><p> <script> var anchor = document.querySelector('#anchor'); var Dropdown = require('dd-example'); var dd = new Dropdown(anchor); </script> 

そして、ファイルindex.jsコンポーネントにメインコンテンツを追加します。

 var domify = require('domify'); var classes = require('classes'); var each = require('each'); module.exports = Dropdown; function Dropdown(anchor) { console.log(anchor); return this; } 

return thisをreturn this注意しreturn this -これは重要です。 これで、コンポーネントのメソッドのチェーンを作成できます。 後続の各メソッドは同じthisを取得します。

ここでもう一度作成し、テストページをリロードします（ウォッチを使用するまで手動で作成します）。 Feyerbagでは、すべてが正常に進行していることがわかります。アンカーが表示されています。

dropdownコンポーネント自体を記述しましょう。

 function Dropdown(anchor) { var _div = domify('<div class="dropdown-div"></div>'); var _list = domify('<ul class="dropdown-list"></ul>'); _div.appendChild(_list); this.list = _list; this.div = _div; this.anchor = anchor; anchor.parentNode.insertBefore(_div, anchor.nextSibling); anchor.focus(); return this; } 

ここで何が起こっていますか？

_listと_list 2つのオブジェクトを作成します。 下線を引くと、DOMオブジェクトを選択するのに便利です（アンダースコアは不要になり、$記号は何とか見えなくなりますが、それは好みの問題です）。 もちろん、実際には、htmlをtemplate.htmlに配置し、 require('template')と呼ぶrequire('template')ます。 わかりやすくするために、ここではコードを実行しません。

this.list = _list 、これらのオブジェクトをthisオブジェクトの属性として保存します。これはメソッドチェーンで役立ちます。 そして、新しいオブジェクトをページに追加します。

 $ make 

しかし、何も変わっていませんか？ そうです、アンカーをクリックすると、定義済みの値を含むリストを表示する必要があります。 非表示のクラスを_divおよび.cssファイルに追加し、Dropdow関数にアンカーとtoggle（）メソッドをクリックします。

  var self = this; anchor.onclick = function(e){ self.toggle(); classes(this.div).remove('hidden'); return false; } 

値を表示するメソッドを作成します

 Dropdown.prototype.render = function(values) { var self = this; values.each(function(value){ var added = domify('<li class="dropdown-line"></li>'); added.textContent = value; self.list.appendChild(added); }); return this; } 

example.html呼び出しを事前定義された値でrenderメソッドに追加します： var values = [' '...

  dd.render(values) 

行の後にセミコロンはありません。 これはエラーではありません。次の行では、次のコンポーネントメソッドが呼び出されます-.select（）。

コンポーネントへの任意のコールバックでリストの行をクリックすると、値が表示されます（例のコールバックはconsole.logになります）。

 Dropdown.prototype.select = function(cb){ var self = this; this.list.onclick = function(e) { var value = e.target.textContent; anchor.value = value; self.hide(); cb(value); }; } 

ここでは、関数の最後でreturnをreturn this必要はありません。これはチェーンの終わりだからです。 example.htmlの.selectメソッドを呼び出して、コンソールに値を表示します。 出来上がり。

結論

すでに最後であり、例に直接関連していない-リストはアンカーの下ではなく、行の先頭に表示されます。 しかし、美しさのために、リストを揃えましょう-これはメイン関数の1行です：

  _div.style.left = getOffset(anchor).left +'px'; 

彼のおかげで、Mathew MuelleraからgetOffset関数を借りました。

この例と「アダルト」コンポーネントドロップダウンを作成するとき、古い同志の例に焦点を当てました。 component/dropdown 、 stagas/dropdown 、 bmcmahen/dropdown 、 matthewmueller/autocompleteです。 mbykov/dropdown 、それらはすべてjQueryを使用しているため、私はmbykov/dropdown作成しました。これはcouchdbから受信したjsonデータ用に設計されているため、独自の特性があります。

これで、このドロップダウンリストを任意の回数、事前に定義された値とともに、1ページまたは複数ページで使用できます。

継続する