对话框(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. django-south

    python manage.py schemamigration youappname --initial # --initial在数据库创建models定义的表,以及South需要的south_mi ...

  2. DataTemplate 以及Template Selector 学习笔记

    1. 内容控件通过ContentTemplate,列表控件通过itemTemplate 来支持模板绑定.例子如下: 模板定义: xaml: <DataTemplate x:Key="R ...

  3. Delphi 递归搜索.SVN文件夹并“处理”

    实在是没有想到删除.SVN文件夹是件这么痛苦的事情,最近在整理公司历史资料文件,粗略统计一下600G左右,本想一次提交到服务器上省事,没想到啊没想到,传输中途程序崩掉了,本地文件夹剩下一大堆.svn文 ...

  4. Node.js 学习（四）Node.js 回调函数

    Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数,Node 所有 API 都 ...

  5. FushionCharts Free 的运用[2D/3D图表处理]

    由于先前在一些论坛中谈论到这个插件的运用,留了一些QQ联系方式,最近老是被一些程序员“骚扰”,说是请教一些关于FushionChart Free图表的处理技术,先前还是比较乐意接受的,但发现后来一些完 ...

  6. BCP command usage in SQL Server

    The bcp Command-Line Utility You use the bcp (bulk copy program) tool to address the bulk movement o ...

  7. C/C++求职宝典21个重点笔记

    转:http://blog.csdn.net/lanxuezaipiao/article/details/41557307 char c = '\72'; 中的\72代表一个字符,72是八进制数,代表 ...

  8. AC自动机学习

    今天包括这一周开始学习AC自动机了,有点晚,但我感觉努努力还来得及.4月份还得认认真真攻图论,加油! 为2个月后的邀请赛及省赛.东北赛做准备. 推荐AC自动机学习地址:http://www.cppbl ...

  9. Leetcode#49 Anagrams

    原题地址 Anagram:变位词.两个单词是变位词关系的条件是:组成单词的字符相同,只是顺序不同 第一次看这道题看了半天没明白要干嘛,丫就不能给个样例输入输出么..后来还是看网上其他人的总结知道是怎么 ...

  10. php正则过滤html标签、空格、换行符的代码，提取图片

    $descclear = str_replace("r","",$descclear);//过滤换行 $descclear = str_replace(&quo ...