Web开垦中的弹出对话框控件介绍

2019-11-26 15:01 来源:未知

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>

32450新蒲京网站, 

2、Popup的弹出式对话框

32450新蒲京网站 1

这一个popup控件弹出的对话框,它相符把弹出的子页面放到了父窗口里面了,感到是意气风发体化的,所以操作父窗口的对话框也能够,特别常有益。

32450新蒲京网站 2

那些popup控件,相比便于采纳,可是不佳的地点便是不相配其余浏览器如Chrome等,别的浏览器显示层是错位的,不佳看,并且样式也针锋绝相比较较轻松一点了。

但鉴于在弹出窗口中能够很好操作父窗口的台本以至使用方便,在笔者原先的有个别品类里面,用的还算超多。

 

3、AsyncBox的弹出对话框

32450新蒲京网站 3

其生机勃勃控件感到做的很科学,并且提供了Chrome、QQBrowser、Ext、ZCMS多样科学的窗体四肢,适应三种急需,通过改变它们的皮层图片,还是能定义符合本人项目的体制身躯,如笔者改革定义了豆蔻梢头种玫瑰浅绿调的体裁例子。

32450新蒲京网站 4

不过在动用进度中,开掘这一个控件,对有个别脚本只怕Jquery控件有冲突,具体原因未明,总的来讲开掘了和基于Jquery的ZTree运营不正规,还恐怕有局地Jquery组件使用也不不奇怪,在本身的Web权限管理种类中,本来想用那个作为弹出窗口展示一些设置音讯的,发掘zTree的Node选中值获取不了,也就一定于失效了,非常的忧愁,弄了十分久,未有找到切实可行原因。还会有其余三个难点,正是那一个控件的笔者不亮堂什么来头,好像结束了对该控件的支出了,连它的官方网址也下架了。

唯独对此弹出窗口的应用的话,该控件已经很科学了,提供了多样调用模块,而小编平常倾向于弹出别的二个页面这种方式,当然它也支撑弹出页面内部的层依旧HTML代码等等情势。

 

4、artDialog弹出对话框

其大器晚成artDialog弹出对话框组件,是自己感到非常好的黄金时代款了,除了帮忙种种浏览器,何况提供的分界面效果更加多,最近的版本是V4.1.6,好像还大概有一个V5.0的Beta版本(),但是V5.0的就调动了不援助通过art.dialog.open情势弹出单身Web页面包车型地铁点子了,要落到实处弹出单身页面,供给接受Iframe的代码,效果就差了部分,所以我同情于V4.1.6。

32450新蒲京网站 5

该控件援助自动测算居中地点,大家只要求钦点对话框的分寸就能够,当然它很好扶植页面内的层内容的弹出显示,但是自个儿更珍视的是单身页面包车型大巴弹出对话框突显,笔者在现实的Web权限管理体系中运用的职能如下所示(结合了ZTree控件,运营平常卡塔 尔(阿拉伯语:قطر‎。

32450新蒲京网站 6

其风姿洒脱控件提供了点不清参数甚至艺术,对落到实处调用特别常有力。

    <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、还会有风流洒脱部分弹出窗口控件,还帮衬窗口的最大化操作,那些功效还是不错的。

32450新蒲京网站 7

32450新蒲京网站 8

TAG标签:
版权声明:本文由32450新蒲京网站发布于葡萄游戏厅_卡牌游戏,转载请注明出处:Web开垦中的弹出对话框控件介绍