ユーティリティ

2017年10月

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

エントリー

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こちら からダウンロードできます。

ページ移動

関連エントリー

コメント

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

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをひらがな3文字で入力してください(スパム対策)