Lightbox風モーダルウィンドウ
3-8ではLightbox風モーダルウィンドウが登場！これはいつもプラグインでやっていたjQueryでした。やっと自分で出来るようになるとは！
やり方が実に「なるほど！」というものです。
最初にHTMLとCSSで表現を考えておきます。今回はモーダルウィンドウが開いた状態をHTMLで考えておきます。
ID名「glayLayer」で画面いっぱいの透明グレーのdivを作っておき、その上にポップアップされた画像をID名「overLayer」で置くようにposition指定します。
次にjQueryの実装に入ります。その際は先ほどの「glayLayer」と「overLayer」をHTML内から外しておきます。（jQueryでこのdivたちを挿入する命令をするのです！）
どのように入れるかというと、$(' body ')にappend()を使って<div id="glayLayer"></div><div id="overLayer"></div>を入れます。
最初の命令に「glayLayerをクリックしたとき、ポップアップのdiv要素がhide()する」という記述をしておきます。
次にクラス名「modal」が付いたa要素をクリックするとdivたちが表示される命令をします。
append()も実は「そういえばあった…」という感じで参考書を見返しました。(^ ^;;
それと、ちょっと難しく感じたのが「画像ではなくテキストをモーダルウィンドウにしたい」という部分です。テキストにするとwidth、heightがバラバラで、position指定ができないため、その要素の位置を取得する方法も考える必要があります。
そこで登場するのがwidth()、height()！ちょっとややこしいですが、参考書に書いてあったのが、
"margin-top": "-"+$("#overLayer").height()/2+"px",
"margin-left": "-"+$("#overLayer").width()/2+"px"
さらに閉じるボタンも設置しておけば完璧です。
次の章のドラッグ＆ドロップで動くフローティングウィンドウも位置を取得する系です。mousedown()、mouseup()イベントが出てきて、「こういうときに使うのか！」と思ってしまいました。
位置を取得する「function(e)」「e.pageX」「e.pageY」、「$(セレクタ).offset().top」「$(セレクタ).offset().left」はまだまだ自分のものにしていないのを実感しています。
本当によく出てくる命令なので、覚えてしまおうと思います。
自分のブログ、着々と進行中…。
はてなブログさんからの卒業を目指し、ちょこちょこ作っておりました。
まだ完璧でないし、indexページだけ大枠完成という感じです。
とりあえずアップしているものをもう載せてしまいます！
とりあえず1件だけ投稿を載せました。2件、3件投稿すると小さなボックスが表示される予定です。
今回自分でブログを作る上で気にした点をまとめておきます。
①indexページにその日投稿した最新の投稿記事を全文表示で載せる。
全文表示にしたのははてなブログさんがそうだからです。その前の投稿記事は最新３件文を並べて紹介するようにしました。もちろんsingleページにリンクするボタンを設置します。
②カテゴリをつけて、カテゴリごとにarchiveページを作成。
現在進行中です。カテゴリはjQueryやWordpress、ターミナル、その他…になるでしょうか。今後増えても良いようにグロナビを作らなきゃですね。
③sidebarの表示内容も気にしたい。
まだカテゴリがないということもあり、現在調整中、です！他の方々のブログを見ると、投稿日が年月でちゃんとリンクされて表示されていたり、facebookやtwitterなどSNSのエリアも確保されていたりします。後はバナー等、たくさんあるようですが、SNSを取り入れる予定は現在ないです。
④jQueryの紹介の仕方をどうしよう！
ちょっとこれは今悩んでいます。自分が実際試してみた例を載せる、jQueryページです！普通の投稿にしようかなぁ、、それとも固定ページに書いてアップするようにしようかなぁ、、。良い紹介方法を模索中です。
おそらく今後、このブログを通してテストする機会が増えると思います。プラグインとかですかね。有効活用出来るように、大枠をしっかりしていきたいと思います。
今後もf0u0naganoの日記をよろしくお願いします‼
ドロップダウンメニューをjQueryで
ドロップダウンメニューは実装するのが簡単です！
命令は「mouseover・mouseout」とは違う、「hover」というものがでてきました。
記述の仕方はこんな感じです。
$ ( セレクタ ).hover(function(){
マウスオーバー時の処理
},function(){
マウスアウト時の処理
});
function()をカンマでつなげての記述は今まで登場してこなかったので、少々戸惑いました～。「hoverはこういうもの！」と覚えてしまおうと思います。
それと、孫メニューつき、多階層ドロップダウンメニューはcssと合わせて記述していきます。親メニューのaタグ、孫メニューのaタグをposition指定しての、slideDown()・slideUp()します。
ここまで、「実装するのが簡単」と言いましたが、実は自分でやってみて躓いたところがあります。「this」です！
実はここまでの章の間に「this」はなんとなく分っているつもりでした。
複数の要素があるとき、イベントを起こしたものに対してだけアクションを起こす、という感じです。
今回も確かにhoverした時のulタグを指定してあげるのに、
$( ' ul:not:(:animated) ', this ).slideDown(' fast ');
$( ' ul ', this ).slideUp(' fast ');
という記述が必要でした。でも、いざ自分で書いてみるとこの「this」を忘れがちです。。「this」がないだけで動いてくれないので、非常に大切です！
1章で「$(this)はイベントが発生した要素を取得できます」と書いてあります。そこをちゃんと頭に置いておいて、あとは何度も自分で試してみる、が良いかも…と思っています。
むむ、難しい…。まだまだ続きます、ｊQuery!!
前回のブログでも３章は難しいと言いました。3-7まで参考書を進めましたが、書き方が複雑になってきて、難易度が高くなっています！
今日の勉強で気付いたことを何点か書いていこうと思います。
①「:not」はすごくよく使う！
３章の初めからここまで、:notを使って一番初めの要素だけを表示にしておいたり、クラスを付けておいたりする書き方が多いです。
jQueryの命令にはマウスオーバーやクリックなどのイベントが必ずと言ってよいほど登場します。でも、イベント系の命令前に、最初の初期状態を記述しておくんです。例えばcssでdisplay: none;にしておいたり、クラスを前もって付けておくなどです。
②位置を取得する
位置を取得するのに、実は１章でも登場してきたんです。function(e)という書き方をして、3-5のツールチップではpositionを指定していました。
"top": e.pageY + 10 + "px",
"left": e.pageX + 10 + "px"
実は１章の時点で「どこで使うんだろう」と思っていたのですが、こういう場面で出てくると覚えるのが必須に感じました。
それと、「offset()」！これもX座標・Y座標を取得するjQueryの命令です。これも今回初めて登場しました。
③setTimeout()
一定の時間がたった後に…という、時間差を指定できる記述です。今回はツールチップの消える時間を3000で指定しただけですが、この書き方は覚えておけば、今後いろいろ応用が出来ると思いました！（まだ分りませんが…）
④文字列の置換に登場「正規表現」
これは理解するのに時間がかかりそうです…。覚えられたら便利と書いてあったのでググってみました。
jQueryで正規表現を学んでみる。【基礎編】 | webOpixel
現状、「こういう書き方もあるんだ」程度にしておこうかと思います。(^ ^;;
ちょっと先に進みたいので。。
でもおそらく今後この書き方を見る機会が増えるのだと思っています。
まだ参考書を見ながら書いてみて、２回目、３回目は見ないで書いてみる、というやり方で勉強中です。jQueryを書き始める前に、自分で記述する流れをまず紙なんかに書いてみて、（例えば初期状態はこんなの、命令するのにクラスを付けるほうが楽、などです。）設計しておくのが良いかもと思いました。
以上です！
なめらかアコーディオンパネル
3-3はアコーディオンパネルです！使う命令はslideUp()、slideDown()ですね。
参考書では、例えばhoverした時のbackgroundを変えたり、展開中のパネルのタイトル部分のカラーを変えたり、実務に近いjQueryの例をあげてくれています。
最初に紹介していた例は滑らかに開閉してくれる動きのscriptなのですが、
それでも難しさを感じました。(・・;;
実は練習中、１度目は参考書をがっつり見てそのまま写して、２度目は参考書を見ないで自分で書いてみています。
ですが、自分で「こうだったっけ」と書いていると、「this」が足りなかっただけで動いてくれなかったり、セミコロンの位置など、迷ってしまう場面が多くありました。
命令自体は本当に２章に出てきた基本的な命令の繰り返しだったりするんです！
addClass()、removeClass()を一、二行追加してあげるだけで、デザインの使いやすいアコーディオンパネルに仕上がってしまうのだから面白いです。
参考書の３章をパラパラめくってみると、実際に使われているjQueryがまだまだ出てきます。頑張って自分のものにしちゃいたいです！
3章は難しめ。。
テーブルのハイライトと画像の切り替えを勉強しました～。
やっぱり２章と違い、記述量が多めになってきました！
やることは簡単なんですが、すぐには出てこなそうです。
初めて出てきたのは「index()」、「length」ですかね。
index()は要素の順番を表しています。テーブルのthの数を$(' th ').lengthで取得、tdの順番をthの数で割った余りから、:nth-childでハイライトにする列を決める、というものです。
命令自体はaddClass、removeClassだったり簡単なのですが、現時点でぱっと思いつきませんね(^ ^;;
画像の切り替え表示も記述量が多いです。
早く慣れたいです！
ブログ移転もうそろそろ！
土日を使ってwordpressを作っちゃおうと思います！
はてなブログからの卒業‼
レスポンシブにしたい！…と思って、Photoshopを開いたものの、デザインが出来ない‼レイヤーを…えっと写真を置いてみようかな…どうしよう。。
という感じでしたので、ちょっと自分でデザインをするのは厳しそうです。(^ ^;;
そこで！今回自分が使ったみたいと思っているのが「UIkit」です！
http://getuikit.com/index.html
ちょっと気になっていたんです。(^ ^)
最初はテキストだらけのシンプルなブログになりそうですが、jQueryを使ってそこはカバーしていこうかなと思っています。ブログが自分のテスト環境にするつもりです。
私がどのくらい出来るのか、バレバレになってしまうということですね。
頑張ります！
ちなみにjQueryの２章が終わり、やっと３章の『現場で使えるデザインレシピ』に突入しました！まだ触りのほうですが、やっぱり面白いです！
今日明日でじゃんじゃん進みたいです～♪(^ ^)
