エントリー

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

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

  1. こちら から jquery.listfolder.js をダウンロードします。
  2. ダウンロードした jquery.listfolder_*.*.*.js(*はバージョンの数字)を jquery.listfolder.js にリネームして freo/js/ にアップロードします。
  3. 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>
    を加入します。
  4. js/default.js の最後に
    //サイドメニューを折りたたみ
      $(function() {
        $('#utility').listfolder();
      });
    を加入します【2013.9.21加入先を templates/header.htmljs/default.js に変更しました】
  5. 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名はお好みのものを入れてください。

  6. オプションの設定については1.のダウンロード先に記載されていますので各自で設定してください。
    • デフォルトのテンプレートに導入したものが こちら です。
    • これだとちょっと味気ないので css/default.css のユーティリティ(div#utility)の部分をアレンジしたものが こちら です(マーク表示はしていません)。
      アレンジした css/default.cssこちら からダウンロードできます。

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

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

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

ユーティリティ

2024年03月

- - - - - 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
31 - - - - - -

キーワード検索

キーワード検索フォーム

ユーザー

  • cccのアバター

新着画像

ブログパーツ

Twitter

Twilogを見る

Feed