JavaEE開発向けタグライブラリ

dropdown

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

機能説明

  • ドロップダウンメニューを作成します。
  • マウスオーバーまたはマウスクリックで、メニューのリストを表示・非表示を切り替えます。
  • 階層構造を持つ場合、右側に子階層のメニューを表示します。
    • 右端まで表示すると左へ折り返します
  • ドロップダウンメニューの子階層がブラウザより大きくなるとスクロール用の三角が表示されます。
  • 矢印キーなどのキーボード操作が可能です。
    • キーボード操作の詳細については こちら を参照してください。
注意事項
  • URLを指定できる属性に「%28」（エンコードされた「(」）を利用する事ができません。
    • URLに「%28」（エンコードされた「(」）を使用した場合、エラーログが出力されます。

属性一覧

注釈 属性名 型 説明 省略時の動作 実行時評価
必須
data List<Map<String, Object>> メニュー項目を配列で指定します
data属性に指定するオブジェクトについての詳細は下記の data を参照してください		 -
HTML5
hidden Boolean ドロップダウンを非表示にします false
icon String ドロップダウンメニュー全てに適応されるデフォルトのアイコンをパスで指定します
data属性でicon、 iconClassを指定した項目については無視されます
iconClass属性と同時に指定した場合は本属性が有効になります		 -
iconClass String ドロップダウンメニュー全てに適応されるデフォルトのアイコンクラスを指定します
data属性でicon、 iconClassを指定した項目については無視されます
icon属性と同時に指定した場合はicon属性が優先されます		 -
id String ドロップダウンのidです 代替idを付与
name String ドロップダウンのnameです 代替nameを付与
openOnMouseOver Boolean マウスオーバーでメニューを開くかどうかのフラグです
本属性は Ver.8.0.12 以降のバージョンで使用可能です		 true
無害化 その他 String ユーザ定義属性です -

サンプル

data

data
  • dataには以下のオブジェクトを指定してください。
注釈 属性名 型 説明 省略時の動作
identity String メニュー項目のidを指定します -
無害化国際化label String メニュー項目に表示される文字列を指定します -
無害化 href String メニュー項目押下時に遷移するherfを指定します -
無害化 icon String メニュー項目のアイコンパスを指定します -
無害化 iconClass String メニュー項目のアイコンクラスを指定します
icon属性が指定されると無視されます 		-
Boolean属性 disabled Booleanメニュー項目の状態を非活性にするかどうかを指定します
trueを指定すると非活性になります 		false
無害化 target String リンク先をどのフレーム（ウィンドウ）に表示するかを指定します
aタグのtarget属性と同様の値を指定してください
本属性は Ver.8.0.8 以降のバージョンで使用可能です		-
children List<Map<String, Object>>メニュー内に子メニューを指定します
data属性と同じオブジェクトを配列で指定します 		-
JSP 
<%!
    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }

    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }
        return map;
    }
%>
<%
    List<Object> sampleData = new ArrayList<Object>();
    List<Object> children1 = new ArrayList<Object>();
    List<Object> children2 = new ArrayList<Object>();

    children1.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label3"), 
        makeEntry("icon", "ui/images/icons/fugue-icons-3.3.4/icons/folder-open.png"),
        makeEntry("children", children2)
    ));
    children1.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label4")
    ));
    children2.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label5"), 
        makeEntry("icon", "ui/images/icons/fugue-icons-3.3.4/icons/folder-open.png")
    ));
    sampleData.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label1"), 
        makeEntry("icon", "ui/images/icons/fugue-icons-3.3.4/icons/folder-open.png")
    ));
    sampleData.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label2"), 
        makeEntry("icon", "ui/images/icons/fugue-icons-3.3.4/icons/folder-open.png"),
        makeEntry("children", children1)
    ));
%>

<imui:dropdown data="<%= sampleData %>" />

アイコン表示の優劣

アイコン表示の優劣
  • iconClass属性を指定すると、全てのメニュー項目にアイコンが表示されます。
  • アイコンを表示する属性の優先度は以下のようになります。例えば、iconClass属性とdata属性のiconを同時に指定した場合、iconClassは無視されます。
  • また、icon属性とiconClass属性を同時に指定した場合でもiconClass属性は無視されます。
    • 優先度高
      1. data属性のicon
      2. data属性のiconClass
      3. icon属性
      4. iconClass属性
    • 優先度低
JSP 
<%!
    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }
 
    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }
        return map;
    }
%>

<%
    List<Object> sampleData = new ArrayList<Object>();

    sampleData.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("label", "label1")
    ));
    sampleData.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("label", "label2"), 
        makeEntry("icon", "ui/images/icons/fugue-icons-3.3.4/icons/folder-open.png"),
        makeEntry("iconClass", "im-ui-icon-common-16-question")
    ));
    sampleData.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("label", "label2"), 
        makeEntry("iconClass", "im-ui-icon-common-16-question")
    ));
%>

<imui:dropdown data="<%= sampleData %>" iconClass="im-ui-icon-common-16-star"/>

disabled

