zoukankan      html  css  js  c++  java
  • 知问前端——对话框UI(一)

       对话框(dialog),是jQuery UI非常重要的一个功能。它彻底的代替了JavaScript的alert()、prompt()等方法,也避免了新窗口或页面的繁杂冗余。

       开启多个dialog

       我们可以同时打开多个dialog,只要设置不同的id即可实现。如:

       test.html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>知问前端</title>
        <script type="text/javascript" src="jquery-1.12.3.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>
        <script type="text/javascript" src="index.js"></script>
        <!-- 引入icon图标 -->
        <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> 
        <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="header">
            <div class="header_main">
                <h1>知问</h1>
                <div class="header_search">
                    <input type="text" name="search" class="search" />
                </div>
                <div class="header_button">
                    <input type="button" value="查询" id="search_button" />
                </div>
                <div class="header_member">
                    <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>
                </div>
            </div>
        </div>
        
        <div id="reg" title="会员注册">
            表单区--会员注册
        </div>
    
        <div id="login" title="会员登录">
            表单区--会员登录
        </div>
    
    </body>
    </html>

       jQuery代码:

    //同时打开2个对话框
    $("#reg").dialog();
    $("#login").dialog();

       修改dialog样式

       在弹出的dialog对话框中,在火狐浏览器中打开Firebug或者右击->查看元素。这样,我们可以看看dialog的样式,根据样式进行修改。我们为了和网站主题符合,对dialog的标题背景进行修改。

       无须修改ui里的CSS,直接用style.css替代掉,style.css中加入如下代码:

    /* 更改jQuery UI主题的对话框header的背景 */
    .ui-widget-header {
        background: url(img/ui_header_bg.png);
    }

       dialog()方法的属性

       对话框方法有两种形式:

       1.dialog(options),options是以对象键值对的形式传参,每个键值对表示一个选项

       2.dialog('action', param),action是操作对话框方法的字符串,param则是options的某个选项

       dialog外观选项

    属性 默认值/类型 说明
    title 无/字符串 对话框的标题,可以直接设置在DOM元素上
    buttons 无/对象 以对象键值对方式,给dialog添加按钮。键是按钮的名称,值是用户点击后调用的回调函数

       index.html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>知问前端</title>
        <script type="text/javascript" src="jquery-1.12.3.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>
        <script type="text/javascript" src="index.js"></script>
        <!-- 引入icon图标 -->
        <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> 
        <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="header">
            <div class="header_main">
                <h1>知问</h1>
                <div class="header_search">
                    <input type="text" name="search" class="search" />
                </div>
                <div class="header_button">
                    <input type="button" value="查询" id="search_button" />
                </div>
                <div class="header_member">
                    <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>
                </div>
            </div>
        </div>
        
        <div id="reg" title="会员注册">
            表单区--会员注册
        </div>
    
    </body>
    </html>

       style.css:

    body {
        margin: 40px 0 0 0;
        padding: 0;
        font-size: 12px;
        font-family: 宋体;
        background: #fff;
    }
    /* 更改jQuery UI主题的对话框header的背景 */
    .ui-widget-header {
        background: url(img/ui_header_bg.png);
    }
    #header {
        width: 100%;
        height: 40px;
        background: url(img/header_bg.png);
        position: absolute;
        top:0;
    }
    #header .header_main {
        width: 800px;
        height: 40px;
        margin: 0 auto;
    }
    #header .header_main h1 {
        font-size: 20px;
        margin: 0;
        padding: 0;
        color: #666;
        line-height: 40px;
        float: left;
        padding: 0 10px;
    }
    #header .header_search {
        padding: 6px 0 0 0;
        float: left;
    }
    #header .header_search .search {
        width: 300px;
        height: 24px;
        border: 1px solid #ccc;
        background: #fff;
        color: #666;
        font-size: 14px;
        text-indent: 5px;
    }
    #header .header_button {
        padding: 5px;
        float: left;
    }
    #header .header_member {
        float: right;
        line-height: 40px;
        color: #555;
        font-size: 14px;
    }
    #header .header_member a {
        text-decoration: none;
        font-size: 14px;
        color: #555;
    }

       jQuery代码:

    $("#reg").dialog({
        title:"知问注册",
        buttons:{
            '提交':function() {
                alert("正在Ajax提交中...");
            },
            '取消':function() {
                $(this).dialog("close"); //后面讲解对话框的关闭
            }
        }
    });

       dialog页面位置选项

    属性 默认值/类型 说明
    position center/字符串 设置一个对话框窗口的坐标位置,默认为center。其他设置值为:left top、top right、bottom left、right bottom(四个角) 、top、bottom(顶部或底部,宽度居中) 、left或right(左边或右边,高度居中) 、center(默认值)

       jQuery代码:

    $('#reg').dialog({
        position : 'left top' //顶在窗口左上角
    });

       注意:经测试,设置其他值都是对话框顶在窗口左上角,无任何其他效果,除非不写这个属性,对话框才默认窗口居中。

       dialog大小选项

    属性 默认值/类型 说明
    width 300/数值 对话框的宽度。默认为300,单位是像素
    height auto/数值 对话框的高度。默认为auto,单位是像素
    minWidth 150/数值 对话框的最小宽度。默认150,单位是像素
    minHeight 150/数值 对话框的最小高度。默认150,单位是像素
    maxWidth auto/数值 对话框的最大宽度。默认auto,单位是像素
    maxHeight auto/数值 对话框的最大高度。默认auto,单位是像素

       jQuery代码:

    $('#reg').dialog({
        height : 500,
        width : 500,
        minWidth : 300,
        minHeight : 300,    
        maxWidth : 800,
        maxHeight : 600
    });

       dialog视觉选项

    属性 默认值/类型 说明
    show false/布尔值 显示对话框时,默认采用淡入效果
    hide false/布尔值 关闭对话框时,默认采用淡出效果

       jQuery代码:

    $('#reg').dialog({
        show : true,
        hide : true
    });

       注意:设置true后,默认为淡入淡出,如果想使用别的特效,可以使用以下表格中的字符串参数。

       show和hide可选特效

    特效名称 说明
    blind 对话框从顶部显示或消失
    bounce 对话框断断续续地显示或消失,垂直运动
    clip 对话框从中心垂直地显示或消失
    slide 对话框从左边显示或消失
    drop 对话框从左边显示或消失,有透明度变化
    fold 对话框从左上角显示或消失
    highlight 对话框显示或消失,伴随着透明度和背景色的变化
    puff 对话框从中心开始缩放。显示时“收缩”,消失时“生长”
    scale 对话框从中心开始缩放。显示时“生长”,消失时“收缩”
    pulsate 对话框以闪烁形式显示或消失

       jQuery代码:

    $('#reg').dialog({
        show : 'blind',
        hide : 'blind'
    });

       dialog行为选项

    属性 默认值/类型 说明
    autoOpen true/布尔值 默认为true,调用dialog()方法时就会打开对话框;如果为false,对话框不可见,但对话框已创建,可以通过dialog('open')才能可见。
    draggable true/布尔值 默认为true,可以移动对话框,false无法移动。
    resizable true/布尔值 默认为true,可以调整对话框大小,false无法调整.
    modal false/布尔值 默认为false,对话框外可操作,true对话框会遮罩一层灰纱,无法操作。
    closeText 无/字符串 设置关闭按钮的title文字。

       jQuery代码:

       如果autoOpen设置为true,对话框不可见,但对话框已创建,可以通过dialog('open')才能可见。如:

    $("#reg").dialog({
        title:"知问注册",
        buttons:{
            '提交':function() {
                alert("正在Ajax提交中...");
            },
            '取消':function() {
                $(this).dialog("close"); //后面讲解对话框的关闭
            }
        },
        autoOpen:false,
        draggable:false,
        resizable:false,
        modal:true,
        closeText:"关闭"
    });

       点击注册链接弹出对话框:

    $("#reg_a").click(function() {
        $("#reg").dialog("open");
    });

      

      

  • 相关阅读:
    Codechef EDGEST 树套树 树状数组 线段树 LCA 卡常
    BZOJ4319 cerc2008 Suffix reconstruction 字符串 SA
    Codechef STMINCUT S-T Mincut (CodeChef May Challenge 2018) kruskal
    Codeforces 316G3 Good Substrings 字符串 SAM
    Codechef CHSIGN Change the Signs(May Challenge 2018) 动态规划
    BZOJ1396 识别子串 字符串 SAM 线段树
    CodeForces 516C Drazil and Park 线段树
    CodeForces 516B Drazil and Tiles 其他
    CodeForces 516A Drazil and Factorial 动态规划
    SPOJ LCS2
  • 原文地址:https://www.cnblogs.com/yerenyuan/p/5444892.html
Copyright © 2011-2022 走看看