EasyUI jQuery 窗口小部件

简介

EasyUI是一款基于jQuery的UI库，它是一个强大、浏览器兼容性好、易于学习和使用的框架。EasyUI提供了大量的UI小部件，如表格、表单、窗口、菜单、树、下拉框等等，使开发者可以快速构建出优秀的Web应用程序。其中，窗口小部件是EasyUI中使用的非常广泛的组件之一，它可以被用来展示内容、收集用户输入、显示消息等等。

特点

• 易于学习和使用
• 强大的功能和灵活的配置选项
• 丰富的API文档和示例代码
• 良好的浏览器兼容性

应用场景

• 弹出提示框、警告框、确认框等
• 展示各种表单内容，如登录框、注册框、设置框等
• 在页面中添加对话框，如图片预览框、编辑框等

代码示例

弹出提示框

<a href="#" class="easyui-linkbutton" onclick="$.messager.alert('提示','请填写完整信息！','info');">弹出提示框</a>

表单窗口

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">用户注册</div>
    <form id="fm" method="post" novalidate>
        <div class="fitem">
            <label>用户名:</label>
            <input name="name" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>密码:</label>
            <input name="password" type="password" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>确认密码:</label>
            <input name="repassword" type="password" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Email:</label>
            <input name="email" class="easyui-validatebox" validType="email">
        </div>
    </form>
</div>

<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">取消</a>
    <a href="#" class="easyui-linkbutton" onclick="submitForm()">提交</a>
</div>

<script>
    function submitForm() {
        $('#fm').form('submit', {
            url: 'submit.php',
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.success) {
                    $.messager.alert('提示', '注册成功！');
                    $('#dlg').dialog('close');
                } else {
                    $.messager.alert('警告', result.msg);
                }
            }
        });
    }
</script>

编辑窗口

<div id="dlg" class="easyui-dialog" style="width:500px;height:400px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">编辑</div>
    <form id="fm" method="post" novalidate>
        <input name="id" type="hidden">
        <div class="fitem">
            <label>姓名:</label>
            <input name="name" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>年龄:</label>
            <input name="age" class="easyui-validatebox" validType="number">
        </div>
        <div class="fitem">
            <label>职业:</label>
            <input name="job">
        </div>
        <div class="fitem">
            <label>电话:</label>
            <input name="phone" class="easyui-validatebox" validType="phone">
        </div>
        <div class="fitem">
            <label>地址:</label>
            <textarea name="address"></textarea>
        </div>
    </form>
</div>

<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" onclick="saveData()">保存</a>
    <a href="#" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">关闭</a>
</div>

<script>
    // 编辑数据
    function editData() {
        var row = $('#dg').datagrid('getSelected');
        if (row) {
            $('#dlg').dialog('open').dialog('setTitle', '编辑');
            $('#fm').form('load', row);
        } else {
            $.messager.alert('警告', '请选中一行数据！');
        }
    }

    // 保存数据
    function saveData() {
        var isValid = $('#fm').form('validate');
        if (isValid) {
            $.ajax({
                url: 'save_data.php',
                type: 'post',
                data: $('#fm').serialize(),
                beforeSend: function () {
                    $.messager.progress({
                        title: '请稍等',
                        msg: '正在处理中...'
                    });
                },
                success: function (result) {
                    $.messager.progress('close');
                    var result = eval('(' + result + ')');
                    if (result.success) {
                        $.messager.alert('提示', '保存成功！');
                        $('#dlg').dialog('close');
                        $('#dg').datagrid('reload');
                    } else {
                        $.messager.alert('警告', result.msg);
                    }
                }
            });
        }
    }
</script>

结论

EasyUI是一个方便易用的jQuery UI库，具有丰富的组件和选项，使开发Web应用程序更加轻松。窗口小部件是EasyUI中使用的非常常用的组件之一，可以用于显示内容，收集用户输入和显示消息等。 随着时间的推移，它可能会退出市场，但它目前仍然是最好的jQuery UI库之一。