在次封装easyui-Dialog 插件

最新推荐文章于 2024-07-30 17:10:23 发布

转载最新推荐文章于 2024-07-30 17:10:23 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hxling/archive/2010/11/12/1875542.html

文章标签：

#javascript #ViewUI

本文介绍了一个基于jQuery的自定义对话框插件实现方法，该插件允许开发者轻松地在网页上创建具有标题、按钮及回调功能的对话框。通过简单的调用方式，可以快速显示包含指定内容和样式的对话框。

$.fn.hDialog = function (options) {
        var defaults = {
            width: 300,
            height: 200,
            title: '此处标题',
            html: '',
            iconCls: '',
            submit: function () { alert('可执行代码.'); }
        }
        var id = $(this).attr('id');
        options = $.extend(defaults, options);
        var self = this;

        $(self).dialog({
            title: options.title,
            height: options.height,
            width: options.width,
            iconCls: options.iconCls,
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: options.submit
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#' + id).dialog('close');
                }
            }]
        });

        function createContent() {
            $('.dialog-content',$(self)).empty().append('<div id="' + id + '_content" style="padding:5px;"></div>');
            $('#' + id + "_content").html(options.html);
        }
        createContent();
    }

调用：

$(function(){