MS Access Tips/Sample and VBA and Blog customize etc...

サイドメニュー折りたたみをjQueryで

FoldList.gif

サイドメニュー折りたたみスクリプトを導入小粋空間さんのスクリプトをお借りしたのですが、jQueryを導入したので、jQueryを利用したスクリプトに変更しました。

その結果、リストの開閉がアニメーションで徐々に変化するようにできました。小粋空間さんのスクリプトでもprototype.jsが導入してあるとアニメーションは可能らしいですが、jQuery導入済みでprototype.jsを導入するのはためらわれたので、思い切ってjQureyでの自作にチャレンジしました。


難易度:

スクリプトは下記のように記述します。HTMLのheadブロック内に記述するか、別ファイルにして読み込むようにします。

jQueryライブラリも読み込んでおきます。下記のコードでは、GoogleAPIs から読み込んでいます。

追記(2009/8/5): コードに不具合がありましたので、修正しました。

HTMLの折りたたみたいメニュー部分のコードは下記のようになります。初期状態は開いた状態です。

FC2ブログのプラグインを折りたたむ場合の一例は、下記のようなコード。

プラグイン2、プラグイン3も折りたたみたい場合は、plugin_first の部分を plugin_second、plugin_third にして同様に記述。

なお、クッキー保存しなければ、下記の1行のみのスクリプトでアニメーション開閉できます。jQuery凄すぎ。

slideToggle の引数を "slow", "normal", "fast" と切り替えることでアニメーションスピードを指定できます。

追記(2010/2/6): 初期状態を閉じた状態する場合。
上記のFoldList関数の代わりに、下記の関数をご利用ください。


拍手する

20 Comments

名無し says...""

jqueryを用いた折りたたみメニュー、
参考になりました。
折りたたみの動作まではできたのですが、
初期状態を閉じた状態にすることができません。

visible:、show() などを試みましたが、お手上げです。
お助けください。

2010.02.05 12:13 | URL | #- [edit]
hatena says..."初期状態を非表示にする関数"

初期状態を非表示にする関数を追記しました。
ご参考にしてください。

2010.02.06 14:59 | URL | #5uE6dEgY [edit]
名無し says...""

早速の対応ありがとうございます。
意図するとおりの動作になりました。感謝です。
両者を比較しながら、勉強してみます。

