仕事が出来ないwebデザイナーのjquery タブメニューの作り方

仕事が出来ないwebデザイナーのjquery タブメニューの作り方

最近、仕事が忙しく残業続きなので、少しでも作業量を稼ぐためにタブメニューの動作だけ作ることにする。

4:12

まず、祝日の朝4時に起きる。日中は娘や妻の攻撃が激しく思ったように作業できないため。

PCを立ち上げgoogleに「jquery タブメニュー」と打ち込む。

音がないと寂しいのでserph の el espaerankaをかける。

スマホのゲームをする。

ゲームをしつつ待ち時間でファイルの準備をする。今回の案件のjqueryのバージョンを忘れたので、公開されているサイトを見る。/*! jQuery v2.1.3。まあ、タブメニューくらいだし、自作するのであんまりここまで気にしなくてもいい気がするけど。googleから同じバージョンのjqueryを引っ張ってくる。sublime Textが自動でバージョンアップした。

4:33

ゲームをしつつ、最初の「jquery タブメニュー」の検索結果をみる。

http://5am.jp/jquery/jquery_ui_tabs/

タブメニューってこんなに簡単にできるの？と思いつつ、みるとjquery uiを使っている。見ると今回の案件のサイトにはjquery uiは入っていなかったので却下。

http://www.prontonet.mobi/javascript/jquery/tab/

悪くない気がする。一部jsの記述で自分の知識ではわからないところがあるが、HTML、JS、cssをコピーすると動いたのでよしとする。jsはindexOfを理解してないので
if($(this).attr('class').indexOf(tabClass) != -1)
がよくわからない。

とりあえずhtmlが全部divで書かれているのがきにいらないのでタブの部分をul、liに変えてCSSがセレクタごとに一行で書かれていてみにくいので改行をいれて、ちゃんと見えるようにCSSをちょぼちょぼいじり、タブの下に要素が入っても崩れないか見て落ち着いたので、ブラウザチェックしようと思ったらfirefoxが入ってないのでインストールする。

5:02

firefoxを入れながら、IEで見ると8でjsエラーが出る。今回のサイトの要件がIEのバージョンがなに以上か忘れた。とりあえず良しとする。タブの表示要素がfadeinだけど、まあスライドにすれば変わるんじゃないかと思い、ここは検証しても無駄になる可能性もあるのでこのままにする。
ffのダウンロードがおわったので見ると動く。まあ、動くよねー。

mac?macねー。スマホ関係は今回レスポンシブでもないのでほっとく。多分レスポンシブでも家でスマホ検証は面倒なのでほっとくと思う。会社でやってダメなら会社でやり直し。

タブのデータ一式を会社のメールアドレスに送っておしまい。

5:08