freoのサイドメニューを折りたたみにする

2011/02/28 21:30
カテゴリー：サイドバー
タグ：jQueryプラグイン, freo配布物

「小粋空間」で紹介されていた"jQueryでサイドメニューの折りたたみを実現するListfolderプラグイン"をfreoに導入する方法です。

こちらから jquery.listfolder.js をダウンロードします。
ダウンロードした jquery.listfolder_*.*.*.js（*はバージョンの数字）を jquery.listfolder.js にリネームして freo/js/ にアップロードします。

templates/header.html の

<script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}jquery.js"></script>

の下に、

<script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}jquery.listfolder.js"></script>

を加入します。

js/default.js の最後に
```
//サイドメニューを折りたたみ
  $(function() {
    $('#utility').listfolder();
  });
```
を加入します【2013.9.21加入先を templates/header.html ⇒ js/default.js に変更しました】
templates/utility.html の
```
<h3>（メニューのタイトル）</h3>>
```
の部分を、
```
<h3 class="sidetitle" id="○○">（メニューのタイトル）</h3>
```
に変更（赤字を追加）してアップします。id名はお好みのものを入れてください。

※折りたたみマーク表示機能を使う（jquery.listfolder_0.0.4.js以降）場合は、
```
<h3 class="sidetitle" id="○○">（メニューのタイトル） <a href="javascript:void(0)" id="○○" class="sidetitle mark"></a></h3>
```
に変更（赤字を追加）してアップします。id名はお好みのものを入れてください。
オプションの設定については1.のダウンロード先に記載されていますので各自で設定してください。
- デフォルトのテンプレートに導入したものがこちらです。
- これだとちょっと味気ないので css/default.css のユーティリティ（div#utility）の部分をアレンジしたものがこちらです（マーク表示はしていません）。
  アレンジした css/default.css はこちらからダウンロードできます。

コメント登録

コメントを入力してください。
一旦登録したコメントは、あとで編集できませんのでご注意下さい。

名前

メールアドレス

URL

コメント（コメント本文の装飾について）

コメント本文の装飾について

本文に特定の記号を書くことにより、手軽にマークアップを行うことができます。

引用

概要

文章を >> だけの行と << だけの行で囲うと引用に変換します。

入力例

この部分は通常の文章です。
>>
ここは引用になります。
<<
この部分は通常の文章です。

結果

この部分は通常の文章です。

ここは引用になります。

この部分は通常の文章です。

整形コード

概要

文章を >|| だけの行と ||< だけの行で囲うと整形コードに変換します。プログラムの掲載時に利用すると読みやすくなります。

入力例

この部分は通常の文章です。
>||
<html>
　<body><p>HTMLやプログラムを掲載することができます。</p></body>
</html>
||<
この部分は通常の文章です。

結果

この部分は通常の文章です。

<html>
　<body><p>HTMLやプログラムを掲載することができます。</p></body>
</html>

この部分は通常の文章です。

閲覧制限

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

freoをカタカナ3文字で入力してください（スパム対策）

登録者情報を記憶する

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

freoカスタマイズ集