MDL(Material Design Lite)でSelectボックスを実装する
Googleのマテリアルデザイン用CSSコンポーネントが便利なので使っているんですけど、
Componentsのところ 等見ていても、select boxがないんですよね。
radioボタンやチェックボックスのみ。
で、どうしたらいいのかとネットの海をさまよっていると、Google公式のガイドラインでそれっぽいスクショが。
どうも、テキストinputとMenuを組み合わせると近しいものができそうです。
で、書いてみたのがこちら
まずHTML。 .mdl-select
というクラスを作ってみる。 mdl-menu
とfor要素によって、「クリックするとmenuを開く」挙動になる。
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-select">
<input class="mdl-textfield__input" type="text" id="select-section" />
<label class="mdl-textfield__label" for="sample3">セレクトしよう</label>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="select-section">
<li class="mdl-menu__item">選択肢1</li>
<li class="mdl-menu__item">選択肢2</li>
<li class="mdl-menu__item">選択肢3</li>
<li class="mdl-menu__item">選択肢4</li>
</ul>
</div>
で、JS。menuの要素をクリックしたらinputエリアに反映する。
$(function() {
$('div.mdl-select > ul > li').click(function(e) {
var text = $(e.target).text();
$(e.target).parents('.mdl-select').addClass('is-dirty').children('input').val(text);
});
});
mdl-textfield--floating-label
を使わないのであれば、 .addClass('is-dirty')
の部分は不要である。
floating-labelを使うと、jsでtext編集をしたときにラベルの位置が変化しなかったため、直接Classを付与することで表示崩れを回避している。
※2015/11/04追記
公式のプルリク で議論がなされているようであるが、検証に時間がかかっている様子。
とりあえずは今回の実装で間に合わせるとして、updateに期待。
ちなみにAngular MaterialというAngularJS向けのコンポーネントには含まれているので、同じものを突っ込んでくれれば十分なのだが・・・
Written on November 2, 2015