※alert("a: " ~~~ の行は消しました。

2010.02.07 20:22 | URL | #- [edit]
hatena says..."動作しましたか。よかったです。"

あっ、確認用のコードを消すの忘れてました。
ご指摘ありがとうございます。

2010.02.07 21:55 | URL | #5uE6dEgY [edit]
mappy says...""

折りたたみ機能をさがしていてこちらに辿り着きました。
とても便利に使わせていただいております。

フォルダーを初期状態から閉じることが出来ません。
下記の関数をご利用ください
とある関数に入れ替えるとまったく動作しなくなります。
XP IE8 GoogleChromeを使っておりますがどちらも動作しなくなってしまいます。
なぜでしょうか?
プログラムのことは全くわからない初心者ですが宜しくお願いします。

2010.02.23 12:31 | URL | #- [edit]
mappy says...""

昨日投稿したものです。
自宅に戻ってから再度挑戦してみたら出来ました。
お騒がせしました。
ありがとうございました。

2010.02.24 12:36 | URL | #- [edit]
s01 says..."共有テンプレートで"

たびたび、すいません。
共有テンプレート
名前:ari_seo1 作者:paruparu[arinogotokuatumarite]
この共有テンプレートでプラグインを折りたためますか?
真っ白になってしまいます。
なぜでしょうか。

プラグインエリア(1)
div class="menu_head"
div class="menu_m"

プラグインエリア(2)
div class="menu_head_2"
div class="menu_m"

プラグインエリア(3)
div class="entry_title"
div class="entry_m"

上記等は、残さないといけないのですか。

FC2ブログのプラグインを折りたたむ場合の一例は、下記のようなコード。
を参照し、上記は削除しました。
一例通りで、真っ白になりました。

以上の件、宜しくお願い致します。

2010.03.25 17:01 | URL | #bWCffIT2 [edit]
hatena says..."Re: 共有テンプレートで"

> 上記等は、残さないといけないのですか。

残さないと CSS のスタイルが反映されません。

ただ、こちらで、そのテンプレートをダウンロードして試してみましたが、やはりうまく動作しませんでした。ちょっと、原因が不明です。そのテンプレートでもJavaScriptを使っているので何か衝突しているのかもしれません。

お役にたてなくて申し訳ありません。

2010.03.26 00:30 | URL | #5uE6dEgY [edit]
s01 says..."解決致しました"

回答有難う御座います。

> 残さないと CSS のスタイルが反映されません。

sidebar .menu_head
border-left:6px solid #ff9933;
sidebar .menu_head_2
border-left:6px solid #ff6699;
sidebar .menu_m
padding:10px;
margin-bottom:12px;

border-left:6px CSS のスタイルが反映されないけど
折りたためました。







2010.03.26 09:26 | URL | #bWCffIT2 [edit]
BLUEBIRD says...""

何度やってもできないのでコメントします。

現在共有テンプレートlightframe_monotoneです。
プラグインにどう踏み込むのかわかりません。

2010.04.11 06:31 | URL | #Yqf9uHks [edit]
hatena says..."共有テンプレート lightframe への設定例"

共有テンプレート
名前:lightframe_monotone 作者:いたお[10plate]
への導入例です。
この作者の lightframe_系のテンプレートに使えると思います。
ご参考に。

テンプレートHTMLの下記の部分に水色の部分を挿入
(title に id要素を追加、スクリプト3行追加)

<!--▼▼ プラグイン カテゴリー1 ▼▼-->
<!--plugin-->
<!--plugin_first-->
<div class="plugin1_outline">
<div id="title<%plugin_first_no>" class="plugin1_title ta_<%plugin_first_talign>"><%plugin_first_title></div>
<div class="plugin1_body ta_<%plugin_first_align>">
<script type="text/javascript">
FoldList("<%plugin_first_no>");
</script>

<!--plugin_first_description-->
<div class="p1u_description ta_<%plugin_first_ialign>"><%plugin_first_description></div>
<!--/plugin_first_description-->
<%plugin_first_content>
<!--plugin_first_description2-->
<div class="p1d_description ta_<%plugin_first_ialign>"><%plugin_first_description2></div>
<!--/plugin_first_description2-->
</div><!--/plugin1_body -->
</div><!--/plugin1_outline-->
<!--/plugin_first-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー1 ▲▲-->



テンプレートCSSの下記の部分に水色の1行追加
(こちらはお好みで。タイトル上でカーソルが手の形になります。)

/*************************** ▼ 左側メニュー(プラグイン1) ▼ */
.plugin1_outline {
border-top: #000000 2px solid; /* 個別枠(上) */
border-right: #000000 2px solid; /* 個別枠(右) */
border-bottom:#000000 2px solid; /* 個別枠(下) */
border-left: #000000 2px solid; /* 個別枠(左) */
}
.plugin1_title {
font-size:10pt; /* 文字サイズ(タイトル) */
font-weight:bold; /* 太字 (タイトル) */
color:#ffffff; /* 文字色 (タイトル) */
background-color:#000000; /* 背景色 (タイトル) */
border-bottom:#666666 1px solid; /* 飾り線(下)(タイトル) */
padding:2px 15px;
cursor: hand;
}
.plugin1_body {
font-size:10pt; /* 文字サイズ(本体) */
color:#000000; /* 文字色 (本体) */
background-color:#ffffff; /* 背景色 (本体) */
border-top:#cccccc 1px solid; /* 飾り線(上)(本体) */
padding:5px 5px 10px 5px;
line-height:1;
}
/* プラグイン1説明(上部) */
.p1u_description {
margin-bottom:7px;
}
/* プラグイン1説明(下部) */
.p1d_description {
margin-top:7px;
}
/*************************** ▲ 左側メニュー(プラグイン1) ▲ */

プラグイン2、プラグイン3 も同様に設定してください。

上記で動作確認できました。

2010.04.11 10:52 | URL | #5uE6dEgY [edit]
hatena says..."共有テンプレート ari_seo1 k"

共有テンプレート
名前:ari_seo1 作者:paruparu[arinogotokuatumarite]
への導入例です。

テンプレートHTMLの下記の部分に水色の部分を挿入
(title に id要素を追加、スクリプト3行追加)

<!--not_titlelist_area-->
<!--plugin-->
<!--▽プラグインエリア(1)▽-->
<!--plugin_first-->
<div id="title<%plugin_first_no>" class="menu_head"><%plugin_first_title></div>
<div class="menu_m">
<script type="text/javascript">
FoldList("<%plugin_first_no>");
</script>


<p style="text-align:<%plugin_first_ialign>"><%plugin_first_description></p>
<div style="text-align:<%plugin_first_align>"><%plugin_first_content></div>
<p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>


</div><!--/menu_m-->
<!--/plugin_first-->
<!--△プラグインエリア(1)△-->
<!--/plugin-->
<!--/not_titlelist_area-->



テンプレートCSSの下記の部分に水色の2行追加
(こちらはお好みで。タイトル上でカーソルが手の形になり、メニュー間に隙間があきます。)

#sidebar .menu_head {
padding:3px 8px 3px 8px;
background:#ffcc66;
border-left:6px solid #ff9933;
font-weight:bold;
margin:1px 0px;
cursor: hand;

}

