对话框(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:;

    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:;

}

#header .header_main {

    width: 800px;

    height: 40px;

    margin: 0 auto;

}

#header .header_main h1 {

    font-size: 20px;

    margin:;

    padding:;

    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");

});

知问前端——对话框UI(一)的更多相关文章

  1. 第一百七十八节，jQuery-UI，知问前端--对话框 UI

    jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中 ...

  2. 知问前端——对话框UI(二)

    dialog()方法的事件 除了属性设置外,dialog()方法也提供了大量的事件,这些事件可以给各种不同状态时的对话框提供回调函数,这些回调函数中的this值等于对话框内容的div对象,不是整个对话 ...

  3. 第一百八十二节，jQuery-UI，知问前端--日历 UI

    jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...

  4. 知问前端——日历UI(三)

    datepicker日期选择选项 属性 默认值/类型 说明 minDate 无/对象.字符串或数值 日历中可以选择的最小日期 maxDate 无/对象.字符串或数值 日历中可以选择的最大日期 defa ...

  5. 知问前端——日历UI(二)

    datapicker外观选项 属性 默认值/类型 说明 disabled false/布尔值 禁用日历 numberOfMonths 1/数值 日历中同时显示的月份个数.默认为1,如果设置3就同时显示 ...

  6. 知问前端——日历UI(一)

    日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); ...

  7. 知问前端——工具提示UI

    工具提示(tooltip),是一个非常实用的UI.它彻底扩展了HTML中的title属性,让提示更加丰富,更加可控制,全面提升了用户体验. 调用tooltip()方法 在调用tooltip()方法之前 ...

  8. 知问前端——按钮UI

    按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观.它不单单可以设置按钮或文本,还可以设置单选按钮和多选按钮. 使用button按钮 使用button按钮UI的时候,不一定必须是 ...

  9. 第一百七十九节，jQuery-UI，知问前端--按钮 UI-图标

    jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...

随机推荐

  1. eclipse创建android项目失败的问题 [ android support library ]

    有根筋搭错了,想起来android应用开发???? 放下两年的手机应用开发,昨天有更新了android SDK, 重新搭建开发环境. 这两年android 变化真TM的大............... ...

  2. 用js进行日期的加减

    如题,开始查了查js的使用文档,但没发现可以直接用的函数,于是就想自己写函数来着,这就要涉及到每个月天数的判断,如果是2月份的话,还要涉及到闰年的判断,虽然不复杂但我想js应该不会这么低级,于是查了下 ...

  3. Go字典

    字典(map)是Go语言内置的数据结构,一组键值对的无序集合. 看代码: package main import "fmt" func main() { //使用make申请一个m ...

  4. func_num_args(),func_get_arg(),func_get_args()

    <?php function testFunction1(){ return func_num_args(); } function testFunction2(){ return func_g ...

  5. c/c++常用代码--string trim

    typedef std::basic_string<TCHAR> tstring; inline static void trim(tstring& s){    s.erase( ...

  6. “psp”软件需求规约

    1 系统概述 1.1 概述 该产品是基于软件开发的个人软件过程(personal software process)系统.基本信息有软件开发人员,项目经理,研发经理和管理层登录系统后根据各自的相应权限 ...

  7. xml之XSLT

     1.XSLT是什么  XSLT是XSL的子集,XSL是样式表.XSLT的作用:将XML文档转化成HTML,做的是中间转换者. 而主要需要学习的是XSLT(XSLTransformation).  2 ...

  8. Hibernate映射类型对照表

    Hibernate映射类型对照表 java类型  Hibernate映射类型  SQL类型 java.math.BigDecimal big_decimal numeric byte[] binary ...

  9. Linux - 常用命令行（一）

    今天和大家分享一些最基本常用命令行:也是作为新手最应该了解掌握的 ls 命令:用来显示指定工作目录下内容 dir命令:与ls命令一致 cd  命令:变化工作目录 pwd命令:显示用户当前的工作路径,显 ...

  10. poj 1470 Closest Common Ancestors LCA

    题目链接:http://poj.org/problem?id=1470 Write a program that takes as input a rooted tree and a list of ...