Jquery - UI - Dialog(转)
jQuery UI Dialog常用的参数有:
1、autoOpen:默认true,即dialog方法创建就显示对话框
2、buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式:
{"确定":function(){},"取消":function(){}}
[{text:"确定", click: function(){}},{text:"取消",click:function(){}}]
3、modal:默认false,是否模态对话框,如果设置为true则会创建一个遮罩层把页面其他元素遮住
4、title:标题
5、draggable:是否可手动,默认true
6、resizable:是否可调整大小,默认true
7、width:宽度,默认300
8、height:高度,默认"auto"
其他一些不太常用的参数:
1、closeOnEscape:默认true,按esc键关闭对话框
2、show:打开对话框的动画效果
3、hide:关闭对话框的动画效果
4、position:对话框显示的位置,默认"center",可以设置成字符串或数组:
'center', 'left', 'right', 'top', 'bottom'
['right','top'],通过上面的几个字符串组合(x,y)
[350,100],绝对的数值(x,y)
5、minWidth:默认150,最小宽度
6、minHeight:默认150,最小高度
使用方法:
$("...").dialog({
title: "标题",
//...更多参数
});
主要方法
jQuery UI Dialog提供了一些方法来控制对话框,仅列出常用的:
open:打开对话框
close:关闭对话框(通过close不会销毁,还能继续使用)
destroy:销毁对话框
option:设置参数,即前面列出的参数
使用的时候作为dialog方法的参数:
复制代码 代码如下:
var dlg = $("...").dialog({
//...各种参数
});
dlg.dialog("option", { title: "标题" }); // 设置参数
dlg.dialog("open"); // 使用open方法打开对话框
主要事件
jQuery UI Dialog提供了一些事件,比如打开、关闭对话框的时候做一些额外的事情:
open:打开时
close:关闭时
create:创建时
resize:调整大小时
drag:拖动时
使用方法同参数的使用方法,比如在打开时隐藏关闭按钮:
复制代码 代码如下:
$("...").dialog({
//...各种参数
open: function(event, ui) {
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
}
});
JAVASCRIPT:

<script type="text/javascript">
$(function () {
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function () { $(this).addClass('ui-state-hover'); },
function () { $(this).removeClass('ui-state-hover'); }
); //初始化对话框
$("#dialog").dialog
({
autoOpen: false,
width: 600,
modal: true,
resizable: false,
buttons: {
"Login": function () {
$.ajax({
type: 'post',
url: '/User/Login',
data: $('form').serialize(), //序列化对象参数
success:function(data){
$(this).dialog("close");
location.href = "/User/Testing";
}
});
},
"Cancel": function () {
$(this).dialog("close");
}
}
}); //打开对话框
$("#dialog_link").click(function () {
$("#dialog").dialog("open");
return false;
});
});
</script>

VIEW:

<!-- jquery dialog -->
<h2 class="demoHeaders">Dialog</h2>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
<div id="dialog" title="LOGIN">
@using (Html.BeginForm())
{ @Html.EditorFor(model => model.UserName) <br />
@Html.PasswordFor(model => model.Password) <br />
@Html.TextBoxFor(model => model.VerificationCode)
<img id="verificationcode" alt="" src="@Url.Action("VerificationCode", "User")" />
<a id="trydifferent" style="cursor: pointer">换一张</a>
}
</div> <script type="text/javascript">
//刷新验证码
$("#trydifferent").click(function () {
$("#verificationcode").attr("src", "/User/VerificationCode?" + new Date());
}) </script> 转自http://www.cnblogs.com/landexia/p/3771274.html
Jquery - UI - Dialog(转)的更多相关文章
- 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
- [转]jQuery UI Dialog Modal Popup Yes No Confirm example in ASP.Net
本文转自:http://www.aspsnippets.com/Articles/jQuery-UI-Dialog-Modal-Popup-Yes-No-Confirm-example-in-ASPN ...
- API分析——Jquery UI Dialog
1.阅读API文档的一般方法? 通常地, API由三部分构成:属性.方法.事件. 属性表示参数配置,作为一个组件的微调,或者功能的开启与关闭: 方法表示组件能够发生的动作,或者组件的状态监测: 事件表 ...
- jQuery UI dialog 的使用
今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQuery 环境 首先,我们创建一个按钮,点击这个按钮的时候,将会弹出一个对话框. 1 <input type= ...
- jQuery UI dialog 參数说明
前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比方弹出两个层A和B B层假设显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,由于B层是在A层上弹出的 ...
- jQuery UI dialog 参数说明
前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比如弹出两个层A和B B层如果显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,因为B层是在A层上弹出的 ...
- JQuery UI dialog 弹窗实例及参数说明
按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...
- jQuery UI dialog
初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...
- jQuery UI dialog插件出错信息:$(this).dialog is not a function
使用jQuery UI 1.7.2 dialog插件,遇到这样的错误: [img]http://dl.iteye.com/upload/attachment/308166/97c428e4-2ce2- ...
随机推荐
- HttpURLConnection碰到连续302跳转的问题的原因及解决方法
用HttpURLConnection联网的代码: HttpURLConnection conn = null; URL url = new URL("http://10.0.0. ...
- Java之路(六) 局部变量作用域最小化
将局部变量的作用域最小化,可以增强代码的可读性和可维护性,并降低出错的可能性. 将局部变量的作用域最小化的方法有: 方法1:在第一次使用某个局部变量的地方进行声明. a.Java可以在任何可以出现语句 ...
- 【C#】Creating/Querying/Modifying the .mdb databases
As for databases, there are quit many kinds such as foxpro, mysql, sqlserver, etc. But when we need ...
- C#把gird数据导出到excel
/// <summary> /// DataTable导出到Excel /// </summary> /// <param na ...
- Zabbix概念、安装以及快速入门
Zabbix is an enterprise-class open source distributed monitoring solution.[1] Zabbix是一个企业级的.开源的.分布式的 ...
- hdu 1848 Fibonacci again and again(简单sg)
Problem Description 任何一个大学生对菲波那契数列(Fibonacci numbers)应该都不会陌生,它是这样定义的:F(1)=1;F(2)=2;F(n)=F(n-1)+F(n-2 ...
- Openjudge-NOI题库-数根
题目描述 Description 数根可以通过把一个数的各个位上的数字加起来得到.如果得到的数是一位数,那么这个数就是数根.如果结果是两位数或者包括更多位的数字,那么再把这些数字加起来.如此进行下去, ...
- 转:Spark User Defined Aggregate Function (UDAF) using Java
Sometimes the aggregate functions provided by Spark are not adequate, so Spark has a provision of ac ...
- 关于java的设计模式(转)
设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
- CSS 待解决问题
记录一些待解决的问题 1. 关于 table 边框参差不齐问题 乍一看表头的边框有 间隙, 下边框也有点没有对其的问题. 解决方案: 给 table 添加: border-collapse: col ...