先看看效果:
今天測試EasyUI的對話框,照着官方的代碼做了一個,結果太歡快了。
以下是官方的示例代碼(紅框部份):
整個頁面代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../../Script/jquery-easyui%201.4.4/themes/icon.css" rel="stylesheet" />
<link href="../../Script/jquery-easyui%201.4.4/themes/default/easyui.css" rel="stylesheet" />
</head>
<body>
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',toolbar:'#tb',modal:true">
Dialog Content.
</div>
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>
</body>
</html>
<script src="../../Script/jquery-1.11.3.min.js"></script>
<script src="../../Script/jquery-easyui%201.4.4/jquery.easyui.min.js"></script>
測試了幾個不同版本的Easyui都有這問題,但jQuery換成低版本的會稍好一些,不會一直循環生成(但也會錯亂)。如果用代碼方式申明倒是沒有問題。
最後查明,toolbar裏面的a標籤不規範導致的,官方的代碼後面以/a>結尾,修改成></a>即可正常:
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a>
</div>