スクリプト開発向けタグライブラリ

imuiTabs

コンポーネント情報
モジュールim_ui
導入されたバージョン8.0.3
バージョン8.0.7

機能説明

  • imuiTabItem タグを配置するタブを生成します。
  • タブは折りたたむことができます。
  • 指定したタブを非活性で表示することができます。
  • タブの選択は、クリックかマウスオーバーから選択します。
注意事項
  • imuiTabItem と組み合わせて使用してください。
    • 組み合わせて使用しない場合はレイアウトの崩れや、タブの切り替え処理が起こらないなど動作保証をしていません。
  • id属性に以下の文字列を先頭に指定した場合 imuiTabItem で自動で生成されるidと重複する可能性があります。
    • imui-
    • ui-tabs-
  • imuiTabItem内にimuiListTableを配置すると横スクロールバーが表示されない場合があります。詳細は以下の サンプル を参照してください。
  • onAjaxParameterExtendで配列やオブジェクトを返すと、サーバサイドで取得できません。
    • あらかじめ実装者がシリアライズするか、jQueryのserializeをそのまま使うかの2通りの方法があります。詳細は以下の サンプル を参照してください。

属性一覧

  • ajax通信時のイベントについてはajaxの共通仕様を参照してください。
  • ボディ内には imuiTabItem タグを配置してください。
注釈 属性名 型 説明 省略時の動作
Boolean属性 cache boolean リンク毎にページをキャッシュするかどうかを指定します false
Boolean属性 collapsible boolean 表示中のタブの折りたたみ表示ができるかどうかを指定します false
cookie Object クッキーの中に選択されたタブを格納します
詳細は下記の cookie を参照してください		 -
disabled Array 指定したインデックスのタブを無効化にします
インデックスは0から始まる整数です		 -
event string タブを開くトリガーイベントを指定します click
HTML5
Boolean属性 		hidden boolean タブを非表示にします false
id string タブの囲むdiv要素のidです 代替idを付与
method string ajax通信時のリクエストメソッドを指定します
POSTとGET以外を指定した場合は初期値のGETが指定されたことになります		 GET
name string タブの囲むdiv要素のnameです 代替nameを付与
onAdd string onAddイベント時に実行する関数名を指定します -
onAjaxBeforeSend string ajax通信が発生する直前に呼び出される関数名を指定します
明示的にfalseを返したときのみ、通信をキャンセルします		 -
onAjaxComplete string ajax通信終了後に呼ばれる関数名を指定します
通信結果が成功であったかエラーであったかに関係なく必ず実行されます		 -
onAjaxError string ajax通信失敗後に呼ばれる関数名を指定します -
onAjaxParameterExtend string ajax通信を実行する直前に呼び出される関数名を指定します
ajax関連のメソッド内で一番最初に呼び出されます		 -
onAjaxSuccess string ajax通信成功後に呼ばれる関数名を指定します -
onCreate string onCreateイベント時に実行する関数名を指定します -
onDisable string onDisableイベント時に実行する関数名を指定します -
onEnable string onEnableイベント時に実行する関数名を指定します -
onLoad string onLoadイベント時に実行する関数名を指定します -
onRemove string onRemoveイベント時に実行する関数名を指定します -
onSelect string onSelectイベント時に実行する関数名を指定します -
onShow string onShowイベント時に実行する関数名を指定します -
selected number 初期表示タブのインデックスを指定します
インデックスは0から始まる整数です		 0
無害化 spinner string タブの動的ページ読み込み中に表示するメッセージ -
toolbar Array タブのコンテンツにツールバーを表示する場合に指定します
詳細は下記の toolbar を参照してください		 -
無害化 その他 string ユーザ定義属性です -

サンプル

cookie

  • cookie属性は使用する場合は<script type="text/javascript" src="ui/libs/jquery.cookie.js" ></script>を読み込んでください。
  • cookieには以下のオブジェクトを指定してください。
注釈 属性名 型 説明 省略時の動作
expires number クッキーに保存するの期限を指定します -
path string パスを指定します -
domain string ドメインを指定します -
secure booleanHTTPS接続の場合のみにクッキーを送信したい場合に指定します-
サーバサイド JavaScript
var cookieSample = { expires: 30 };
HTML
<imart type="imuiTabs" cookie=cookieSample >
  <imart type="imuiTabItem" title="タブタイトル１" >タブ1</imart>
  <imart type="imuiTabItem" title="タブタイトル2" >タブ2</imart>
</imart>

disabled

disabled
  • 非活性にしたいタブを配列で指定します。