プラグイン2 も同様に設定してください。

上記で動作確認できました。

2010.04.11 12:14 | URL | #5uE6dEgY [edit]
BLUEBIRD says...""

最初から閉じたようにするにはどうすればいいでしょうか??

2010.04.11 19:13 | URL | #Yqf9uHks [edit]
hatena says..."記事にありますが・・・"

記事の下のほうに、

//折りたたみスクリプト(初期状態 非表示)
function FoldListDefHide(FoldName){

という関数がありますので、それを使ってください。

2010.04.11 19:57 | URL | #5uE6dEgY [edit]
BLUEBIRD says...""

特定のプラグインだけ最初から閉じたようにするにはどうしたらいいでしょうか??

2010.04.11 20:29 | URL | #Yqf9uHks [edit]
hatena says...""

プラグインカテゴリ1 はデフォルトは閉じておく
プラグインカテゴリ2 はデフォルトで開いておく
ということなら、FoldListDefHide と FoldList を使い分ければ簡単ですね。

プラグインカテゴリ1 の中で特定のプラグインだけ閉じておくというのは、紹介しているコードだけでは無理ですね。プラグイン番号を見て、表示するか、表示にするか判断するスクリプトを追加する必要があります。

私自身は必要性を感じないので、今のところ機能追加する予定はないですので、BLUEBIRDさん がやる気があるのなら挑戦してみては。

2010.04.11 22:30 | URL | #5uE6dEgY [edit]
electric says...""

このブログみたいに、win7風に折りたたみ式にするにはどうすればいんでしょうか?
テンプレートは、いたおさんが配布している、共有テンプレートlightframeです。
jQueryなどあまり実装したことがないので、出来れば詳しくお願いしますm(_ _)m
返信待ってます。

2010.04.29 05:24 | URL | #4ARdecsc [edit]
electric says...""

すみません。
上のコメントをした者です。
既に記事にされてたらしいので、早速やってみたいとおもいます。
ですが、もし無理だったら、また聞きに来ます。

2010.04.29 05:29 | URL | #4ARdecsc [edit]
1023 says...""

折りたたみ機能をさがしてこちらに辿り着きました。
フォルダーを初期状態から閉じることが出来ません。



//折りたたみスクリプト(初期状態 非表示)
function FoldListDefHide(FoldName){

という関数がありますので、それを使ってください。

とありますが、何度やってもこの関数では動作すらしません。
何か原因となる心当たりはありませんか。

2010.09.20 04:48 | URL | #- [edit]
hatena says..."Re:この関数では動作すらしません"

上の名無しさんへ

どのテンプレートをお使いでしょうか。

2010.12.14 23:05 | URL | #5uE6dEgY [edit]

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/154-ce153572
該当の記事は見つかりませんでした。