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 | boolean | HTTPS接続の場合のみにクッキーを送信したい場合に指定します | - |
- 詳細についてはcookieのドキュメントを参照してください。
サーバサイド JavaScript
var cookieSample = { expires: 30 };
HTML
<imart type="imuiTabs" cookie=cookieSample > <imart type="imuiTabItem" title="タブタイトル1" >タブ1</imart> <imart type="imuiTabItem" title="タブタイトル2" >タブ2</imart> </imart>
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には以下のオブジェクトを指定してください。
注釈 | 属性名 | 型 | 説明 | 省略時の動作 |
必須 | index | number | ツールバーを表示するタブのインデックを指定します | - |
無害化 | createItems | string | ツールバーを生成するcsjsの関数名を指定します | $.imui.util.createToolbarItems |
toolbarLeft | Array | ツールバー内の左部分のレイアウトを指定します | - | |
toolbarRight | Array | ツールバー内の右部分のレイアウトを指定します | - |
- toolbarLeft、toolbarRightには以下のオブジェクトを指定してください。
注釈 | 属性名 | 型 | 説明 | 省略時の動作 |
必須無害化 | href | string | クリック時の遷移先のパスを指定します | - |
無害化 | iconClass | string | アイコン表示用の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を配置すると横スクロールバーが表示されません。
- リストテーブルが表示された後にリサイズを行うことでスクロールバーを表示します。
サーバサイド 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メソッド

- 引数に指定したインデックスのタブを削除可能状態にします。
- サンプルではボタンをクリックするとタブタイトル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>