サーバサイド JavaScript
var disabledSample = [1,3];
HTML
<imart type="imuiTabs" disabled=disabledSample >
  <imart type="imuiTabItem" title="タブタイトル1" >タブ1</imart>
  <imart type="imuiTabItem" title="タブタイトル2" >タブ2</imart>
  <imart type="imuiTabItem" title="タブタイトル3" >タブ3</imart>
  <imart type="imuiTabItem" title="タブタイトル4" >タブ4</imart>
</imart>

toolbar

toolbar
  • toolbarには以下のオブジェクトを指定してください。
注釈 属性名 型 説明 省略時の動作
必須 index numberツールバーを表示するタブのインデックを指定します -
無害化 createItems stringツールバーを生成するcsjsの関数名を指定します $.imui.util.createToolbarItems
toolbarLeft Array ツールバー内の左部分のレイアウトを指定します -
toolbarRightArray ツールバー内の右部分のレイアウトを指定します -
  • toolbarLeft、toolbarRightには以下のオブジェクトを指定してください。
注釈 属性名 型 説明 省略時の動作
必須無害化href stringクリック時の遷移先のパスを指定します -
無害化 iconClassstringアイコン表示用のCSSクラス名を指定します
CSS Sprite Image List を参照してください 		-
無害化国際化 text stringアンカータグのテキスト属性を指定します -
無害化国際化 title stringアンカータグのタイトル属性を指定します
カーソルを乗せると表示されます 		-
サーバサイド JavaScript
var toolbar =[
    {
        index: 0,
        toolbarLeft: [
            {
                href : 'javascript:void(0);',
                iconClass : 'im-ui-icon-common-16-back',
                title : '戻る',
                text : '戻る'
            },
            {
                href : 'javascript:void(0);',
                iconClass : 'im-ui-icon-common-16-calendar',
                title : 'カレンダー',
                text : 'カレンダー'
            }
        ],
        toolbarRight: [
            {
                href : 'javascript:void(0);',
                iconClass : 'im-ui-icon-common-16-refresh',
                title : '最新'
            }
        ]
    },
    {
        index : 1,
        toolbarLeft: [
            {
                href : 'javascript:void(0);',
                iconClass : 'im-ui-icon-common-16-back',
                title : 'c-title',
                text : 'c-text'
            },
            {
                href : 'javascript:void(0);',
                iconClass : 'im-ui-icon-common-16-calendar',
                title : 'd-title',
                text : 'd-text'
            }
        ],
        toolbarRight: [
            {
                href : 'javascript:void(0);',
                iconClass : 'im-ui-icon-common-16-refresh',
                title : '最新'
            }
        ]
    },
    {
        index : 3,
        toolbarLeft: [
            {
                href : 'javascript:void(0);',
                iconClass : 'im-ui-icon-common-16-back',
                title : 'a-title',
                text : 'a-text'
            },
            {
                href : 'javascript:void(0);',
                iconClass : 'im-ui-icon-common-16-calendar',
                title : 'b-title',
                text : 'b-text'
            }
        ],
        toolbarRight: [
            {
                href : 'javascript:void(0);',
                iconClass : 'im-ui-icon-common-16-refresh',
                title : '最新'
            }
        ]
    }
];
HTML
<imart type="imuiTabs" toolbar=toolbar >
  <imart type="imuiTabItem" title="タブタイトル1" >タブ1</imart>
  <imart type="imuiTabItem" title="タブタイトル2" >タブ2</imart>
  <imart type="imuiTabItem" title="タブタイトル3" >タブ3</imart>
  <imart type="imuiTabItem" title="タブタイトル4" >タブ4</imart>
</imart>

imuiTabItem内にimuiListTableを配置すると横スクロールバーが表示されない場合の処理

imuiTabItem内にimuiListTableを配置すると横スクロールバーが表示されない場合の処理
  • imuiTabItem内にimuiListTableを配置すると横スクロールバーが表示されません。
  • リストテーブルが表示された後にリサイズを行うことでスクロールバーを表示します。
サーバサイド JavaScript
var listtable = [
    {"col1":"val1-1", "col2":"val2-1"},
    {"col1":"val1-2", "col2":"val2-2"},
    {"col1":"val1-3", "col2":"val2-3"},
    {"col1":"val1-4", "col2":"val2-4"},
    {"col1":"val1-5", "col2":"val2-5"}
];
HTML
<imart type="imuiTabs" onShow="sampleFunction" >
  <imart type="imuiTabItem" title="タブタイトル1" >タブ1</imart>
  <imart type="imuiTabItem" title="タブタイトル2" >
    <imart type="imuiListTable" id="listTable" data=listtable >
      <cols>
        <col name="col1" caption="caption1" />
        <col name="col2" caption="caption2" />
      </cols>
    </imart>
  </imart>
