スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryで記事を折りたたむ

↑記事の上下にあるバー(文字以外の場所)をクリックすると記事を折りたためるようにしました。

久しぶりの更新ですが、最近javascriptを触るようになり、fc2ブログでもjsを使う方法がわかったので実装してみました。
使ったのはjQueryというJavaScriptライブラリですが、これを使えばWeb上で見かける動的な演出を簡単に使う事ができるようです。本当に簡単なのでその方法を解説していきたいとおもいます。


①jQueryをダウンロードする。
公式HP(http://jquery.com/)からjQueryをダウンロードして適当な場所に保存。(ファイル名はjquery.jsとします)


②保存したjquery.jsをサーバーにアップロードする。

■普通のサーバーで使用する場合
FTPソフト等で自分のホームページと同じ場所へアップロードする。
フォルダを作って/js/jquery.jsとかにしてもOK

fc2ブログで使う場合
管理ページ>ファイルのアップロードからjquery.jsをアップロードする。

アップロードしたパス(アドレス)をコピーしておいてください。


③htmlにjQueryを参照するタグを追加する。
HTMLの<head>タグの中に

<script type="text/javascript" src="○○○○○/jquery.js"></script>
と追加して、先ほどコピーしたアドレスを○○○の部分へ入れてください。


④続いて反映させたい効果を書いていく。
今回はこのサイトにも実装した、スライドトグル(折りたたみ)をつけてみたいと思います。
とりあえず<head>タグ内の先ほど書いた記述に続けて↓の8行を貼り付けてください。

<script type="text/javascript">
$(document).ready(function(){
$("dt").click(function(){
var index = $("dt").index(this);
$("dd").eq(index).slideToggle("slow");
}).css("cursor","pointer");
});
</script>


これを解説していきますね。↓↓↓

$("dt").click(function(){
dtをクリックした時に実行する処理ってこと。
var index = $("dt").index(this);
何番目のdtなのかをindexに保存。
$("dd").eq(index).slideToggle("slow");
 ↑    ↑         ↑
どれか  何番目か     開閉の早さ

となっているのでこの文だと・・・
dtがクリックされたら、index番目のddをslowの速さで開閉する」ということになります。

最後に・・・
⑤HTMLの中で<dl><dt><dd>タグを書く。
<dl>
<dt>クリックしてね</dt>
<dd>
中身が
<br>
開閉
<br>
するよ
<br>
!!!
</dd>
</dl>

試しにこんな感じに書くだけでなんとなんと、アニメーション付の開閉記事がつくれちゃう訳です。
実際に動かすとこうなります↓

クリックしてね
中身が
開閉
するよ
!!!

ちなみにfc2ブログの記事を開閉したい場合は、
記事のタイトルがクラス「entry_header」、
記事の中身がクラス「entry_body」という名前なので、
名前の前にクラスをあらわす「.」ドットをつけて、

$(".entry_header").click(function(){
var index = $(".entry_header").index(this);
$(".entry_body").eq(index).slideToggle("slow");
という感じになります。


これであなたのホームページもひとつ上へレベルアップ!
スポンサーサイト
プロフィール

kohaku_v

Author:kohaku_v
夢を追い続けるプログラマ。
本職であるWebプログラマの傍ら、メディアアーティスト・ダンサー・VJ(VisualJockey)としても活動しています。

子供の頃に感じたワクワクをいつまでも忘れない大人でありたい。
そんな思いを胸に「楽しい物・嬉しい物」を追い求めて様々な技術にチャレンジしていきます。

現在のミッション:「現実とデジタルの境を無くす」

■Web: http://teruaki-tsubokura.com/

■作品
[Shadow touch!!]
[石畳燈籠]
[AR+Wiiリモコン]
[どこでもスクリーン]
[FLASH+Wiiリモコンで体感ゲーム]

カウンター
最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
リンク
ブロとも申請フォーム

この人とブロともになる

Twitter
 
このページのトップへ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。