smarty_function_hetima_tab サンプル

smarty_function_hetima_tab は Smarty で タブを作るプラグインです。
ひとつのHTML内でJavaScriptとstyleのdisplay属性を使ってタブを切り替えます。

 ***** php側 *****
** 手動でプラグイン登録
include_once 'function.hetima_tab.php';
HTSmartyPluginTabview::register($smarty [,$customName]);
//$customNameは省略可。プラグイン呼び出し名を変えたい場合$customNameで
//array( 'hetima_tab'=>'new_name' );
//と指定する。

** Ethnaの場合
function.hetima_tab.php を include_once して、Controller の $smarty_function_plugin に
'smarty_function_hetima_tab'を追加してください。

** Smarty/plugins に入れる場合
たぶん入れるだけでOKだと思います。

//アサイン
$options=array(
    //タブ定義 必須。'タブのid'=>'表示ラベル' のarray
    'tabs'=>array('tab_a'=>'tab_a_label', 'tab_b'=>'tab_b_label',...),
//以下は省略可
    'selected'=>'tab_a',    //最初から表示されているタブ(省略するとtabsの最初の項目がselected)
    'selected_tab_class'=>'tab_selected',           //表示されているタブラベルのclass
    'not_selected_tab_class'=>'tab_not_selected',   //隠れているタブラベルのclass
    'tab_div_class'=>'tab_items',                   //タブラベルを囲うdivのclass
    'tab_content_div_class'=>'tab_content',         //タブ内容のdivのclass
    'tab_id_suffix'=>'_tab',                        //タブラベルのidに付け足す文字列
    'tab_content_id_suffix'=>'_view',               //タブ内容のdivのidに付け足す文字列
    'script_prefix'=>'ht_',             //JavaScript全般をユニークにするための接頭辞
);
$smarty->assign('myTabview', $options);

 **** smarty側 *****
{hetima_tab}
    タブスイッチャー、その他タブ制御に必要なHTMLを出力する。
    option 必須。タブの定義array。上記参照。
    output ここで何を出力するか
        'stylesheet' or 'ss' = タブスイッチャーを装飾するスタイルシートを出力
        'script' or 'js' = タブの切り替えを制御するJavaScriptを出力
        'tab' = タブスイッチャーを出力
        'start' = タブの内容の開始タグを出力。idも必須
        'end' = タブの内容の終了タグを出力。単純に</div>を出力。idは省略可だが、付けていると分かりやすい。
        output は , で区切って複数の項目を同時に出力できる。
        start と end は output を使わず start='tab_id' end='tab_id' と書くこともできる

例:
{* ヘッダに stylesheetとscriptを出力 *}
{hetima_tab option=$myTabview output="stylesheet,script"}
{*タブスイッチャーを出力  *}
{hetima_tab option=$myTabview output="tab"}

{* タブコンテントを出力:通常型 *}
{hetima_tab option=$myTabview id='tab_a' output='start'}content{hetima_tab output='end'}
{* タブコンテントを出力:省略型 *}
{hetima_tab option=$myTabview start='tab_a'}content{hetima_tab end='tab_a'}

stylesheet を変更したい場合
{hetima_tab output='stylesheet'}は使わず、デフォルトの出力を参考に別個で書いてくださいませ。