知问前端——对话框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:;

    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(一)的更多相关文章

第一百七十八节，jQuery-UI，知问前端--对话框 UI
jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中 ...
知问前端——对话框UI(二)
dialog()方法的事件除了属性设置外,dialog()方法也提供了大量的事件,这些事件可以给各种不同状态时的对话框提供回调函数,这些回调函数中的this值等于对话框内容的div对象,不是整个对话 ...
第一百八十二节，jQuery-UI，知问前端--日历 UI
jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...
知问前端——日历UI(三)
datepicker日期选择选项属性默认值/类型说明 minDate 无/对象.字符串或数值日历中可以选择的最小日期 maxDate 无/对象.字符串或数值日历中可以选择的最大日期 defa ...
知问前端——日历UI(二)
datapicker外观选项属性默认值/类型说明 disabled false/布尔值禁用日历 numberOfMonths 1/数值日历中同时显示的月份个数.默认为1,如果设置3就同时显示 ...
知问前端——日历UI(一)
日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); ...
知问前端——工具提示UI
工具提示(tooltip),是一个非常实用的UI.它彻底扩展了HTML中的title属性,让提示更加丰富,更加可控制,全面提升了用户体验. 调用tooltip()方法在调用tooltip()方法之前 ...
知问前端——按钮UI
按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观.它不单单可以设置按钮或文本,还可以设置单选按钮和多选按钮. 使用button按钮使用button按钮UI的时候,不一定必须是 ...
第一百七十九节，jQuery-UI，知问前端--按钮 UI-图标
jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...

随机推荐

libcurl　安装使用一
一.下载libcurl http://curl.haxx.se/download/curl-7.21.1.tar.gz 二.安装指定了安装目录 /usr/local/curl 命令1: ...
ssh 安装
一 ssh 1.查看ssh服务的状态输入以下命令: sudo service sshd status 如果出现 Loaded: error (Reason: No such file or dire ...
Awesome Swift
Awesome Swift https://github.com/matteocrippa/awesome-swift A collaborative list of awesome Swift re ...
JS跨域方法及原理
JS跨域分析判断 JS跨域:在不同域之间,JS进行数据传输或通信.比如ajax向不同的域请求数据.JS获取iframe中的页面中的值(iframe内外不同域) 只要协议.端口.域名有一个不同则 ...
Hibernate从入门到精通（十一）多对多双向关联映射
上次我们在中Hibernate从入门到精通(十)多对多单向关联映射讲解了一下多对多单向关联映射,这次我们讲解一下七种映射中的最后一种多对多双向关联映射. 多对多双向关联映射按照我们之前的惯例,先看一 ...
M1事后分析报告（Postmortem Report）
M1事后分析报告(Postmortem Report) 设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们项目组所开发的软件为一个基于Andro ...
pspo
一.项目计划总结: 周活动总结表姓名: 日期:3.12.2015 日期任务听课编写程序阅读课本准备考试日总计周日周一周二周三 10:00- ...
Liferay IDE 3.1 M1发布啦
很嗨森,以后就再也不用SDK和下载.ivy啦新增功能主要有: 1.Liferay Workspace(用来存放Liferay Module项目) 2. Liferay Gradle Module P ...
Ngrok 内网穿透神器(转载)
mac上配置web服务: http://note.rpsh.net/posts/2013/11/27/osx-10-9-apache-server-php-mysql/ Ngrok 内网穿透神器由于 ...
为什么匿名内部类参数必须为final类型（转载）
为什么匿名内部类参数必须为final类型转自于:http://feiyeguohai.iteye.com/blog/1500108 1) 从程序设计语言的理论上:局部内部类(即:定义在方法中的内部类 ...

知问前端——对话框UI(一)

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

随机推荐

热门专题