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

imuiGadgetBar

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

機能説明

  • imuiGadgetItem タグを配置できるガジェット領域を作成します。
  • アコーディオンとは違い、１つ１つの領域が独立しています。
  • 複数のコンテンツを表示、すべて閉じることが可能です。
  • 領域内のガジェットはドラッグで並び替えることが可能です。
  • 領域内のガジェットはリサイズで領域サイズの変更が可能です。
  • imuiGadgetBarタグがガジェット領域、 imuiGadgetItem タグがガジェットコンテンツ領域を作成します。
  • そのため imuiGadgetItem タグと組み合わせて使用してください。
注意事項
  • imuiGadgetItem と組み合わせて使用してください。
    • 組み合わせて使用しない場合はレイアウトの崩れや、開閉処理が起こらないなど動作保証をしていません。
  • 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”についても無効化対象とします。

属性一覧

  • ボディ内には imuiGadgetItem タグを配置してください。
注釈 属性名 型 説明 省略時の動作
Boolean属性 disabled boolean ガジェットを無効にするかどうかを指定します false
height string ガジェットの全体領域の縦幅を指定します
height=“200”の様に単位を省略するとpxとして扱われます		 自動計算された縦幅
HTML5
Boolean属性 		hidden boolean ガジェットを非表示にします false
icons Object ヘッダーのアイコンを指定します
開閉時それぞれのアイコンの指定ができます
詳細は下記の icons を参照してください		 { header: 'ui-icon-plus', headerSelected: 'ui-icon-minus' }
id string ガジェットバーのidです 代替idを付与
name string ガジェットバーのnameです 代替nameを付与
Boolean属性 resizable boolean ガジェット領域のリサイズを可能にするかどうかを指定します false
resizeHandles string resizable設定時にリサイズを行うドラッグ位置を指定します
ガジェット領域のうち、リサイズ可能な方向を指定します
右(“e”)、下(“s”)、右下(“se”)の3箇所とします
“all”を設定した場合でも３ヵ所以外からのリサイズは行えません
また、カンマ区切りで複数指定することができます		 e
Boolean属性 sortable boolean ガジェットアイテムの順序を入れ替え可能にするかどうかを指定します false
width string ガジェットウィンドの横幅を指定します
width=“400”の様に単位を省略するとpxとして扱われます		 100%
無害化 その他 string ユーザ定義属性です -

サンプル

icons

icons
  • iconsには以下のオブジェクトを指定してください。
注釈 属性名 型 説明 省略時の動作
header stringガジェットアイテムを閉じているときのアイコンを指定しますui-icon-plus
headerSelected stringガジェットアイテムを開いているときのアイコンを指定しますui-icon-minus
サーバサイド JavaScript
var sampleIcons = {
    header: 'im-ui-icon-common-16-plus',
    headerSelected: 'im-ui-icon-common-16-minus'
};
HTML
<imart type="imuiGadgetBar" icons=sampleIcons >
  <imart type="imuiGadgetItem">sample1_1</imart>
  <imart type="imuiGadgetItem" defaultOpen="false" >sample1_2</imart>
</imart>

resizeHandles

  • resizable属性にtrueになる値を指定した場合にのみ有効になります。
  • 右(“e”)、下(“s”)、右下(“se”)と“all”の指定が可能です。
    • サンプルは右方向と下方向にリサイズする場合になります。
HTML
<imart type="imuiGadgetBar" resizable="true" resizeHandles="s,e" width="300">
  <imart type="imuiGadgetItem">sample2_1</imart>
</imart>

sortable

sortable
  • sortableにtrueになる値を指定することでガジェットアイテムの並べ替えが可能になります。
サーバサイド JavaScript
var sampleSortable = true;
HTML
<imart type="imuiGadgetBar" sortable=sampleSortable width="300">
  <imart type="imuiGadgetItem">sample3_1</imart>
  <imart type="imuiGadgetItem">sample3_2</imart>
  <imart type="imuiGadgetItem">sample3_3</imart>
</imart>

openメソッド

  • 引数に指定したインデックスのアイテムを開きます。
    • 引数を指定しない場合はすべてのアイテムが開きます。
Ver.8.0.16 までのバージョンでは以下の引数を指定できます