disabled
  • 非活性状態にするとマウスオーバー時に子要素を表示しません。
  • すべてのメニュー項目を非活性にしたい場合はdisabledメソッドを使います。
  • すべてのメニュー項目を活性にしたい場合はenableメソッドを使います。
  • 特定のメニューのみ活性・非活性を操作したい場合は、対象のメニューにidを付与することで操作してください。
    • 非活性にするには「ui-state-disabled」クラスを付与してください。
JSP 
<%!
    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }

    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }
        return map;
    }
%>
<%
    List<Object> sampleData = new ArrayList<Object>();
    List<Object> children1 = new ArrayList<Object>();

    children1.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label3")
    ));
    children1.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("label", "label4")
    ));
    sampleData.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("label", "label1"),
        makeEntry("disabled", true)
    ));
    sampleData.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label2"), 
        makeEntry("identity", "label2"),
        makeEntry("children", children1)
    ));
%>

<div class="mt-20">
  <imui:button class="imui-button" id="disabled-button" value="disabled" />
  <imui:button class="imui-button" id="enable-button" value="enable" />
  <imui:button class="imui-button" id="target-label" value="target-label" />
</div>
<div class="mt-20">
  <imui:dropdown id="sampleDisabled" data="<%= sampleData %>" />
</div>

<script type="text/javascript">
  $(function($){
    $('#disabled-button').click(function(){
      $('#sampleDisabled').imuiDropdown('disabled');
    })
    $('#enable-button').click(function(){
      $('#sampleDisabled').imuiDropdown('enable');
    })
    $('#target-label').click(function(){
      $('#label2').toggleClass('ui-state-disabled').children('a');
    })
  })
</script>

csjsの関数

  • 以下のメソッドが利用できます。
    • next
      • 次のメニュー項目に移動します。
    • previous
      • 前のメニュー項目に移動します。
    • nextPage
      • 現在の開いているメニューの最後の項目に移動します。
    • previousPage
      • 現在の開いているメニューの最初の項目に移動します。
    • expand
      • 子メニューがある(data属性のchildrenを指定している)項目にで呼び出すと、一階層下のメニューを表示します。
    • collapse
      • 現在のメニューを閉じ、一階層上のメニューを表示します。
    • collapseAll
      • 開いているメニューをすべて閉じます。
    • isFirstItem
      • 現在フォーカスが当たっている項目が、最初の項目であるかを判別します。最初の項目である場合は true を返します。
    • isLastItem
      • 現在フォーカスが当たっている項目が、最後の項目であるかを判別します。最後の項目である場合は true を返します。
JSP 
<%!
    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }
 
    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }
        return map;
    }
%>
<%
    List<Object> sampleData = new ArrayList<Object>();
    List<Object> children1 = new ArrayList<Object>();
    List<Object> children2 = new ArrayList<Object>();
 
    children1.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label4"), 
        makeEntry("icon", "ui/images/icons/fugue-icons-3.3.4/icons/folder-open.png"),
        makeEntry("children", children2)
    ));
    children1.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label5")
    ));
    children2.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label6"), 
        makeEntry("icon", "ui/images/icons/fugue-icons-3.3.4/icons/folder-open.png")
    ));
    children2.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label7"),
        makeEntry("disabled", true )
    ));
    sampleData.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label1"), 
        makeEntry("icon", "ui/images/icons/fugue-icons-3.3.4/icons/folder-open.png")
    ));
    sampleData.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label2"), 
        makeEntry("icon", "ui/images/icons/fugue-icons-3.3.4/icons/folder-open.png"),
        makeEntry("children", children1)
    ));
    sampleData.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label3"), 
        makeEntry("disabled",true)
    ));
%>
 
<div class="mt-20">
  <imui:button class="imui-button" id="next" value="next" />
  <imui:button class="imui-button" id="previous" value="previous" />
</div>
<div class="mt-20">
  <imui:button class="imui-button" id="nextPage" value="nextPage" />
  <imui:button class="imui-button" id="previousPage" value="previousPage" />
</div>
<div class="mt-20">
  <imui:button class="imui-button" id="expand" value="expand" />
  <imui:button class="imui-button" id="collapse" value="collapse" />
  <imui:button class="imui-button" id="collapseAll" value="collapseAll" />
</div>
<div class="mt-20">
  <imui:button class="imui-button" id="isFirstItem" value="isFirstItem" />
  <imui:button class="imui-button" id="isLastItem" value="isLastItem" />
</div>
<div class="mt-20">
  <imui:dropdown id="sampleId" data="<%= sampleData %>" />
</div>

<script type="text/javascript">
  $(function($){
    $('#next').click(function(){
      $('#sampleId').imuiDropdown('next');
    })
    $('#previous').click(function(){
      $('#sampleId').imuiDropdown('previous');
    })
    $('#nextPage').click(function(){
      $('#sampleId').imuiDropdown('nextPage');
    })
    $('#previousPage').click(function(){
      $('#sampleId').imuiDropdown('previousPage');
    })
    $('#expand').click(function(){
      $('#sampleId').imuiDropdown('expand');
    })
    $('#collapse').click(function(){
      $('#sampleId').imuiDropdown('collapse');
    })
    $('#collapseAll').click(function(){
      $('#sampleId').imuiDropdown('collapseAll');
    })
    $('#isFirstItem').click(function(){
      if ($('#sampleId').imuiDropdown('isFirstItem')) {
        alert("FirstItem");
      }
    })
    $('#isLastItem').click(function(){
      if ($('#sampleId').imuiDropdown('isLastItem')) {
        alert("LastItem");
      }
    })
  })
