Archive for 9月, 2011



27
9月

「Jqueryでスライドボックスをやってみた」のさらに続き


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

前回のモノからさらにパワーアップということで、タブを常に前に表示し、さらにスライドを閉じたときにタブに違和感がないようにJquery-UIを使用してタブをフェードアウト、フェードインさせてみたいと思います。

■改良点

1.タブを常に前に表示 2.タブをフェードアウト、フェードインさせる

■header(Jquery)

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


※Jquery-UIを追加

■header(CSS)

.content { margin: 0; border: 0; float: left; width: 400px; height: 500px; } .content2 { margin: 0; border: 0; color: #ffffff; font-size: 12px; padding: 5px 15px 5px 50px; }


※content2はcontent内に文章入れたサンプルにした為追加、それ以外は前回と同じ

■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; //wrapperのCSS設定 $('#wrapper').css('margin','0'); $('#wrapper').css('position','absolute'); $('#wrapper').css('width',$maxwid + 'px'); $('#wrapper').css('border','0'); $('#wrapper').css('z-index','10'); $('#wrapper').animate({top: $slidetop + 'px'}); $('[class^="slide-box"]').each(function() { //tab-boxを取得 var $children = $(this).children('.tab-box'); //slide-box*のCSS設定 $(this).css('margin','0'); $(this).css('position','absolute'); $(this).css('top', $baseslidetop + 'px'); $(this).css('width',$maxwid + 'px'); $(this).css('border','0'); //tab-box*のCSS設定 $children.css('margin','0'); $children.css('position','absolute'); $children.css('top',$tabtop + 'px'); $children.css('left',$maxwid + 'px'); $children.css('border','0'); $children.css('z-index','11'); $children.css('cursor','pointer'); //slide-box*を閉じる $(this).animate({ marginLeft: -$maxwid + 'px'},$speed); //2つ目以降のスライドの高さを調整 $tabtop = $tabtop + $plus; }); }); //スクロール時の処理 $(window).scroll(function(){ //スクロール値を取得してスライドの現在値を調整 var $slidetop = $baseslidetop + $(document).scrollTop(); //スライドの位置を再セット $('#wrapper').stop().animate({ top: $slidetop + 'px' }); }); //クリック時の処理 $(function() { $('.tab-box').click(function() { //クリックされたタブの親要素を取得 var $boxname = $(this).parent().attr("class").slice(6); //現在のスライドの状態を取得 var $offset = $('.slide-' + $boxname).offset(); if ($offset.left < 0) { //スライドが閉じている状態の時はスライドを開く $('.slide-' + $boxname).animate({ marginLeft: '0px'} , $speed); //スライドが閉じている状態の時はタブ画像を開く用の画像に変更 $(this).children('.img-box').attr('src','images/tab_off-' + $boxname + '.png'); } else { //スライドが開いている状態の時はスライドを閉じる $('.slide-' + $boxname).animate({ marginLeft: -$maxwid + 'px'} , $speed); //スライドが閉じている状態の時はタブ画像を閉じる用の画像に変更 $(this).children('.img-box').attr('src','images/tab_on-' + $boxname + '.png'); } $('.tab-box').each(function() { //タブの親要素を取得 var $chkboxname = $(this).parent().attr("class").slice(6); if ($chkboxname != $boxname) { //slide-box*の位置を取得 var $p_offset = $(this).parent().offset(); //slide-box*が開いている時はタブをフェードアウト if ($p_offset.left > -$maxwid) { $(this).parent().children('.tab-box').effect('fade', '', 'fast'); } //クリックされたスライド以外は閉じる $('.slide-' + $chkboxname).animate({ marginLeft: -$maxwid + 'px'},$speed); //クリックされたスライド以外のタブ画像を開く用の画像に変更 $(this).children('.img-box').attr('src','images/tab_on-' + $chkboxname + '.png'); //slide-box*が開いている時はタブをフェードイン if ($p_offset.left > -$maxwid) { $(this).parent().children('.tab-box').show('fade', '', '1000'); } } }); }); }); </script>


※タブが常に前にくるようにz-indexを追加
※閉じたタブがフェードアウト、フェードインするようにeffectとshowを追加

■body

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


※content2はcontent内に文章入れたサンプルにした為追加、それ以外は前回と同じ

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

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

26
9月

(´゚д゚`)・・・


便座が壊れた・・・

23
9月

KDDIからiPhone5だと!?


昨日の日経ビジネスの記事に衝撃が走っておりますが、本当に発売されるのかしら?

もしこれで、WiMAX搭載でデサリングが出来ちゃったりしたら無敵なんじゃないの?

KDDIにGigazineさんが問い合わせてますね。

【速報】KDDIにiPhone 5発売報道について問い合わせてみた

ノーコメントって・・・発売しますと言っているようなものじゃ・・・

少なくとも、Appleとごにょごにょしてるってことですよね。

まぁ仮に発売されたとしても、特にiPhoneに興味が無い人なので買い換えるなんてことはしませんが( ´ー`)

19
9月

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


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

改良版をアップしました

■改良点

1.class名やid名を簡素化 2.スクロールの追跡を滑らかに

■header(Jquery)
前回と同じ

■header(CSS)
前回と同じ

■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; //wrapperのCSS設定 $('#wrapper').css('margin','0'); $('#wrapper').css('position','absolute'); $('#wrapper').css('width',$maxwid + 'px'); $('#wrapper').css('border','0'); $('#wrapper').animate({top: $slidetop + 'px'}); $('[class^="slide-box"]').each(function() { //tab-boxを取得 var $children = $(this).children('.tab-box'); //slide-box*のCSS設定 $(this).css('margin','0'); $(this).css('position','absolute'); $(this).css('top', $baseslidetop + 'px'); $(this).css('width',$maxwid + 'px'); $(this).css('border','0'); //tab-box*のCSS設定 $children.css('margin','0'); $children.css('position','absolute'); $children.css('top',$tabtop + 'px'); $children.css('left',$maxwid + 'px'); $children.css('border','0'); $children.css('cursor','pointer'); //slide-box*を閉じる $(this).animate({'marginLeft':'-' + $maxwid + 'px'},$speed); //2つ目以降のスライドの高さを調整 $tabtop = $tabtop + $plus; }); }); //スクロール時の処理 $(window).scroll(function(){ //スクロール値を取得してスライドの現在値を調整 var $slidetop = $baseslidetop + $(document).scrollTop(); //スライドの位置を再セット $('#wrapper').stop().animate({ top: $slidetop + 'px' }); }); //クリック時の処理 $(function() { $('.tab-box').click(function() { //クリックされたタブの親要素を取得 var $boxname = $(this).parent().attr("class").slice(6); //現在のスライドの状態を取得 var $offset = $('.slide-' + $boxname).offset(); if ($offset.left < 0) { //スライドが閉じている状態の時はスライドを開く $('.slide-' + $boxname).animate({ marginLeft: '0px'} , $speed); //スライドが閉じている状態の時はタブ画像を開く用の画像に変更 $(this).children('.img-box').attr('src','images/tab_off-' + $boxname + '.png'); } else { //スライドが開いている状態の時はスライドを閉じる $('.slide-' + $boxname).animate({ marginLeft: '-' + $maxwid + 'px'} , $speed); //スライドが閉じている状態の時はタブ画像を閉じる用の画像に変更 $(this).children('.img-box').attr('src','images/tab_on-' + $boxname + '.png'); } $('.tab-box').each(function() { //タブの親要素を取得 var $chkboxname = $(this).parent().attr("class").slice(6); if ($chkboxname != $boxname) { //クリックされたスライド以外は閉じる $('.slide-' + $chkboxname).animate({'marginLeft':'-' + $maxwid + 'px'},$speed); //クリックされたスライド以外のタブ画像を開く用の画像に変更 $(this).children('.img-box').attr('src','images/tab_on-' + $chkboxname + '.png'); } }); }); }); </script>

■body

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


※wrapperが追加されています。

■命名規則

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


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

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

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

ちなみにスマートフォンにも対応しています。

ただ、iscrolljQuery.flickableなどのフリックスクロール化させる類のモノと相性が悪いようで、タブのクリックができなくなります。

その場合はクリックイベントからタッチイベントに変えてあげると動作してくれます。(たぶん・・・一応自分のスマフォでは動いてた)

$('.tab-box').click(function() {}); ↓に変更 $('.tab-box').bind('touchstart', function() {});

17
9月

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って凄い!

13
9月

イラストみたいなカバン


JumpFromPaper

どうみてイラストです。

ネタとしては面白いけど実用性あるのかね。

9
9月

短すぎる電車


想像以上に短くてビックリした(゚Д゚;)

7
9月

以前から気になっていた冷凍チーズ蒸しパンを試してみた


試してみたのは北海道チーズ蒸しケーキというヤツ。

確かにちょっとチーズケーキっぽくなるね( ´ー`)
ウマイけど超ウマイ!!というほどでもないかなぁ・・・
普通にチーズケーキ喰ったほうがおいしい。
あ、でも冷たいから夏のデザートとしてはいいかもしれない。

3
9月

俊介くんが中国で人気らしい


確かにカワイイ(*´д`*)

1
9月

FFFTPの開発が終了


Sotaの雑記

昔はずいぶんとお世話になったFTPクライアントだったのですが、ついに開発終了ですかぁ・・・

それにしてもフリーのS/Wでこれだけ長い間、開発を続けてきたそのパワーには頭が下がります。

作者様お疲れ様でした。

now loading...