引数 型 説明 省略時の動作
第一引数number開きたいアイテムのインデックスを指定します
数値以外を指定した場合は、未指定と同じ挙動になります 		すべてのアイテムを開きます
Ver.8.0.17 以降のバージョンでは、以下の引数も指定できます

引数 型 説明 省略時の動作
第一引数number/array開きたいアイテムのインデックスを指定します
配列で指定することで複数のアイテムを指定することができます 		すべてのアイテムを開きます
第二引数number アニメーション時間を指定します
0以下を指定することでアニメーションが無効になります 		400msかけて開きます
または以下の要素を持つオブジェクトを指定することも可能です

属性名 型 説明 省略時の動作
index number/array開きたいアイテムのインデックスを指定します
配列で指定することで複数のアイテムを指定することができます		すべてのアイテムを開きます
durationnumber アニメーション時間を指定します
0以下を指定することでアニメーションが無効にあります 		400msかけて開きます
HTML（Ver.8.0.16 までのバージョン）
<imart type="imuiGadgetBar" id="sampleId">
  <imart type="imuiGadgetItem">sample4_1</imart>
  <imart type="imuiGadgetItem" defaultOpen="false">sample4_2</imart>
  <imart type="imuiGadgetItem">sample4_3</imart>
</imart>
<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>
HTML（Ver.8.0.17 以降のバージョン）
<imart type="imuiGadgetBar" id="sampleId">
  <imart type="imuiGadgetItem" defaultOpen="false">sample4_1</imart>
  <imart type="imuiGadgetItem" defaultOpen="false">sample4_2</imart>
  <imart type="imuiGadgetItem" defaultOpen="false">sample4_3</imart>
  <imart type="imuiGadgetItem" defaultOpen="false">sample4_4</imart>
</imart>
<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メソッド

  • 引数に指定したインデックスのアイテムを閉じます。
    • 引数を指定しない場合はすべてのアイテムを閉じます。
Ver.8.0.16 までのバージョンでは以下の引数を指定できます

引数 型 説明 省略時の動作
第一引数number閉じたいアイテムのインデックスを指定します
数値以外を指定した場合は、未指定と同じ挙動になります 		すべてのアイテムを閉じます
Ver.8.0.17 以降のバージョンでは、以下の引数も指定できます

引数 型 説明 省略時の動作
第一引数number/array閉じたいアイテムのインデックスを指定します
配列で指定することで複数のアイテムを指定することができます 		すべてのアイテムを閉じます
第二引数number アニメーション時間を指定します
0以下を指定することでアニメーションが無効になります 		400msかけて閉じます
または以下の要素を持つオブジェクトを指定することも可能です

属性名 型 説明 省略時の動作
index number/array閉じたいアイテムのインデックスを指定します
配列で指定することで複数のアイテムを指定することができます		すべてのアイテムを閉じます
durationnumber アニメーション時間を指定します
0以下を指定することでアニメーションが無効にあります 		400msかけて閉じます
HTML（Ver.8.0.16 までのバージョン）
<imart type="imuiGadgetBar" id="sampleId">
  <imart type="imuiGadgetItem">sample5_1</imart>
  <imart type="imuiGadgetItem">sample5_2</imart>
  <imart type="imuiGadgetItem">sample5_3</imart>
</imart>
<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>
HTML（Ver.8.0.17 以降のバージョン）
<imart type="imuiGadgetBar" id="sampleId">
  <imart type="imuiGadgetItem" >sample5_1</imart>
  <imart type="imuiGadgetItem" >sample5_2</imart>
  <imart type="imuiGadgetItem" >sample5_3</imart>
  <imart type="imuiGadgetItem" >sample5_4</imart>
</imart>
<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">button5</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イベントが発火します。
HTML
<imart type="imuiGadgetBar" id="sampleId" >
  <imart type="imuiGadgetItem" >sample7_1</imart>
  <imart type="imuiGadgetItem" >sample7_2</imart>
</imart>
<script type="text/javascript">
  $(function($){
    $('#sampleId').bind('imuigadgetbaronopen',function(event,content){
      alert('onopenイベント');
    })
    $('#sampleId').bind('imuigadgetbaronclose',function(event,content){
      alert('oncloseイベント');
    })
  })
</script>

Copyright © 2012 NTT DATA INTRAMART CORPORATION