今回のサンプルは拡大縮小しないのですが、ブラウザの全幅を利用した仕様になっています。
つまりブラウザの外から入場して、ブラウザの外へ退場します。
見た目は前回の01_showcase.htmlと同じです。

　
このサンプルも前回の01b_showcase.html同様にjQueryを多く活用しています。
ポイントは以下の様にブラウザの幅が変わったら入場位置などを再計算している点です。

$(window).resize(function(){setShowcaseSize();})
　function setShowcaseSize () {
　leftPos = 0-photoWidth;
　centerPos = Math.floor(($(window).width()-photoWidth) /2);
　rightPos = $(window).width();
　$("#page_" + now_id).css("left",centerPos);
}

　
今回はここまで、次回はweb designing 2012年１月号の特集されている
プラグインを利用したショーケースを学ぼうと思います。
　
　
　

まずはjQueryで学んだショーケースをスマートフォン用に改造したサンプルを
作成しました。jQueryの仕組みはほとんど以下の記事のサンプルと同じです。
参考：jQuery：一定時間でバナーを切り替える
　
以前の記事より、横レイアウトの時ショーケースの大半が隠れてしまうのは
良くないと考えているので、ショーケースの拡大縮小はしていません。ですので
以下のキャプチャのように横レイアウトにしても画像が全て表示されます。
　

拡大縮小バージョン

あまり良い仕様ではないと思うけれど、拡大縮小するバージョンも作成しました。
最初はこの仕様の方が簡単かと思っていたのですが、実際は非常に時間が掛かって
しまいました。
　
cssだけで何とかしようと思っていたのですが、結局できませんでした…。
なのでjQueryに大きく頼る結果となりました。cssは非常にシンプルですが、
jQueryが複雑なことを確認してください。
onResizeでレイアウトが変わる度に設定を変更しているのがポイントです。

　
今回作成した拡大縮小しないバージョンはshowcaseのエリア内でしか画像が移動
しませんが（overflow:hiddenの設定）、次回はブラウザの全幅を利用して
移動する仕様に変更したいと思います。
拡大縮小するバージョンと同じようにonResizeで設定を変更することになると思います。
　
おしまい
　
　
　

今回は１案だけです。
前回のサンプルは切り替わったことが分かりやすいのですが、デザイン的に少し難あり
な気がします。ということで、今回は少しデザインを意識したタブにしました。
　
ボーダーのややこしい問題が発生しないデザインなのでcssは前回のサンプルよりも
シンプルになっています。

　

　
おしまい
　
　
　

スマートフォンは指でタップするため、操作時には画面の大半を手で覆うこととなり
タブが切り替わったことが確認しにくい場合があります。
　
そこで今回はテキストエリアの色をタブと同じ色に変更して、切り替わったことが
分かりやすいタブメニューを作成しました。　

　

　
今回は色が付いているだけでなくタブの高さとマージンも変更して、選択されている
タブが他のタブよりも高く表示されるようにしてあります。
　
　
　

ボーダーの処理

今回のサンプルでは少し悩んだ部分があったので、備忘録としてメモしておきます。
まず完成サンプルの前段階のサンプルを確認してください。

　
完成サンプルと同じように見えますが、以下の図のように選択されていないタブと
テキストエリアとの間にグレーのボーダーがありません。

　
前回のサンプルは選択されていないタブがテキストエリアのボーダーと同じ色を
していたため、下のボーダーが無くても違和感は内のですが、今回のサンプルのように
ボーダーの色と選択されていないタブの色が異なると、少し違和感があります。
　
これの対処に少し手間取りました。解決法としてはタブの下にもボーダーを付けるように
しました。しかし、それでは選択されたタブとテキストエリアの間にもボーダーが
入ってしまいます。
　
それをどの様に対処したかというと、以下の様に選択されたタブの下ボーダーの色を
タブの色と同じにするようにしました。こうすることでボーダーが存在しても色が同じ
なので、ボーダーが無いように見せることができるのです。
※以下のコードは19_tab.cssに記載されています。

