jEasyUI で簡単なメニューを作成する - すぐできるガイド
このチュートリアルでは、jEasyUI フレームワークを使用して簡単なメニューをすばやく作成する方法を説明します。詳細なコード例と説明を提供し、jEasyUI メニューの基本的な使い方を簡単に習得できるようにします。1. jEasyUI ライブラリのインポート
- HTMLページにjQueryとjEasyUIの関連するCSSとJavaScriptファイルをインポートする必要があります。 - jEasyUI CDNとローカルインポートの2つの方法を提供し、コード例を添付します。| 方法 | コード例 |
|---|---|
| CDN |
|
| ローカルインポート |
|
2. メニューHTML構造の作成
- ``要素を使用してメニュー項目を囲み、`class="easyui-menu"`を指定します。
- 各メニュー項目は`
`要素で表し、対応する`data-options`属性を設定してメニュー項目の動作を定義します。
- シンプルメニュー、アイコン付きメニュー、区切り線付きメニューなど、さまざまな一般的なメニュー構造のコード例を提供します。
2.1 シンプルメニュー
<div id="menu" class="easyui-menu">
<div>メニュー項目 1</div>
<div>メニュー項目 2</div>
<div>メニュー項目 3</div>
</div>
2.2 アイコン付きメニュー
<div id="menu" class="easyui-menu">
<div data-options="iconCls:'icon-add'">追加</div>
<div data-options="iconCls:'icon-edit'">編集</div>
<div data-options="iconCls:'icon-remove'">削除</div>
</div>
2.3 区切り線付きメニュー
<div id="menu" class="easyui-menu">
<div>メニュー項目 1</div>
<div>メニュー項目 2</div>
<div class="menu-sep"></div>
<div>メニュー項目 3</div>
</div>
3. メニューの初期化
- jQueryセレクターを使用してメニューコンテナ要素を選択します。 - `.menu()`メソッドを呼び出してメニューを初期化します。 - メニューを初期化する完全なコード例を提供します。
<script>
$(function(){
$('#menu').menu();
});
</script>
4. メニューイベント
- `onClick`イベントとその使用方法について説明します。 - `onClick`イベントリスナーと処理関数のコード例を提供します。
<script>
$(function(){
$('#menu').menu({
onClick: function(item){
alert('選択された項目: ' + item.text);
}
});
});
</script>
5. 完全なコード例
- 前述のすべての手順を統合し、jEasyUIライブラリのインポート、メニュー構造の作成、メニューの初期化、メニューイベントのバインドなどを含む、完全で実行可能なHTMLコード例を提供します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jEasyUI メニューの例</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="menu" class="easyui-menu">
<div data-options="iconCls:'icon-add'">追加</div>
<div data-options="iconCls:'icon-edit'">編集</div>
<div data-options="iconCls:'icon-remove'">削除</div>
</div>
<script>
$(function(){
$('#menu').menu({
onClick: function(item){
alert('選択された項目: ' + item.text);
}
});
});
</script>
</body>
</html>
jEasyUI メニュー上級テクニック
- サブメニューの作成方法と、メニューの表示/非表示の制御方法について説明します。 - 関連するコード例と説明を提供します。 **サブメニューの作成**
<div id="menu" class="easyui-menu">
<div>メニュー項目 1</div>
<div>メニュー項目 2
<div>サブメニュー項目 1</div>
<div>サブメニュー項目 2</div>
</div>
<div>メニュー項目 3</div>
</div>
// メニューを表示する
$('#menu').menu('show', {
left: 100,
top: 100
});
// メニューを非表示にする
$('#menu').menu('hide');