gadgetBar
機能説明
- gadgetItem タグを配置できるガジェット領域を作成します。
- アコーディオンとは違い、１つ１つの領域が独立しています。
- 複数のコンテンツを表示、すべて閉じることが可能です。
- 領域内のガジェットはドラッグで並び替えることが可能です。
- 領域内のガジェットはリサイズで領域サイズの変更が可能です。
- imuiGadgetBarタグがガジェット領域、 gadgetItem タグがガジェットコンテンツ領域を作成します。
- そのため gadgetItem タグと組み合わせて使用してください。
- gadgetItem と組み合わせて使用してください。
- 組み合わせて使用しない場合はレイアウトの崩れや、開閉処理が起こらないなど動作保証をしていません。
- resizable設定時の制約について
- resizableを設定した場合、リサイズする縦方向は、ガジェットウィンドから一番最初のActiveなアイテムを対象とします。
- resizableを設定かつ、アイテムを全て閉じた場合、縦方向のリサイズは行えないものとします。
- resizableを設定した場合、リサイズをする際にドラック出来る位置は、右(“e”)、下(“s”)、右下(“se”)の3箇所とします。
- resizeHandlesに“all”を設定した場合でも３ヵ所以外からのリサイズは行えません。
- resizeHandlesは省略した場合、resizeHandles=“e”とした時と同じ動作とします。
- 複数個所を指定したい場合、カンマを利用して、resizeHandles=“e,s”の様にします。
- 利用可能な箇所を全て使用する場合、resizeHandles=“all”と設定することで3種全てが動作します。
- 許容していない文字列[n, w, ne, sw, nwも対象]を指定した場合は、全て無効化します。但しresizeHandles=“n, ne, all”などとした場合は“all”についても無効化対象とします。
属性一覧
- ボディ内には gadgetItem タグを配置してください。
| 注釈 | 属性名 | 型 | 説明 | 省略時の動作 | 実行時評価 |
|---|---|---|---|---|---|
disabled |
Boolean | ガジェットを無効にするかどうかを指定します | false | ||
height |
String | ガジェットの全体領域の縦幅を指定します height=“200”の様に単位を省略するとpxとして扱われます |
自動計算された縦幅 | ||
|
HTML5
Boolean属性
|
hidden |
Boolean | ガジェットを非表示にします | false | |
icons |
Map<String, Object> | ヘッダーのアイコンを指定します 開閉時それぞれのアイコンの指定ができます 詳細は下記の icons を参照してください |
{ header: 'ui-icon-plus', headerSelected: 'ui-icon-minus' } | ||
id |
String | ガジェットバーのidです | 代替idを付与 | ||
name |
String | ガジェットバーのnameです | 代替nameを付与 | ||
resizable |
Boolean | ガジェット領域のリサイズを可能にするかどうかを指定します | false | ||
resizeHandles |
String | resizable設定時にリサイズを行うドラッグ位置を指定します ガジェット領域のうち、リサイズ可能な方向を指定します 右(“e”)、下(“s”)、右下(“se”)の3箇所とします “all”を設定した場合でも３ヵ所以外からのリサイズは行えません また、カンマ区切りで複数指定することができます |
e | ||
sortable |
Boolean | ガジェットアイテムの順序を入れ替え可能にするかどうかを指定します | false | ||
width |
String | ガジェットウィンドの横幅を指定します width=“400”の様に単位を省略するとpxとして扱われます |
100% | ||
| 無害化 | その他 |
String | ユーザ定義属性です | - |
サンプル
icons
- iconsには以下のオブジェクトを指定してください。
| 注釈 | 属性名 | 型 | 説明 | 省略時の動作 |
header | String | ガジェットアイテムを閉じているときのアイコンを指定します | ui-icon-plus | |
headerSelected | String | ガジェットアイテムを開いているときのアイコンを指定します | ui-icon-minus |
JSP
<%
Map<String, Object> sampleIcons = new HashMap<String, Object>();
sampleIcons.put("header", "im-ui-icon-common-16-minus");
sampleIcons.put("headerSelected", "im-ui-icon-common-16-plus");
%>
<imui:gadgetBar icons="<%= sampleIcons %>" >
<imui:gadgetItem>sample1_1</imui:gadgetItem>
<imui:gadgetItem defaultOpen="false" >sample1_2</imui:gadgetItem>
</imui:gadgetBar>
resizeHandles
- resizable属性にtrueになる値を指定した場合にのみ有効になります。
- 右(“e”)、下(“s”)、右下(“se”)と“all”の指定が可能です。
- サンプルは右方向と下方向にリサイズする場合になります。
JSP
<imui:gadgetBar resizable="true" resizeHandles="s,e" > <imui:gadgetItem>sample2_1</imui:gadgetItem> </imui:gadgetBar>
sortable
- sortableにtrueになる値を指定することでガジェットアイテムの並べ替えが可能になります。
JSP
<% Boolean sampleSortable = true; %> <imui:gadgetBar sortable="<%=sampleSortable %>" > <imui:gadgetItem>sample3_1</imui:gadgetItem> <imui:gadgetItem>sample3_2</imui:gadgetItem> <imui:gadgetItem>sample3_3</imui:gadgetItem> </imui:gadgetBar>
openメソッド
- 引数に指定したインデックスのアイテムを開きます。
- 引数を指定しない場合はすべてのアイテムが開きます。
| 引数 | 型 | 説明 | 省略時の動作 |
第一引数 | number | 開きたいアイテムのインデックスを指定します 数値以外を指定した場合は、未指定と同じ挙動になります | すべてのアイテムを開きます |
| 引数 | 型 | 説明 | 省略時の動作 |
第一引数 | number/array | 開きたいアイテムのインデックスを指定します 配列で指定することで複数のアイテムを指定することができます | すべてのアイテムを開きます |
第二引数 | number | アニメーション時間を指定します 0以下を指定することでアニメーションが無効になります | 400msかけて開きます |
| 属性名 | 型 | 説明 | 省略時の動作 |
index | number/array | 開きたいアイテムのインデックスを指定します 配列で指定することで複数のアイテムを指定することができます | すべてのアイテムを開きます |
duration | number | アニメーション時間を指定します 0以下を指定することでアニメーションが無効にあります | 400msかけて開きます |
JSP（Ver.8.0.16 までのバージョン）
<imui:gadgetBar id="sampleId">
<imui:gadgetItem>sample4_1</imui:gadgetItem>
<imui:gadgetItem defaultOpen="false">sample4_2</imui:gadgetItem>
<imui:gadgetItem>sample4_3</imui:gadgetItem>
</imui:gadgetBar>
<button id="open_one" class="imui-button mt-10">open</button>
<button id="open_all" class="imui-button mt-10">openAll</button>
<script type="text/javascript">
(function($) {
$('#open_one').click(function() {
$('#sampleId').imuiGadgetBar('open', 1);
});
$('#open_all').click(function() {
$('#sampleId').imuiGadgetBar('open');
});
})(jQuery);
</script>
JSP（Ver.8.0.17 以降のバージョン）
<imui:gadgetBar id="sampleId">
<imui:gadgetItem defaultOpen="false">sample4_1</imui:gadgetItem>
<imui:gadgetItem defaultOpen="false">sample4_2</imui:gadgetItem>
<imui:gadgetItem defaultOpen="false">sample4_3</imui:gadgetItem>
<imui:gadgetItem defaultOpen="false">sample4_4</imui:gadgetItem>
</imui:gadgetBar>
<button id="button1" class="imui-button mt-10">button1</button>
<button id="button2" class="imui-button mt-10">button2</button>
<button id="button3" class="imui-button mt-10">button3</button>
<button id="button4" class="imui-button mt-10">button4</button>
<button id="button5" class="imui-button mt-10">button4</button>
<script type="text/javascript">
(function($) {
$('#button1').on('click', function() {
// 二番目のアイテムを1秒かけて開く
$('#sampleId').imuiGadgetBar('open', 1, 1000);
});
$('#button2').on('click', function() {
// すべてのアイテムをアニメーションなしで開く
$('#sampleId').imuiGadgetBar('open', [0,1,2,3], 0);
});
$('#button3').on('click', function() {
// 奇数列のアイテムをアニメーションなしで開く（オブジェクト指定）
$('#sampleId').imuiGadgetBar('open', {index:[0,2],duration:0});
});
$('#button4').on('click', function() {
// すべてのアイテムを1秒かけて開く
$('#sampleId').imuiGadgetBar('open', {duration:1000});
});
$('#button5').on('click', function() {
// すべて開く
$('#sampleId').imuiGadgetBar('open');
});
})(jQuery);
</script>
closeメソッド
- 引数に指定したインデックスのアイテムを閉じます。
- 引数を指定しない場合はすべてのアイテムを閉じます。
| 引数 | 型 | 説明 | 省略時の動作 |
第一引数 | number | 閉じたいアイテムのインデックスを指定します 数値以外を指定した場合は、未指定と同じ挙動になります | すべてのアイテムを閉じます |
| 引数 | 型 | 説明 | 省略時の動作 |
第一引数 | number/array | 閉じたいアイテムのインデックスを指定します 配列で指定することで複数のアイテムを指定することができます | すべてのアイテムを閉じます |
第二引数 | number | アニメーション時間を指定します 0以下を指定することでアニメーションが無効になります | 400msかけて閉じます |
| 属性名 | 型 | 説明 | 省略時の動作 |
index | number/array | 閉じたいアイテムのインデックスを指定します 配列で指定することで複数のアイテムを指定することができます | すべてのアイテムを閉じます |
duration | number | アニメーション時間を指定します 0以下を指定することでアニメーションが無効にあります | 400msかけて閉じます |
JSP（Ver.8.0.16 までのバージョン）
<imui:gadgetBar id="sampleId">
<imui:gadgetItem>sample5_1</imui:gadgetItem>
<imui:gadgetItem>sample5_2</imui:gadgetItem>
<imui:gadgetItem>sample5_3</imui:gadgetItem>
</imui:gadgetBar>
<button id="close_one" class="imui-button mt-10">close</button>
<button id="close_all" class="imui-button mt-10">closeAll</button>
<script type="text/javascript">
(function($) {
$('#close_one').click(function() {
$('#sampleId').imuiGadgetBar('close', 1);
});
$('#close_all').click(function() {
$('#sampleId').imuiGadgetBar('close');
});
})(jQuery);
</script>
JSP（Ver.8.0.17 以降のバージョン）
<imui:gadgetBar id="sampleId">
<imui:gadgetItem /imui:gadgetItem>
<imui:gadgetItem /imui:gadgetItem>
<imui:gadgetItem /imui:gadgetItem>
<imui:gadgetItem /imui:gadgetItem>
</imui:gadgetBar>
<button id="button1" class="imui-button mt-10">button1</button>
<button id="button2" class="imui-button mt-10">button2</button>
<button id="button3" class="imui-button mt-10">button3</button>
<button id="button4" class="imui-button mt-10">button4</button>
<button id="button5" class="imui-button mt-10">button4</button>
<script type="text/javascript">
(function($) {
$('#button1').on('click', function() {
// 二番目のアイテムを1秒かけて閉じる
$('#sampleId').imuiGadgetBar('close', 1, 1000);
});
$('#button2').on('click', function() {
// すべてのアイテムをアニメーションなしで閉じる
$('#sampleId').imuiGadgetBar('close', [0,1,2,3], 0);
});
$('#button3').on('click', function() {
// 奇数列のアイテムをアニメーションなしで閉じる（オブジェクト指定）
$('#sampleId').imuiGadgetBar('close', {index:[0,2],duration:0});
});
$('#button4').on('click', function() {
// すべてのアイテムを1秒かけて閉じる
$('#sampleId').imuiGadgetBar('close', {duration:1000});
});
$('#button5').on('click', function() {
// すべて閉じる
$('#sampleId').imuiGadgetBar('close');
});
})(jQuery);
</script>
onopen、oncloseイベント
- 開くときにonopenイベントが発火し、閉じるときにoncloseイベントが発火します。
JSP
<imui:gadgetBar id="sampleId">
<imui:gadgetItem >sample7_1</imui:gadgetItem>
<imui:gadgetItem >sample7_2</imui:gadgetItem>
</imui:gadgetBar>
<script type="text/javascript">
$(function($){
$('#sampleId').bind('imuigadgetbaronopen',function(event,content){
alert('onopenイベント');
})
$('#sampleId').bind('imuigadgetbaronclose',function(event,content){
alert('oncloseイベント');
})
})
</script>