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ファイルの名前と一致している必要があります。

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

Blog

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

Share this entry

Search from blog

お仕事のご依頼／お問い合わせ

登壇・執筆のご依頼／お問い合わせ