ECサイトなら商品カテゴリ、求人サイトなら職種など、膨大な検索項目をまとめる方法のひとつとして、タブで切り替えるUIが挙げられます。今回は、そんなUIの作り方をご紹介します。 デモはこちら。例として、汎用性の高い都道府県を項目にしています。必要なコードは以下です。
html|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<div class="bigSelectBox clearfix"> /* 大項目エリア */ <ul class="tab"> <li class="on"><a id="tohoku">北海道・東北地方</a></li> /* 中略 */ <li><a id="kyushu">九州地方</a></li> </ul> /* 大項目エリア */ /* 小項目エリア */ <div class="content"> <div class="box on"> <p class="ttl"><label><input type="checkbox" class="parent" value="tohoku"> 北海道・東北地方</label></p> <ul class="clearfix"> <li><label><input type="checkbox" class="child" value="tohoku"> 北海道</label></li> <li><label><input type="checkbox" class="child" value="tohoku"> 青森県</label></li> <li><label><input type="checkbox" class="child" value="tohoku"> 秋田県</label></li> <li><label><input type="checkbox" class="child" value="tohoku"> 岩手県</label></li> <li><label><input type="checkbox" class="child" value="tohoku"> 宮城県</label></li> <li><label><input type="checkbox" class="child" value="tohoku"> 山形県</label></li> <li><label><input type="checkbox" class="child" value="tohoku"> 福島県</label></li> </ul> <p class="clearBtn"><button value="tohoku">選択をクリア</button></p> </div> /* 中略 */ <div class="box"> <p class="ttl"><label><input type="checkbox" class="child" value="parent"> 九州地方</label></p> <ul class="clearfix"> <li><label><input type="checkbox" class="child" value="kyushu"> 福岡県</label></li> <li><label><input type="checkbox" class="child" value="kyushu"> 佐賀県</label></li> <li><label><input type="checkbox" class="child" value="kyushu"> 長崎県</label></li> <li><label><input type="checkbox" class="child" value="kyushu"> 熊本県</label></li> <li><label><input type="checkbox" class="child" value="kyushu"> 大分県</label></li> <li><label><input type="checkbox" class="child" value="kyushu"> 宮崎県</label></li> <li><label><input type="checkbox" class="child" value="kyushu"> 鹿児島県</label></li> <li><label><input type="checkbox" class="child" value="kyushu"> 沖縄県</label></li> </ul> <p class="clearBtn"><button value="kyushu">選択をクリア</button></p> </div> </div> /* 小項目エリア */ </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.bigSelectBox { display: table; width: 100%; table-layout:fixed; } .bigSelectBox .tab { display: table-cell; width: 240px; vertical-align: top; } .bigSelectBox .tab li a { display: block; text-decoration: none; } .bigSelectBox .box { display: none; } .bigSelectBox .box.on { display: block; } .bigSelectBox .box input { line-height: 1; } .bigSelectBox .box ul { float: none; display: block; min-height: 160px; } .bigSelectBox .box ul li { width: 220px; float: left; margin-bottom: 15px; } .bigSelectBox .box .clearBtn button { width: 138px; text-align: center; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
$(function(){ /* タブ切り替えの記述 */ $('.tab li').on('click',function(){ $('.tab li , .content .box').removeClass('on'); $(this).addClass('on'); $('.content .box').eq($(this).index()).addClass('on'); }); /* inputが変更されたときの記述 */ $(".box input").change(function(){ var checked = $(this).prop('checked'), selectName = $(this).val(), parent = $(".parent[value=" + selectName + "]"), child = $(".child[value=" + selectName + "]"), tab = $(".tab li a[id = " + selectName + "]"); /* parentというクラスがついたinputが変更されたときの記述 */ if( $(this).hasClass("parent") ) { if( checked === true ){ child.prop('checked',true); tab.addClass('checked'); } else { child.prop('checked',false); tab.removeClass('checked'); } /* childというクラスがついたinputが変更されたときの記述 */ } else if ( $(this).hasClass("child") ) { if($(".child[value=" + selectName + "]:checked").length > 0){ tab.addClass('checked'); } else { tab.removeClass('checked'); } if($(".child[value=" + selectName + "]:checked").length === child.length){ parent.prop('checked',true); } else { parent.prop('checked',false); } } }); /* clearボタンがクリックされたときの記述 */ $(".box .clearBtn button").click(function(){ var selectName = $(this).val(), checked = $(".box input[value=" + selectName + "]"); checked.prop('checked',false); $(".tab li a[id = " + selectName + "]").removeClass('checked'); }); }); |
