jEasyUI は単純なウィンドウを作成します

jEasyUI入門チュートリアル：簡単なウィンドウを簡単に作成

jEasyUIとは

jEasyUIは、インタラクティブでユーザーフレンドリーなWebページを構築するための豊富なUIコンポーネントを提供する、人気のあるjQueryベースのJavaScriptライブラリです。その中でも、ウィンドウコンポーネントは、ダイアログ、モーダルウィンドウ、通知などを簡単に作成できるため、広く使用されています。

jEasyUI環境設定

jEasyUIを使用するには、まずWebプロジェクトにjEasyUIライブラリを含める必要があります。jEasyUIの公式Webサイトからダウンロードするか、CDNを使用して含めることができます。


<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>

簡単なウィンドウの作成

HTML構造

jEasyUIウィンドウを作成するには、まずウィンドウとして機能するHTML要素が必要です。通常、<div>要素を使用し、jEasyUIウィンドウを初期化するために一意のIDを割り当てます。


<div id="myWindow" title="My Window">
  <p>これは簡単なウィンドウです。</p>
</div>

JavaScriptコード

HTML構造ができたので、jEasyUIの`window()`メソッドを使用してウィンドウを初期化できます。


<script>
$(document).ready(function(){
  $('#myWindow').window({
    width: 400,
    height: 200,
    modal: true
  });
});
</script>

このコードは、幅400ピクセル、高さ200ピクセルのモーダルウィンドウを作成します。`modal: true`オプションは、ウィンドウが表示されているときにユーザーが背後のコンテンツと対話できないようにします。

ウィンドウのプロパティの設定

jEasyUIウィンドウには、外観と動作をカスタマイズするために使用できる多くのプロパティがあります。最も一般的に使用されるプロパティをいくつか紹介します。

プロパティ	説明
title	ウィンドウのタイトルを設定します。
collapsible	ウィンドウが折りたたみ可能かどうかを指定します。
minimizable	ウィンドウが最小化可能かどうかを指定します。
maximizable	ウィンドウが最大化可能かどうかを指定します。
resizable	ウィンドウのサイズが変更可能かどうかを指定します。

イベント処理

jEasyUIウィンドウは、ウィンドウと対話したときにトリガーされるさまざまなイベントもサポートしています。たとえば、ウィンドウが閉じられたとき、最小化されたとき、またはサイズが変更されたときにイベントを処理できます。


<script>
$('#myWindow').window({
  onClose: function(){
    alert('ウィンドウが閉じられました。');
  }
});
</script>

例とソースコード

jEasyUIウィンドウを使用して作成できる完全な例を次に示します。


<!DOCTYPE html>
<html>
<head>
  <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="myWindow" title="My Window" style="padding:10px;">
    <p>これは簡単なウィンドウです。</p>
    <button id="closeButton">ウィンドウを閉じる</button>
  </div>

  <script>
  $(document).ready(function(){
    $('#myWindow').window({
      width: 400,
      height: 200,
      modal: true
    });

    $('#closeButton').click(function(){
      $('#myWindow').window('close');
    });
  });
  </script>
</body>
</html>

まとめ

このチュートリアルでは、jEasyUIウィンドウコンポーネントの使用方法の基本について説明しました。ウィンドウを作成、カスタマイズ、イベントを処理する方法を学びました。jEasyUIのドキュメントを参照して、ウィンドウコンポーネントとそれが提供するすべての機能について詳しく学習してください。

よくある質問

jEasyUIウィンドウをモーダルにするにはどうすればよいですか？

`window()`メソッドの`modal`オプションを`true`に設定します。例：`$('#myWindow').window({ modal: true });`

jEasyUIウィンドウのサイズを変更するにはどうすればよいですか？

`window()`メソッドの`width`および`height`オプションを使用します。例：`$('#myWindow').window({ width: 500, height: 300 });`

jEasyUIウィンドウが閉じられたときにイベントを処理するにはどうすればよいですか？

`window()`メソッドの`onClose`イベントを使用します。例：


  $('#myWindow').window({
    onClose: function(){
      // ウィンドウが閉じられたときに実行されるコード
    }
  });