jquery ui FrameDialog 中打开对话框后重置大小

本文介绍如何通过扩展jQuery UI的FrameDialog插件实现对话框大小的动态调整,并提供了一个具体的实现示例。

在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');

来改变大小了。

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值