对话框(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. Java求职面试准备之常见算法

    最近在求职面试,整理一下常见面试算法: 对TestAlgorithms.java中方法的测试见JunitTestAlgorithms.java(引入了junit4) 1.TestAlgorithms. ...

  2. android开发图片分辨率问题解决方案

    dpi是什么呢? dpi是“dot per inch”的缩写,每英寸像素数. 四种密度分类: ldpi (low), mdpi (medium), hdpi (high), and xhdpi (ex ...

  3. EF6 在原有数据库中使用 CodeFirst 总复习（一、搭建基础环境）

    本来以为已经会了,可动手时发现许多问题还是模糊不清,正所谓眼高手低.只能重新查资料,再复习一遍. vs.net2013 ef6 mvc5 sqlserver2008   一.建立数据库  Bloggi ...

  4. sharepoint 2010 重建遇到的问题

    需要重新安装Sharepoint 2010 ,遇到问题记录下来,sharepoint中安装了热补丁和英文语言包. 卸载: 1.运行配置向导将服务器从服务场中脱离: 2.在管理中心中卸载sharepoi ...

  5. java提高篇-----详解java的四舍五入与保留位

    转载:http://blog.csdn.net/chenssy/article/details/12719811 四舍五入是我们小学的数学问题,这个问题对于我们程序猿来说就类似于1到10的加减乘除那么 ...

  6. HTML5做的浏览器欢迎界面自动跳转

    HTML5做的浏览器欢迎界面自动跳转 思路很简单,随手装逼呗.根据时间来控制背景图和文字,背景图加了毛玻璃效果,效果直接看图,用javascript来实现. 完整代码 <!DOCTYPE htm ...

  7. < java.lang >-- String字符串

    java中用String类进行描述.对字符串进行了对象的封装.这样的好处是可以对字符串这种常见数据进行方便的操作.对象封装后,可以定义N多属性和行为. 如何定义字符串对象呢?String s = &q ...

  8. net core 实战之 redis 负载均衡和"高可用"实现

    net core 实战之 redis 负载均衡和"高可用"实现 1.概述 分布式系统缓存已经变得不可或缺,本文主要阐述如何实现redis主从复制集群的负载均衡,以及 redis的& ...

  9. android 下载图片出现SkImageDecoder::Factory returned null，BitmapFactory.Options压缩

    网上有很多说是因为没有采用HttpClient造成的,尼玛,我改成了HttpClient 请求图片之后还是会出现SkImageDecoder::Factory returned null, 但是直接使 ...

  10. SQL Server性能优化（1）使用SET函数

    在一切开始之前,先看下微软的建议:在系统的整体性能优化里面, TSQL优化优先级并不是最高的. 本文包括四部分: SET STATISTICS TIME ON SET STATISTICS IO SE ...