hamashun.com

サンプルページ

概要

11月2週目のJavaScriptです。やりたかった事は以下。

• いわゆるタブによる、コンテンツの表示非表示の切り替え
• コンテンツは同一ページにあって、JSでCSSを操作して切り替える
• JSがオフの環境でも情報は問題なく得られるようにする

ソースコード

jQueryを使用しています。

$(function () {

  var wrapper = $('div.wrapper');
  var boxs = $('div.contents');
  var tabBtn = $('h1.title');

  $(wrapper).css({
    height: '224px'
  });
  $(boxs).css({
    position: 'absolute'
  });
  $(tabBtn).css({
    position: 'absolute',
    top: '-98px',
    cursor: 'pointer'
  });

  function zIndexReset(){
    $(boxs).css('z-index','1');
  }

  tabBtn.click(function(){
    var tabBtnVal = $(this).attr('id');
    var divId = tabBtnVal.replace('Title','');
    zIndexReset();
    $('#' + divId).css('z-index','2');
  });

});

学んだ事や雑感

関数に名前を付けて後から実行する事。

「いやそれ常識だしｗ」とか思われそうで恥ずかしいんですが、「処理を関数にして呼び出せるようにする」という感覚が、少しだけ自分になじんだと言うか。 これまでは「jQueryの仕組み上functionと書かないといけないから書く」みたいな使い方が多かった気がします。

サイ本のこと

実は以前、半年くらいかけてサイ本をある程度読んだんですけど、実際にJSのコードを書いているとふっと「あ、これサイ本に載ってた記憶がある」みたいな瞬間があって、あのツライ読書（1P読むのに数時間とか）は無駄じゃなかったのかなとか思ったり。 1000本ノックが終わったらまた再読したい。

汎用性のこと

書いたJSは「同じ機能なら複数の案件で使いまわせたほうがいい」と考えていたのですが、faultierの人が書いてくれた言及記事や、自分で実際にJSを書いている内に感じた事から、HTMLに使うJSなら、そのHTMLに合わせて（必要なら毎回）書いた方が良いんじゃないかと思えてきました。
あ、もちろん、使いまわせるライブラリを使った方が良いケースもあるんでしょうけど。

改良したい点

z-indexの操作が満足いってないです。 赤を最上段にしてから青をクリックすると重なり順がおかしくなってしまう。

これを解決するには、「クリックした時点で3つ全てのz-indexを取得して、その中の最大の値に+1して該当の要素に指定する」とか・・・かな・・・！ 難しそうorz あと、若干重箱の隅ですけど、z-indexの最大値の件も問題としてはあると言えばある。

まあ、そもそも何故z-indexでやってるのかと言うと、少しづつズラして配置しているデザインのためなので、3枚とも完全に重なっているデザインなら、displayプロパティでタブ切り替えを行ってしまえば簡単だったりはします。