もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第15回 チェックする項目の選択・未選択を画像でわかりやすくする

この記事を読むのに必要な時間:およそ 5 分

プラグインにする

上記の例では各リストに「on」「off」を書き入れなくてはなりませんでした。数が増えることでマークアップが大変になるので,それらを書かなくとも実行できるようにしてみます。

このプラグインにしてみる際に,利用する際に以下のような条件だけは入れておくこととします。

プラグイン利用の条件

  • 選択・未選択エリアはulでマークアップする。また最初に出てくる方を未選択エリアとする。
  • 最初から選択エリアに入れておくことはできないものとする
  • 2つのul(選択・未選択用の)と,フォーム用のinputをdivなどでまとめる

以上のような条件をつけて利用するようにします。なので,マークアップも少しだけ変えておきます。

HTML

<div class="imgSelect">
<h3>未選択</h3>
<ul>
<li><img src="images/A1.png" width="108" height="43" alt="選択A" /></li>
<li><img src="images/B1.png" width="108" height="43" alt="選択B" /></li>
<li><img src="images/C1.png" width="108" height="43" alt="選択C" /></li>
<li><img src="images/D1.png" width="108" height="43" alt="選択D" /></li>
<li><img src="images/E1.png" width="108" height="43" alt="選択E" /></li>
</ul>

<h3>選択中</h3>
<ul class="delete">
<li><img src="images/A2.png" width="108" height="43" alt="選択A" /></li>
<li><img src="images/B2.png" width="108" height="43" alt="選択B" /></li>
<li><img src="images/C2.png" width="108" height="43" alt="選択C" /></li>
<li><img src="images/D2.png" width="108" height="43" alt="選択D" /></li>
<li><img src="images/E2.png" width="108" height="43" alt="選択E" /></li>
</ul>

<input type="checkbox" name="test" value="選択A" />
<input type="checkbox" name="test" value="選択B" />
<input type="checkbox" name="test" value="選択C" />
<input type="checkbox" name="test" value="選択D" />
<input type="checkbox" name="test" value="選択E" />
</div>

そして,プラグインにするために,スクリプトも変更します。

プラグイン化のスクリプト

(function($){
    $.fn.imgSelect = function(){
        $(this).each(function(){
            $(this).children('ul').eq(1).children().addClass('off').hide();
            $(this).children('ul').first().addClass('on');
            $(this).children('input').hide();
            
            $(this).children().children('li').click(function(){
                var num = $(this).index();
                $(this).hide().attr('class','off').parent().siblings('ul').children().eq(num).show().attr('class','on');
                $(this).parent().siblings('input').eq(num).attr('checked',function(){
                    if(this.checked){
                        return '';
                    } else {
                        return 'checked';
                    };
                });
            });
        });
    };
})(jQuery);

大きな変化はないのですが,自動で二つ目のulの中身を非表示にする内容を加えたり,class名を追加する内容が加えられてあります。

プラグイン化ができたら,実行してみましょう。

jQuery(function($){
     $('.imgSelect').imgSelect();
});

以上で実装できました。いかがだったでしょうか。選択をわかりやすくするためには,表示枠や背景などをもっと工夫する必要もありますが,選択・未選択を画像にしたりすることで,より何を選択しているのかというのをわかりやすくすることができるようになります。

選択中なのか,そうでないのか,わかりやすいUIにするための一例として,このようなのを導入してみてはいかがでしょうか。

おまけサンプル

最後におまけとして,もう一つだけサンプルをご紹介しておきます。

最初のサンプルの改良で,クリックした要素を,それぞれの最後(右端)に移動させて表示するというものです。

特に説明はもうけませんが,こんな方法・見せ方もあるという一例として,参考にしてみて下さい。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/