Blog

concrete5のダッシュボードシングルページでタブUIを使う

Posted by admin at 1:39 日時 2012/12/28

#

concrete5の管理画面を足す方法のおさらいから。管理画面内などのページはシングルページと言い、通常の編集モードで編集できるページとは区別しています。

まず先に /single_page/dashboard/test_single_page.php を作ります。single_pageフォルダに設置したPHPは、シングルページのビューになります。コントローラーはcontrollers/dashboard/test_single_page.php になります。コントローラーについてはまたそのうちブログに書きます。

test_single_page.phpの内容は以下のように作りました。

<?php echo Loader::helper('concrete/dashboard')->getDashboardPaneHeaderWrapper(t('Single Page Name'), false, false, false, false, false, false); ?>
<div class="ccm-pane-body">
<?php
// Tab setting using array
$tabs = array(
// array('tab-id', 'Tag Label', true=active)
array('tab-1', 'Tab 1', true),
array('tab-2', 'Tab 2'),
);
// Print tab element
echo Loader::helper('concrete/interface')->tabs($tabs);
?>
<div id="ccm-tab-content-tab-1" class="ccm-tab-content">
Tab Content 1
</div>
<div id="ccm-tab-content-tab-2" class="ccm-tab-content">
Tab Content 2
</div>
</div>
<?php echo Loader::helper('concrete/dashboard')->getDashboardPaneFooterWrapper(false);?>
view raw single_page.php hosted with ❤ by GitHub

最初と最後の行はお決まりです。管理画面のウィンドウのヘッダーとフッターの表示です。この辺の管理画面のお決まりは公式ドキュメントのStyling Add-Ons For 5.5に解説があります。

echo Loader::helper('concrete/interface')-&gt;tabs($tabs);

ここはインターフェース・ヘルパーのtabsメソッドを呼んでいます。concrete5ではこのようにヘルパークラスでアレコレできます。タブの内容はかんたんな配列で指定できます。

タブはこのようにヘルパー経由で出力するんですが、タブの中身はなぜかdiv要素の直書きなんですよね…。まぁ、融通聞くのでいいですけどね。id名はccm-tab-content-のあとに配列で指定したタブのIDを付けます。class名のccm-tab-contentは必須です。

&lt;div id=&quot;ccm-tab-content-tab-1&quot; class=&quot;ccm-tab-content&quot;&gt;

PHPファイルを作るだけではなく、管理画面からシングルページを作成する必要があります。この作業は先にsingle_pageフォルダにPHPが無いとエラーになります。今回は dashboard/test_single_page という名前で追加します。太字にしたところはビューとコントローラーの各PHPファイルの名前と一致している必要があります。

結果このようになりました。

:-)


Share this entry