リスト表示をJavaScriptで絞り込んで表示させる機会がたまにあるので、実装方法を3パターン試してみました。 ■目次 選択した項目で絞り込み検索をする 複数の項目で絞り込み検索をする 配列を使ってリスト側に複数の値を設定できるようにする 1. 選択した項目で絞り込み検索をする 以下のデモの様に、リスト表示の上部に絞り込み検索の項目を配置して、その項目をクリックすると絞り込み検索が行われるパターンです。 デモはサッカーW杯の出場国をグループステージの組み合わせで絞り込む実装です。 See the Pen gvMZGM by tam_yi (@tam_yi) on CodePen. 設定方法ですが、絞り込み検索部分、リスト表示部分の両方にdata属性(data-groupという名前にしています)を設定して、値が一致するものを絞り込むようにしています。 例えばグループAを選択した場合、dat
長年に渡って眼精疲労や肩こりに悩んでいる人は居ませんか？ その辛さの原因はまぶたの病気にあるかも知れません。 私がまぶたの病気、眼瞼下垂(がんけんかすい)と眼瞼痙攣(がんけんけいれん)と診断されてから、3度の手術を受けるに至った体験について書いていきたいと思います。
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
