HTML要素の表示

このサンプルでは、ドロップダウンプラグインを使用して、HTML要素をドロップダウンオブジェクトに追加して画面に表示することを確認できます。

ドロップダウンプラグイン(GcDropDown)を使用して、HTML要素をドロップダウン表示させる方法について解説します。 ドロップダウンオブジェクトの追加 ドロップダウンプラグインを使用する場合、まずcreateDropDownメソッドを使用して、ドロップダウンオブジェクトをInputManJSのコントロールに追加する必要があります。 テキストコントロールにドロップダウンオブジェクトを追加する場合、以下のようなコードになります。 なお、createDropDownメソッドでは、ドロップダウンボタンを配置する位置をパラメータとして指定することが可能です。設定可能な値(DropDownButtonAlignment列挙体)は、以下の通りです。 値 説明 LeftSide ドロップダウンボタンをコントロールの左側に配置します。 RightSide ドロップダウンボタンをコントロールの右側に配置します。(既定値) HTML要素の表示 HTML要素をドロップダウン表示したい場合、ドロップダウンオブジェクトのgetElementメソッドを使用して、ドロップダウンのコンテナになるHTML要素を取得し、appendChildメソッドを使用して、そのHTML要素に表示したいHTML要素を追加します。 上記サンプルでは、"prefecture"というidのHTML要素をドロップダウンのコンテナに追加しています。 選択時の処理 上記のサンプルでは、"prefecture"要素内のspanタグがクリックされた時に、テキストコントロールにそのspanタグ内の文字(innerText)を表示し、closeメソッドでドロップダウンを閉じています。clickイベントを設定する箇所は、以下のように記述することも可能です。
import '@grapecity/inputman/CSS/gc.inputman-js.css'; import './styles.css'; import { InputMan } from '@grapecity/inputman'; InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern; const gcTextBox = new InputMan.GcTextBox(document.getElementById('gcTextBox')); const gcDropDown = gcTextBox.createDropDown(); const dropdownContent = document.getElementById('prefecture'); document.getElementById('prefecture').addEventListener('click', (e) => { if (e.srcElement.tagName.toLowerCase() == 'span') { gcTextBox.setText(e.srcElement.innerText); gcDropDown.close(); } }); gcDropDown.getElement().appendChild(dropdownContent);
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ドロップダウンプラグイン - HTML要素の表示</title> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> 都道府県<br> <input id="gcTextBox"> <div id="prefecture"> <table> <tr> <th>北海道</th> <td><span>北海道</span></td> </tr> <tr> <th>東北</th> <td><span>青森県</span><span>岩手県</span><span>宮城県</span><span>秋田県</span><span>山形県</span><span>福島県</span> </td> </tr> <tr> <th>関東</th> <td><span>茨城県</span><span>栃木県</span><span>群馬県</span><span>埼玉県</span><span>千葉県</span><span>東京都</span><span>神奈川県</span> </td> </tr> <tr> <th>甲信越</th> <td><span>山梨県</span><span>長野県</span><span>新潟県</span></td> </tr> <tr> <th>北陸</th> <td><span>富山県</span><span>石川県</span><span>福井県</span></td> </tr> <tr> <th>東海</th> <td><span>岐阜県</span><span>静岡県</span><span>愛知県</span><span>三重県</span></td> </tr> <tr> <th>近畿</th> <td><span>滋賀県</span><span>京都府</span><span>大阪府</span><span>兵庫県</span><span>奈良県</span><span>和歌山県</span> </td> </tr> <tr> <th>中国四国</th> <td><span>鳥取県</span><span>島根県</span><span>岡山県</span><span>広島県</span><span>山口県</span><span>徳島県</span><span>香川県</span><span>愛媛県</span><span>高知県</span> </td> </tr> <tr> <th>九州</th> <td><span>福岡県</span><span>佐賀県</span><span>長崎県</span><span>熊本県</span><span>大分県</span><span>宮崎県</span><span>鹿児島県</span> </td> </tr> <tr> <th>沖縄</th> <td><span>沖縄県</span></td> </tr> </table> </div> </body> </html>
body { padding-bottom: 16rem; } #prefecture table { background-color: azure; border: darkgray 1px solid; border-radius: 5px; } #prefecture th { padding: 0 0.5rem; border-right: steelblue 2px solid; font-weight: bold; } #prefecture span { margin: 0 0.5rem; color: blue; cursor : pointer; }
body { padding-bottom: 16rem; } [gcim-control-appearance="modern"] #prefecture table { background-color: azure; border: darkgray 1px solid; border-radius: 5px; } [gcim-control-appearance="modern"] #prefecture th { padding: 0 0.5rem; border-right: steelblue 2px solid; font-weight: bold; } [gcim-control-appearance="modern"] #prefecture span { margin: 0 0.5rem; color: blue; cursor: pointer; }
System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@grapecity/inputman': 'npm:@grapecity/inputman/index.js', '@grapecity/inputman/CSS': 'npm:@grapecity/inputman/CSS', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } });