第14章：ダイアログ（メッセージウィンドウ）コンポーネント
ポイントを学びます：
- 積載
- プロパティリスト
- イベントリスト
- メソッド一覧
まず、ロード：
1.classのロード：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div class="easyui-dialog" style="width:400px;height:250px;">
</div>
</body>
</html>
2.JSコール：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="box">
</div>
</body>
</html>
$(function(){
$('#box').dialog({
width:400,
height:250,
title:'对话框',
});
});
第二に、属性のリスト：
プロパティ次のウィンドウを追加したり、再定義し、ウィンドウの属性ウィンドウ（パネル）から延びています。
| ダイアログのプロパティリスト | ||
|---|---|---|
| プロパティ名 | 値 | 説明 |
| 題名 | ストリング | ダイアログウィンドウのタイトルテキスト。デフォルト値は、新しいダイアログです。 |
| 折りたためる | ブーリアン | 折りたたみ可能なボタンを表示するために定義されている場合。デフォルト値はfalseです。 |
| 最小化可能 | ブーリアン | ボタンを最小化するかどうかを定義します。デフォルト値はfalseです。 |
| maximiable | ブーリアン | 最大かどうか、そしてボタンを定義します。デフォルト値はfalseです。 |
| サイズ変更可能 | ブーリアン | 定義は、ダイアログウィンドウのサイズを変更できるかどうか。デフォルト値はfalseです。 |
| ツールバー | 配列、selevtor | 上部にある[設定]ダイアログウィンドウのツールバーには、利用可能な値は次のとおりである：1の配列は、ツールバーにある各ツールの属性とLinkButtonコントロールは同じです。ツールバー、デフォルト値はnullを選択します。 |
| ボタン | 配列、selevtor | ダイアログウィンドウの下部ボタン可能な値は：1.アレイ、各ボタンの属性と同一のLinkButton。ボタンバーを指定する2.セレクタ。デフォルト値はnullです。 |
第三に、イベントリスト：
パネル（パネル）から継承された完全なイベントウィンドウ。そのため、イベントパネルパネルへの直接参照。
第四に、メソッドのリスト：
次のようにウィンドウがダイアログ（対話）から延びているメソッドは、新しいウィンドウは次のようになります。
| Widdow方法 | ||
|---|---|---|
| メソッド名 | パラメータ | 説明 |
| ダイアログ | なし | 外部ダイアログオブジェクトを返します |
$ .fn.window.defaultsは、オブジェクトのデフォルト値を上書き使用してください。
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="box">
</div>
<div id="tt">
<a href="###" class="easyui-linkbutton" data-options="iconCls:'icon-add'">编辑</a>
<a href="###" class="easyui-linkbutton" data-options="iconCls:'icon-help'">帮助</a>
</div>
</body>
</html>
$(function(){
$('#box').dialog({
width:400,
height:250,
title:'对话框',
modal:true,
/*
collapsable:true,
minimizable:true,
maximizable:true,
resizable:true,
*/
//toolbar:'tt',
toolbar:[{
text:'编辑',
iconCls:'icon-edit',
handler:function(){
alert('edit');
}
},{}],
button:[{
text:'确定',
plain:true,
iconCls:'icon-ok',
},{
text:'取消',
plain:true,
iconCls:'icon-cancel',
}],
onClose:function(){
alert("关闭之后触发！");
}
});
console.log($('box').dialog('dialog'));
});著者：Roger_CoderLife
リンクします。https：//blog.csdn.net/Roger_CoderLife/article/details/102929703
よると、網易クラウド教室はJQuery EasyUIビデオチュートリアル文書に変換、複製、転載を歓迎し、元のソースを明記してください
