jEasyUIで簡単なウィンドウを作成する


ウィンドウの作成は非常に簡単です。DIV タグを作成します。 

<div id="win" class="easyui-window" title="My Window" style="width:300px;height:100px;padding:5px;">
	Some Content.</div>

ここでテスト ページを実行すると、画面にウィンドウが表示されます。 JavaScript コードを記述する必要はありません。

90.png

非表示のウィンドウを作成したい場合は、'closed' 属性を 'true' 値に設定することを忘れないでください。 'open' メソッドを呼び出してウィンドウを開くことができます: 

<div id="win" class="easyui-window" title="My Window" closed="true" style="width:300px;height:100px;padding:5px;">
	Some Content.</div>
$('#win').window('open');

最後のデモとして、ログインウィンドウ(ウィンドウ)を作成します: 

<div id="win" class="easyui-window" title="Login" style="width:300px;height:180px;"><form style="padding:10px 20px 10px 40px;"><p>Name: <input type="text"></p><p>Pass: <input type="password"></p><div style="padding:5px;text-align:center;"><a href="#" class="easyui-linkbutton" icon="icon-ok">Ok</a><a href="#" class="easyui-linkbutton" icon="icon-cancel">Cancel</a></div></form></div>
91.png

jQuery EasyUIインスタンスをダウンロード

jeasyui-win-win1.zip