symfonyのpluginで、wordpressの管理画面風のメニューを作成できる、「sfCssTabs」を試してみた。

サンプルとして、下記のような要領でプロジェクトを作成しています。

mkdir myapp; cd myapp

symfony init-project myapp

symfony init-app frontend

symfony init-module frontend user

symfony init-module frontend local

まずは、pluginのインストール。

今回は、ソースをsfCssTabsPlugin - symfony - Tracの最下行にある、バージョン0.1.7をダウンロードしてインストールする。

symfony plugin-install /usr/local/src/sfCssTabsPlugin-0.1.7.tgz

インストールはこれでOK。

まずは、cssをwebディレクトリにコピーしておく。

cp plugins/sfCssTabsPlugin/web/css/sfCssTabs.css web/css/

そして、apps/frontend/config/view.ymlのスタイルシートの記述に「sfCssTabs」を追記しておく。

stylesheets: [main, sfCssTabs]

あとは、plugins/sfCssTabsPlugin/config/ctSite.ymlに設定を書く。

PLAIN TEXT
CODE:
  1. cssTabs:
  2.   # general config
  3.   configTabs:
  4.     div:       {id: navcontainer, style: 'padding:2px'}
  5.     mt_ul:     {id: adminmenu}
  6.     mt_li:     {id: active}
  7.     mt_a:      {class: current}
  8.     st_ul:     {id: submenu}
  9.     st_li:     {id: activeII}
  10.     st_a:      {class: current}
  11.   # Configuration of the main Tabs
  12.   mainTabs:
  13.     - label:       'user'
  14.       module:      'user'
  15.       action:      'index'
  16.       linkOptions: {}
  17.     - label:       'local'
  18.       module:      'local'
  19.       action:      'index'
  20.       linkOptions: {}
  21.   # Configuration of the sub Tabs
  22.   subTabs:
  23.     - label:       'edit'
  24.       module:      'user'
  25.       action:      'edit'
  26.       linkOptions: {}
  27.       parentTab:   'user'

configTabs:の部分は、メイン行、サブ行、それぞれのスタイルシートのid,class等を指定。mainTabs:の部分は、見てのとおりだが、labelやリンクしたい、module、actionを書く。subTabs:も同じだが、parentTab（親となるtab）を指定する必要がある。

あとは、テンプレートのレイアウトファイル(apps/frontend/template/layout.php)などで、

PLAIN TEXT
PHP:
  1. <?php echo sfCssTabs::singleton()->render(); ?>

をbodyの先頭のほうで呼んであげればよい。

できたのがこんな感じ。
symfony tab

簡単だ。

デザインを気にしない、社内用の管理画面とかで簡単なメニューを作成するのに、便利かもしれない。

関連する記事

blogranking←ぽちっとな

＜＜
＞＞