17
9月
1

Jqueryでスライドボックスをやってみた(スクロール追跡機能付き)


仕事で下記の機能を実装しないといけなくなり、ここ2,3日ひたすらネット上を探し回ったのですが、どれもこれも帯に短し襷に長し状態だったので、んじゃぁちょっとJqueryで自分でやってみるか(`・ω・´)

ということでなんとか要件を満たすモノができたので公開。

改良版をアップしました

■要件

1.画面の左端にタブがあって、タブをクリックすると右にスライドしてコンテンツが出てくる 2.開いたスライドのタブをクリックすると左にスライドしてコンテンツが収納される 3.タブがスライドについてくる 4.スクロールしてもスライドボックスがついてくる

■完成イメージ

■header(Jquery)

<script src="jquery-1.6.4.min.js" type="text/javascript"></script>


■header(CSS)
<style type="text/css"> .content { margin: 0; border: 0; float: left; width: 400px; height: 500px; color: #ffffff; } </style>


※contentはスライドして出てくるコンテンツ部分になります。
※ポイントはwidthとheight(後のスライドボックスでこの値をベースにスライド幅などを設定します)

■header(スライドボックス)

<script type="text/javascript"> var $speed = 500; //スライド速度 var $maxwid = 400; //スライド幅 var $plus = 100; //スライド(コンテンツ)の高さ ÷ タブの数 var $basetabtop = 0; //タブ開始位置 var $baseslidetop = 0; //スライド位置 //初期処理(CSSの設定とスライドを閉じる) $(document).ready(function(){ var $tabtop = $basetabtop; var $slidetop = $baseslidetop; $(".act").each(function() { //スライドのCSS設定 $('#slide-' + $(this).attr("id")).css('margin','0'); $('#slide-' + $(this).attr("id")).css('position','absolute'); $('#slide-' + $(this).attr("id")).css('top', $slidetop + 'px'); $('#slide-' + $(this).attr("id")).css('width',$maxwid + 'px'); $('#slide-' + $(this).attr("id")).css('border','0'); $('#slide-' + $(this).attr("id")).css('z-index','4'); //タブのCSS設定 $('#tab-' + $(this).attr("id")).css('margin','0'); $('#tab-' + $(this).attr("id")).css('position','absolute'); $('#tab-' + $(this).attr("id")).css('top',$tabtop + 'px'); $('#tab-' + $(this).attr("id")).css('left',$maxwid + 'px'); $('#tab-' + $(this).attr("id")).css('border','0'); $('#tab-' + $(this).attr("id")).css('z-index','5'); //スライドを閉じる $('#slide-' + $(this).attr("id")).animate({'marginLeft':'-' + $maxwid + 'px'},$speed); //2つ目以降のスライドの高さを調整 $tabtop = $tabtop + $plus; }); }); //スクロール時の処理 $(window).scroll(function(){ //スクロール値を取得してスライドの現在値を調整 var $slidetop = $baseslidetop + $(document).scrollTop(); //スライドの位置を再セット $(".act").each(function() { $('#slide-' + $(this).attr("id")).css('top', $slidetop + 'px'); }); }); //タブクリック時の処理 $(function() { $('a.act').click(function() { //クリックされたIDを取得 var $boxname = $(this).attr("id"); //現在のスライドの状態を取得 var $offset = $('#slide-' + $boxname).offset(); if ($offset.left < 0) { //スライドが閉じている状態の時はスライドを開く $('#slide-' + $boxname).animate({ marginLeft: '0px'} , $speed); //スライドが閉じている状態の時はタブ画像を開く用の画像に変更 $('#img-' + $boxname).attr('src','images/tab_off-' + $boxname + '.png'); } else { //スライドが開いている状態の時はスライドを閉じる $('#slide-' + $boxname).animate({ marginLeft: '-' + $maxwid + 'px'} , $speed); //スライドが閉じている状態の時はタブ画像を閉じる用の画像に変更 $('#img-' + $boxname).attr('src','images/tab_on-' + $boxname + '.png'); } $(".act").each(function() { //クリックされたスライド以外は全て閉じる if ($(this).attr("id") != $boxname) { $('#slide-' + $(this).attr("id")).animate({'marginLeft':'-' + $maxwid + 'px'},$speed); $('#img-' + $(this).attr("id")).attr('src','images/tab_on-' + $(this).attr("id") + '.png'); } }); }); }); </script>

■body

<div id="slide-box1"> <div class="content" style="background-color:#bf0000;"> コンテンツ1 </div> <div id="tab-box1"> <a href="#1" class="act" id="box1"><img src="images/tab_on-box1.png" id="img-box1" /></a> </div> </div> <div id="slide-box2"> <div class="content" style="background-color:#1000a6;"> コンテンツ2 </div> <div id="tab-box2"> <a href="#2" class="act" id="box2"><img src="images/tab_on-box2.png" id="img-box2" /></a> </div> </div> <div id="slide-box3"> <div class="content" style="background-color:#009b0f;"> コンテンツ3 </div> <div id="tab-box3"> <a href="#3" class="act" id="box3"><img src="images/tab_on-box3.png" id="img-box3" /></a> </div> </div> <div id="slide-box4"> <div class="content" style="background-color:#828282;"> コンテンツ4 </div> <div id="tab-box4"> <a href="#4" class="act" id="box4"><img src="images/tab_on-box4.png" id="img-box4" /></a> </div> </div> <div id="slide-box5"> <div class="content" style="background-color:#823382;"> コンテンツ5 </div> <div id="tab-box5"> <a href="#5" class="act" id="box5"><img src="images/tab_on-box5.png" id="img-box5" /></a> </div> </div>


※各ID名とCLASS名(contentを除く)、タブ画像名は命名規則があります

■命名規則

class="act"(タブクリック用のAタグのclass) id="box*"(タブクリック用のAタグのID) id="slide-box*"(スライドボックスのID) id="tab-box*"(タブのID) id="img-box*"(タブ画像のimgタグのID) tab_on-box*.png(開く用のタブ画像) tab_off-box*.png(閉じる用のタブ画像)


※*部分はスライドボックス単位で数字を合わせる

■完成品(デモ)
http://cmf.ohtanz.com/slidebox/

■ソースなど
http://cmf.ohtanz.com/download/slidebox.zip

結局苦労して探すより、自分で作ったほうが早かったというオチ( ´ー`)

それにしても、たったこれだけの記述でこんな素敵なものが作れるなんてJqueryって凄い!

Enjoyed reading this post?
Subscribe to the RSS feed and have all new posts delivered straight to you.
1 Comment:
  1. […] Jqueryでスライドボクッスをやってみた(スクロール追跡機能付き)を少し改良しました。 […]

Post your comment



now loading...