EasyUI——Dialog自定义Toolbar和buttons

最新推荐文章于 2024-04-11 16:55:56 发布

weixin_30663391

最新推荐文章于 2024-04-11 16:55:56 发布

阅读量212

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yokoboy/archive/2012/12/07/2806910.html

版权

这里并没有使用js来渲染easyUI组件，通过HTML来实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="easyui1.3/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="easyui1.3/jquery.easyui.min.js" type="text/javascript"></script>
    <link href="easyui1.3/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
    <link href="easyui1.3/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="easyui1.3/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        function qq(value, name) {
            alert(value + "--" + name);
        }
    </script>
</head>
<body>

<!--这里通过toolbar 和 buttons 作为便签属性，并没有使用data-options， 
属性值相当于选择器，去选择一个适当的DIV元素添加 toolbar 或者 buttons的位置.-->

<div id="dd" class="easyui-dialog" title="My Dialog" style="width: 400px; height: 200px; padding: 10px" toolbar="#dlg-toolbar" buttons="#dlg-buttons"> Dialog Content. </div>

    <!--创建Toolbar-->
    <div id="dlg-toolbar">
        <table cellpadding="0" cellspacing="0" style="width: 100%">
            <tr>
                <td>
                    <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true">Edit</a>
                    <a href="#" class="easyui-linkbutton" iconcls="icon-help" plain="true">Help</a>
                </td>
                <td style="text-align: right">
　　　　　　　　　　　　<!--使用searchbox组件  searcher:qq   这里调用方法并没有使用qq(value,name), 而是直接使用了qq-->
                    <input class="easyui-searchbox" data-options="menu:'#mm',searcher:qq,prompt:'请输入关键字'" />
                    <div id="mm" style="width: 120px">
                        <div data-options="name:'all',iconCls:'icon-ok'">
                            All News</div>
                        <div data-options="name:'sports'">
                            Sports News</div>
                    </div>
                </td>
            </tr>
        </table>
    </div>


    <!--创建 Button-->
    <div id="dlg-buttons">
        <table cellpadding="0" cellspacing="0" style="width: 100%">
            <tr>
                <td>
                    <img src="source/logo.jpg" style="width: 30px; height: 30px" />
                </td>
                <td style="text-align: right">
                    <a href="#" class="easyui-linkbutton" iconcls="icon-save" onclick="javascript:alert('save')">
                        Save</a> <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">
                            Close</a>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>