jquery mobile Dialog(对话框)

以交互式弹出打开内容。

页面加载控件 Page Loading Widget 在jQueryMobile通过ajax往页面中加入内容时,pageloading组件用来显示loading对话框。页面loading的对话框可以通过三种方法进行全局的设置:$.mobile.loadingMessage$.mobile.loadingMessageTextVisible$.mobile.loadingMessageTheme。(此方法现在已经不推荐使用了)除了用于显示和隐藏loading对话框以外,$.mobile.showPageLoadingMsg和$.mobile.hidePageLoadingMsg方法也不推荐使用了。通过使用$.mobile.loading方法(见全局方法)可以自定义loading对话框的样式。在mobileinit事件中,可以全局地进行设置对话框的属性。//以下为默认:$(document).bind('mobileinit',function(){$.mobile.loader.prototype.options.text="loading";$.mobile.loader.prototype.options.textVisible=false;$.mobile.loader.prototype.options.the

对话框事件 dialog Events create(event,ui)对话框被创建时,触发的事件。event:是第一个参数。类型:事件。ui:是第二个参数。类型:对象。//初始化,被创建时,制定一个回调函数$(".selector").dialog({create:function(event,ui){}});//绑定一个监听函数$(".selector").on("dialogcreate",function(event,ui){});

对话框方法 dialog Methods close()关闭对话框。此方法没有任何参数。$(".selector").dialog("close");

对话框选项 dialog Options closeBtn关闭按钮。类型:字符串。默认值:"left"。设置对话框的按钮,使其在左侧或者右侧或者无按钮。这个选项页可以在HTML中添加data-close-btn属性来设置。//初始化$(".selector").dialog({closeBtn:"none"});//gettervarcloseBtn=$(".selector").dialog("option","closeBtn");//setter$(".selector").dialog("option","closeBtn","none");closeBtnText关闭按钮的提示文字信息。类型:字符串。默认值:"Close"。定制的“关闭”按钮可帮助翻译成不同的语言文字。这是只显示为图标按钮,默认情况下,文本在屏幕不可见的,但由屏幕阅读器读取,这是一个重要的辅助功能。默认值,是"Close"。这个选项也可以在HTML中添加data-close-btn-text属性来设置。//初始化$(".selector"

对话框 data-rel=dialog 可以把任何指向页面的链接表现对对话框,给链接增加data-rel="dialog"的属性应用对话框。JqueryMobile框架会给新页面增加圆角,页面周围增加margin以及深色的背景,使得对话框浮在页面之上。<ahref="dialog0.html"data-rel="dialog">Opendialog</a>再看看dialog0.html的内容,注意对话框是个单独的页面,JqueryMobile框架将以Ajax方式加载到事件触发的页面。以下代码就是全部dialog0.html的内容<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /><script src="ht