#tab ul li.selected.yellow{
　border-bottom: 1px #ffd solid;
}
#tab ul li.pink.selected{
　border-bottom: 1px #fdf solid;
}
#tab ul li.blue.selected{
　border-bottom: 1px #dff solid;
}

　
次回もタブについて学ぼうと思います。
　
　
　

表示エリアの狭いスマートフォンでは、タブによるコンテンツの切り替えは有用だと思うので
練習してみました。今回のサンプルではjQueryを利用していますが、画像は一切利用せず
デザインは全てCSSで実現しました。
※サンプルはPCのweb-kit系のブラウザでも確認できます。jQueryのソースはhtmlに書いてあります。
　

コンテンツエリアについて

タブメニュー自体はjQueryの練習で作成したので、問題なかったのですが以下の様に、選択された
タブとコンテンツエリアをつながって見えるようにするには、どうすればよいか少し悩みました。

　
ネットで調べたのですが、見つからなかったので安直な手法で対応しました。liは下のボーダーを
付けないようにし、コンテンツエリアのindex-zを-1に設定しタブの裏に配置し、
そしてpositionのtopを-1pxに設定し重ねました。
※下記はコンテンツエリア（#textArea）のcss設定です。

position:relative;
top:-1px;
z-index:-1;

タブの部分はデフォルトのタッチハイライトをOFFにしています

作成過程で気が付いたのですが、iOSではタブにタップすると何故かtabのsection全体が
ハイライトされてしまいます。aタグを使っていないのに…。
逆にaタグを利用していないからそうなるの？…。
ともあれ、これでは都合が悪いのでtabの部分だけハイライトの演出をOFFにしました。OFFにする
方法は以下のcssコードですが、今回はbodyではなくtabのsectionにのみ設定しています。

-webkit-tap-highlight-color: rgba(0,0,0,0);

jQueryによるコンテンツの切り替えについて

jQueryでタブを学んだ際は、選択されたタブに特定のクラス（css）を追加して、それをフラグ
代わりに利用することでシンプルなjQueryを目指しました。
参考：タブメニューの最終形（たぶん）

　
実際最初のサンプルは、その仕組みで作成したのですが、その方法だとコンテンツの切り替えに
上手く対応できません。選択されたタブの処理はthisで対応できるのですが、
切り替えるコンテンツについてはthisで対応できないので…。
　
ということで17_tab.htmlはFlashの仕組みと同じように、クリックされたタブの
IDを記憶する方法で対応しました。またIDを記憶しないでコンテンツも切り替える方法を
紹介しているサイトを見つけたので参考としてメモしておきます。
参考：KACHIBIT.net様
　
次回もタブについて学ぼうと思います。
　
　
　

jQueryによるタップ演出の実現

まずはサンプルを先に確認しましょう。iOSでもAndroidでも同じ演出になります。

デフォルトのタップ演出をOFFにする

このサンプルではjQueryの演出と元々の演出が重ならないように、デフォルトの演出を
OFF（透明にして見えなくする）にしています。具体的にはcssに以下の設定をするだけです。
サンプルではこの設定をbodyタグの部分にしています。

-webkit-tap-highlight-color: rgba(0,0,0,0);

あとはjQueryでliの部分がタップされたらcssのクラスをハイライト用のクラスと
入れ替えるだけです。jQueryは短いコードなのでhtmlの方に記述してあります。
　
　

問題点

iOSもAndroidもリンク部分を長くタップし続けるとサブメニューが開くのですが、
このサブメニューがでるとボタンからタップを外したにも拘わらずハイライトが
残ってしまいます…。
　
こういう時こそのtouchcancelイベントだと思うのですがサブメニュー表示時に
このイベントは発生しませんでした…。このイベントが発生しないとなると、この問題は
解決できません…。まったくtouchcancelイベントってどんな時に発生するの？

$("#menu").on("mouseup mouseout touchend touchcancel", "li", function(){
　$(this).removeClass("buttonOn");
　$(this).addClass("buttonOff");
})