diolog js_jQuery UI 实例

jQuery UI 实例 - 对话框(Dialog)

在一个交互覆盖层中打开内容。

如需了解更多有关 dialog 部件的细节，请查看 API 文档 对话框部件(Dialog Widget)。

默认功能

基本的对话框窗口是一个定位于视区中的覆盖层，同时通过一个 iframe 与页面内容分隔开(就像 select 元素)。它由一个标题栏和一个内容区域组成，且可以移动，调整尺寸，默认可通过 'x' 图标关闭。

jQuery UI 对话框(Dialog) - 默认功能

$(function() {

$( "#dialog" ).dialog();

});

这是一个默认的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。

动画

可以通过为 show/hide 属性指定一个特效来动画显示对话框。您必须为想使用的特效引用独立的特效文件。

jQuery UI 对话框(Dialog) - 动画

$(function() {

$( "#dialog" ).dialog({

autoOpen: false,

show: {

effect: "blind",

duration: 1000

},

hide: {

effect: "explode",

duration: 1000

}

});

$( "#opener" ).click(function() {

$( "#dialog" ).dialog( "open" );

});

});

这是一个动画显示的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。

打开对话框

基本的模态

模态对话框防止用户与对话框以外的页面其他部分进行交互，直到对话框关闭为止。

jQuery UI 对话框(Dialog) - 基本的模态

$(function() {

$( "#dialog-modal" ).dialog({

height: 140,

modal: true

});

});

添加模态覆盖屏幕，让对话框看起来更突出，因为它让页面上其他内容变暗。

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.

模态确认

确认一个动作可能是破坏性的也可能是有意义的。设置 modal 选项为 true，并通过 buttons 选项来指定主要的和次要的用户动作。

jQuery UI 对话框(Dialog) - 模态确认

$(function() {

$( "#dialog-confirm" ).dialog({

resizable: false,

height:140,

modal: true,

buttons: {

"Delete all items": function() {

$( this ).dialog( "close" );

},

Cancel: function() {

$( this ).dialog( "close" );

}

}

});

});

这些项目将被永久删除，并且无法恢复。您确定吗？

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.

模态表单

使用模态对话框来请求用户在一个多步骤过程中输入数据。在内容区域嵌入 form 标记，设置 modal 选项为 true，并通过 buttons 选项来指定主要的和次要的用户动作。

jQuery UI 对话框(Dialog) - 模态表单

body { font-size: 62.5%; }

label, input { display:block; }

input.text { margin-bottom:12px; width:95%; padding: .4em; }

fieldset { padding:0; border:0; margin-top:25px; }

h1 { font-size: 1.2em; margin: .6em 0; }

div#users-contain { width: 350px; margin: 20px 0; }

div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }

div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }

.ui-dialog .ui-state-error { padding: .3em; }

.validateTips { border: 1px solid transparent; padding: 0.3em; }

$(function() {

var name = $( "#name" ),

email = $( "#email" ),

password = $( "#password" ),

allFields = $( [] ).add( name ).add( email ).add( password ),

tips = $( ".validateTips" );

function updateTips( t ) {

tips

.text( t )

.addClass( "ui-state-highlight" );

setTimeout(function() {

tips.removeClass( "ui-state-highlight", 1500 );

}, 500 );

}

function checkLength( o, n, min, max ) {

if ( o.val().length > max || o.val().length < min ) {

o.addClass( "ui-state-error" );

updateTips( "" + n + " 的长度必须在 " +

min + " 和 " + max + " 之间。" );

return false;

} else {

return true;

}

}

function checkRegexp( o, regexp, n ) {

if ( !( regexp.test( o.val() ) ) ) {

o.addClass( "ui-state-error" );

updateTips( n );

return false;

} else {

return true;

}

}

$( "#dialog-form" ).dialog({

autoOpen: false,

height: 300,

width: 350,

modal: true,

buttons: {

"创建一个帐户": function() {

var bValid = true;

allFields.removeClass( "ui-state-error" );

bValid = bValid && checkLength( name, "username", 3, 16 );

bValid = bValid && checkLength( email, "email", 6, 80 );

bValid = bValid && checkLength( password, "password", 5, 16 );

bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "用户名必须由 a-z、0-9、下划线组成，且必须以字母开头。" );

// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/

bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );

bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "密码字段只允许： a-z 0-9" );

if ( bValid ) {

$( "#users tbody" ).append( "

" +

"

" + name.val() + "" +

"

" + email.val() + "" +

"

" + password.val() + "" +

"

" );

$( this ).dialog( "close" );

}

},

Cancel: function() {

$( this ).dialog( "close" );

}

},

close: function() {

allFields.val( "" ).removeClass( "ui-state-error" );

}

});

$( "#create-user" )

.button()

.click(function() {

$( "#dialog-form" ).dialog( "open" );

});

});

所有的表单字段都是必填的。

名字

邮箱

密码

已有的用户：

名字邮箱密码

John Doejohn.doe@example.comjohndoe1

创建新用户

模态消息

使用模态对话框来在下一步动作执行之前确认信息和动作。设置 modal 选项为 true，并通过 buttons 选项来指定主要的动作(Ok)。

jQuery UI 对话框(Dialog) - 模态消息

$(function() {

$( "#dialog-message" ).dialog({

modal: true,

buttons: {

Ok: function() {

$( this ).dialog( "close" );

}

}

});

});

您的文件已经成功下载到文件夹中。

当前使用存储空间的 36%。

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.