</imart>
<script type="text/javascript">
  function sampleFunction() {
    $('#listTable').resize();
  }
</script>

onAjaxParameterExtend

  • サーバサイドで配列やオブジェクトを扱うサンプルになります。以下の二通りがあります。
    • クライアントサイドでImJson.toJSONString()でJSON文字列に変換し、サーバサイドでImJson.parseJSON()でJSON文字列からJavaScriptオブジェクトに変換する
    • シリアライズはjQuery.ajax()で任せ、サーバサイドでの取得方法を変更する
HTML
<imart type="imuiTabs" onAjaxParameterExtend="onAjaxParameterExtend" >
  <imart type="imuiTabItem" title="タブタイトル1" href="sample/tab_ajax">
    この文字列は削除され、hrefの指定先で取得したコンテンツが表示されます
  </imart>
  <imart type="imuiTabItem" title="タブタイトル2" >タブ2</imart>
</imart>
<imart type="imuiTabs" onAjaxParameterExtend="onAjaxParameterExtend2" >
  <imart type="imuiTabItem" title="タブタイトル1" href="sample/tab_ajax2">
    この文字列は削除され、hrefの指定先で取得したコンテンツが表示されます
  </imart>
  <imart type="imuiTabItem" title="タブタイトル2" >タブ2</imart>
</imart>

<script type="text/javascript">
  function onAjaxParameterExtend(obj) {
    var sampleObj = {};
    var sampleAry = ["sample",456];
    sampleObj = {
      string:"string",
      number:123,
      array:sampleAry
    }
    return ImJson.toJSONString(sampleObj)
  }

  function onAjaxParameterExtend2(obj) {
    return {'a': 'a', 'b': 'b', 'c': 'c', 'arr': [1, 2, 3]};
  }
</script>
routing-jssp-config/sample.xml
<?xml version="1.0" encoding="UTF-8"?>
<routing-jssp-config xmlns="http://www.intra-mart.jp/router/routing-jssp-config" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.intra-mart.jp/router/routing-jssp-config routing-jssp-config.xsd ">
 
  <!-- サンプル向けの設定です。アクセス権の設定を行ってください。 -->
  <authz-default mapper="welcome-all" />
 
  <!-- imuiTabItemのコンテンツを取得 -->
  <file-mapping path="/sample/tab_ajax" page="sample/tab/tab_ajax" />
  <file-mapping path="/sample/tab_ajax2" page="sample/tab/tab_ajax2" />
 
</routing-jssp-config>
サーバサイド JavaScript(sample/tab/tab_ajax.js)
var extension;
 
function init(request) {
    extension = ImJson.parseJSON(request.extension);
    Web.getHTTPResponse().setContentType('text/plain; charset=utf-8');
}
HTML（sample/tab/tab_ajax.html）
<imart type="repeat" list=extension.array item="record">
  <div>
    <imart type="string" value=record></imart>
  </div>
</imart>
サーバサイド JavaScript(sample/tab/tab_ajax2.js)
var extension = {};
 
function init(request) {
    extension.a = request['extension[a]'];
    extension.b = request['extension[b]'];
    extension.c = request['extension[c]'];
    extension.arr = request.getParameterValues('extension[arr][]');
    Web.getHTTPResponse().setContentType('text/plain; charset=utf-8');
}
HTML（sample/tab/tab_ajax2.html）
<imart type="repeat" list=extension item="record">
  <div>
    <imart type="string" value=record></imart>
  </div>
</imart>

setClosableメソッド

setClosableメソッド
  • 引数に指定したインデックスのタブを削除可能状態にします。
  • サンプルではボタンをクリックするとタブタイトル2に削除アイコンが表示されます。
HTML
<imart type="imuiTabs" id="sample-tab" >
  <imart type="imuiTabItem" title="タブタイトル1" >タブ1</imart>
  <imart type="imuiTabItem" title="タブタイトル2" >タブ2</imart>
  <imart type="imuiTabItem" title="タブタイトル3" >タブ3</imart>
</imart>
<input type="button" id="setClosable-button" class="imui-button" value="setClosable" >
<script type="text/javascript">
  $(function($){
    $('#setClosable-button').click(function(){
      $('#sample-tab').imuiTabs('setClosable',1);
    })
  })
</script>

Copyright © 2012 NTT DATA INTRAMART CORPORATION