Web开发中的弹奏有对话框控件介绍

Web开发被,目前是因为Jquery的盛,因此多弹有对话框,都用到了Jquery技术,反而原始之弹有对话框的主意较少用了。不过据悉JQuery的章程实现对话框窗口弹出,也闹众多控件可以以,由于工作需要跟业余兴趣所至,我较了濒临10种的对话框控件,其中发现发部分举行得稀好的,除了功能强大,而且也支撑多肌肤样式,甚至略对话框的位于中都考虑到了,细节决定体验,有些真的是。

1、原始的弹奏有对话框实现(弹来窗口为足以)

咱们懂得,以前当从来不行使其他javascript库(例如各种类型的Jquery库)的当儿,一般是由此window.open或者window.showModalDialog来弹出非模态或者模态的对话框的,如下脚本所示。

function OpenWin( sURL , sFeatures )
{
    window.open( sURL , null , sFeatures , null)
    //window.open("Sample.htm",null,"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
    //window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
    //sName{_blank; _media; _parent; _search; _self; _top}
    //sFeatures{channelmode; directories; fullscreen; height; left; location; menubar; resizable; scrollbars; status; titlebar; toolbar; top; width} 
}

function ShowWin( sURL , sFeatures )
{
    if(sFeatures == null || sFeatures == ""){
        sFeatures = 'dialogHeight:300px;dialogWidth:850px;status:no;scroll:yes;resizable:yes;help:no;center:yes;';
     }

    var returnValue= window.showModalDialog( sURL , null , sFeatures)
    //window.showModalDialog("Sample.htm",null,"dialogHeight:591px;dialogWidth:650px;")
    //window.showModalDialog([sURL] [, vArguments] [, sFeatures])
    //sFeatures{dialogHeight; dialogLeft; dialogTop; dialogWidth; center; dialogHide; edge; help; resizable; scroll; status; unadorned}
    if(returnValue != undefined)
    {
        return returnValue;
    }
    else
    {
        return "";
    }
}

这种是固有方法,好处坏处大家还掌握,就不说了。

还有同栽基于Jquery的原始弹出窗口方式,由于自一般采取的凡easy-ui作为界面的基本功零部件,因此基于easy-ui的原始弹出窗口方式,只能是弹出内部的HTML层内容,对于弹有单身的页面这种艺术支持非敷好。

    <script type="text/javascript"> 

    function initDialog(divname) {
        var dlg = jQuery(divname).dialog({
            draggable: true,
            resizable: true,
            closed: true,
            show: 'Transfer',
            hide: 'Transfer',
            autoOpen: false,
            width: 500,
            height: 250,
            minHeight: 10,
            minwidth: 10
        });
        dlg.parent().appendTo(jQuery("form:first"));
    };

    function close(divname) {
        $(divname).dialog('close');
    }
    </script>

 

2、Popup的弹奏出式对话框

bifa365必发 1

是popup控件弹来底对话框,它好像拿弹来的子页面放到了大窗口内了,感觉是一体化的,所以操作父窗口的对话框也得以,非常有益。

bifa365必发 2

斯popup控件,比较好使,不过不好的地方即是未配合其他浏览器如Chrome等,其他浏览器显示层是错位的,不好看,而且样式也针锋相对比较简单一点了。

可是出于在弹有窗口被得以挺好操作父窗口的脚本以及使用方便,在本人以前的片段类型中,用之还算是比较多。

 

3、AsyncBox的弹奏有对话框

bifa365必发 3

斯控件感觉做的酷科学,而且提供了Chrome、QQBrowser、Ext、ZCMS四种植对的窗体皮肤,适应强消,通过改动其的皮层图片,还可定义适合自己种之体制皮肤,如本人修改定义了一样栽黄色调的样式例子。

bifa365必发 4

然而以应用过程被,发现这控件,对有些脚本或者Jquery控件有冲突,具体由未明,总之发现了和因Jquery的ZTree运行无正规,还有一些Jquery组件使用也无正常,在我之Web权限管理网受,本来想用此作为弹有窗口亮有安信息之,发现zTree的Node选中价值获取不了,也尽管一定给失效了,非常烦心,弄了要命长远,没有找到具体由。还有另外一个问题,就是以此控件的撰稿人不亮什么由,好像停了对该控件的开销了,连它们的官网也下架了。

然而对于弹来窗口的行使的话,该控件已经十分不利了,提供了又调用模块,而己一般倾向被弹有另外一个页面这种办法,当然她吧支持弹来页面中的交汇或者HTML代码等等方式。

 

4、artDialog弹有对话框

本条artDialog弹来对话框组件,是自己觉着一定好之等同磨蹭了,除了支持多浏览器,而且提供的界面效果又多,目前之版本是V4.1.6,好像还有一个V5.0底Beta版本(https://github.com/aui/artDialog),但是V5.0的便调动了不支持通过art.dialog.open方式弹来单身Web页面的计了,要实现弹来单身页面,需要运用Iframe的代码,效果即使不同了一部分,所以我同情于V4.1.6。

bifa365必发 5

拖欠控件支持自动计算在中职,我们只有待指定对话框的轻重即可,当然她很好支持页面内之叠内容之弹来显示,不过自己再体贴的是独页面的弹来对话框显示,我在实际的Web权限管理网受行使之效力如下所示(结合了ZTree控件,运行正常)。

bifa365必发 6

这控件bifa365必发提供了无数参数与艺术,对贯彻调用非常强。

    <script src="http://www.cnblogs.com/JQueryTools/artDialog/artDialog.source.js?skin=blue" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/JQueryTools/artDialog/plugins/iframeTools.source.js" type="text/javascript"></script>

 首先封装一个通用的Javascript函数

function ShowArtDlg(title, url, width, height, lock) 
{
    if (width == null || width == "") {
        width = '90%';
    }
    if (!width.indexOf('px') && !width.indexOf('%')) {
        width = width + 'px';
    }
    if (width.indexOf('px') < 0 && width.indexOf('%') < 0) {
        width = width + 'px';
    }

    if (height == null || height == "") {
        height = '90%'
    }
    if (height.indexOf('px') < 0 && height.indexOf('%') < 0) {
        height = height + 'px';
    }

    if (lock == null || lock == "") {
        lock = false;
    }
    art.dialog.open(url, { height: height, width: width, title: title, lock: lock }, false); //打开子窗体
}

页面内调用的代码如下所示。

                    <tr align="right">
                        <td>
                            <a href="#" class="easyui-linkbutton" iconcls="icon-edit" id="btnAddUser" onclick="ShowArtDlg('编辑-包含用户', 'EditTree.aspx?type=user&ouid=' + $('#txtID').val(), '360px', '500px')" runat="server">编辑</a>&nbsp;&nbsp;
                            <a href="#" class="easyui-linkbutton" iconcls="icon-remove" id="btnDeleteUser" onclick="deleteUser()" runat="server">移除</a>
                        </td>
                    </tr>

假设你用5.0+的ArtDialog,调整了不支持通过art.dialog.open方式弹有单身Web页面的法,但还是好由此以下的计去弹有单身页面。

art.dialog({title : "选择***",
            cancel : true,
            width : 600,
            padding : '5px',
            content : '<iframe src="test.aspx" id="test" name="test" height="400" width="600" frameborder="0"></iframe>',
            ok : function(){
                ...
            }
        });

 

5、还有部分弹来窗口控件,还支持窗口的最大化操作,这个效果或不错的。

bifa365必发 7

bifa365必发 8

发表评论

电子邮件地址不会被公开。 必填项已用*标注