歡快的Easyui dialog

先看看效果:

今天測試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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章