</script>

ブラウザからはみ出る大きさの子要素の表示

ブラウザからはみ出る大きさの子要素の表示
  • 子要素の高さがブラウザより大きくなる場合、上下に三角が出現しスクロールが可能となります。
    • 上の三角にカーソルを当てると上に自動でスクロールします。
    • 下の三角にカーソルを当てると下に自動でスクロールします。
JSP 
<%!
    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }
 
    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }
        return map;
    }
%>
<%
    List<Object> sampleData = new ArrayList<Object>();
    List<Object> children1 = new ArrayList<Object>();
    List<Object> children2 = new ArrayList<Object>();
 
    for (int i = 2; i < 16; i++) {
        children1.add(makeMap(new HashMap<String, Object>(), 
            makeEntry("label", "label" + i)
        ));
    }
    children2.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label5")
    ));
    sampleData.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label1"),
        makeEntry("children", children1)
    ));
    sampleData.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("label", "label2"), 
        makeEntry("children", children2)
    ));
%>

<imui:dropdown id="sampleId" data="<%= sampleData %>" />

キーボード操作

  • ドロップダウンメニューをクリックやtab移動でフォーカスを当てた場合にキーボードでの操作が可能になります。
    • 右矢印
      • 横並び状態のメニューでは右のメニューに移動します。
      • 子メニューでは、さらに子要素がある(data属性のchildrenを指定している)場合に、一階層下のメニューに移動します。
    • 左矢印
      • 横並び状態のメニューでは左のメニューに移動します。
      • 子メニューでは、現在のメニューを閉じ、一階層上のメニューに移動します。
    • 上矢印
      • 横並び状態のメニューではなにもしません。
      • 子メニューでは、上のメニューに移動します。
    • 下矢印
      • 横並び状態のメニューで、子要素がある(data属性のchildrenを指定している)場合に、一階層下のメニューに移動します。
      • 子メニューでは、下のメニューに移動します。
    • PageUp
      • 現在の開いているメニューの最初の項目に移動します。
    • PageDown
      • 現在の開いているメニューの最後の項目に移動します。
    • エンター、スペース
      • 子メニューがある(data属性のchildrenを指定している)場合、一階層下のメニューを表示します。
      • 子メニューがない場合は、data属性のhrefに指定したURLに遷移します。hrefがない場合はメニューをすべて閉じます。
    • エスケープ
      • 現在のメニューを閉じ、一階層上のメニューを表示します。

addDataメソッド

  • 対象の要素に子メニューを追加します。
    • 対象の要素に既に子メニューが存在する場合は、既存の子メニューを削除し、新しく子メニューを追加します。
    • 引数は以下になります。
名称 型 説明
data array 追加するメニュー項目を指定します。
data属性 と同様のオブジェクトを配列で指定します。
targetstring子メニューを追加したい親要素のliタグのidを指定します。
idは自動生成されないので、操作したい親要素には data属性 のidentityを指定しておく必要があります。
JSP 
<%!
    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }
 
    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }
        return map;
    }
%>
<%
    List<Object> sampleData = new ArrayList<Object>();
    List<Object> children1 = new ArrayList<Object>();
    List<Object> children2 = new ArrayList<Object>();
 
    children1.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label3"), 
        makeEntry("children", children2)
    ));
    children1.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("identity", "target"), 
        makeEntry("label", "label4")
    ));
    children2.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("label", "label5") 
    ));
    children2.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("label", "label6")
    ));
    sampleData.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("label", "label1")
    ));
    sampleData.add(makeMap(new HashMap<String, Object>(), 
        makeEntry("href", "http://www.yahoo.co.jp/"), 
        makeEntry("label", "label2"),
        makeEntry("identity", "identity2"),
        makeEntry("children", children1)
    ));
%>
<button id="addData" class="imui-button">addData</button>
<div class="mt-20">
  <imui:dropdown id="addData_sample" data="<%= sampleData %>" />
</div>
<script type="text/javascript">
  var local_data = [
    {
      label: "label7",
      href: "href",
      iconClass: "im-ui-icon-authz-16-authz",
      identity: "identity1"
    },
    {
      label: "label8",
      icon: "ui/images/001_60.png",
      children: [
        {
          label: "label9",
          children: [ 
            {
              label: "label11",
              href: "http://www.yahoo.co.jp/"
            }
          ]
        },
        {
          label: "label10",
          disabled: true
        }
      ]
    }
  ];
  $(function(){
    $('#addData').click(function(){
      $('#addData_sample').imuiDropdown('addData',local_data,'target');
    })
  })
</script>

Copyright © 2012 NTT DATA INTRAMART CORPORATION