在jquery的应用中,我们可以选择使用 jquery ui来快速完成前端搭建,当然jquery ui不能做页面布局是很让人伤心的一件事。

但最让人无法忍受的还是它的那个dialog无法打开一个新网页,而只能打开一个本网页上的容器元素。

所幸有人有同样的需求,所以有了这个jquery ui扩展插件jquery ui framedialog.

但随之而来的另一个问题是,这个窗口没办法改变大小,当创建以后它就得是那个样子了。

所以我只好对这个扩展插件做扩展

        var theDialog_1 = jQuery.FrameDialog.create({
            url: 'aaa.aspx?id=123',
            loadingClass: 'loading-image',
            title: 'theDialog_1',
            width: 600,
            height: 400,
            resizable: true,
            autoOpen: true,
            buttons: null,
            modal: true
        });

用以上这个语句打开的窗口。

此时我们无法重置这个对话框的大小。

打开jquery-framedialog-1.1.2.1.js

加入一个扩展方法

    $.fn.resizeDialog = function(width, height, position){
        var oldwidth = this.dialog('option','width');
        var oldheight = this.dialog('option','height');
        if(width>-1){
            this.dialog('option','width',width);
        }
        if(height>-1){
            this.dialog('option','height',height);
        }
        if(position)
            this.dialog('option','position',position);
        else  
            this.dialog('option','position','center');
        
    }

现在可以用

theDialog_1 .resizeDialog(800,500,'center');

来改变大小了。

 

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