创建对话框 Creating dialogs

优质
小牛编辑
129浏览
2023-12-01

通过给指向页面的链接增加data-rel="dialog"的属性,可以把任何指向的页面表现对对话框。当应用了对话框的属性之后,qjmobile框架会给新页面增加圆角,页面周围增加margin,以及深色的背景,使得对话框浮在页面之上

HTML 代码:

<a href="foo.html" data-rel="dialog">Open dialog</a>

对话框的转场 Transitions

因为Jquery Mobile里对话框也是一个标准的"page",所以他会以默认的slide转场效果打开。而且像其他的页面一样,你也可以通过给链接添加data-transition的属性指定对话框的转场效果。为了让对话框看起来效果更好,我们推?quot;pop", "slideup","flip"三种转场效果

HTML 代码:

<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

关闭对话框 Closing dialogs

对话框内的任何链接被点击时,Jquery Mobile会自动关闭对话框,用回退效果转场到指向该对话框的页面。要在对话框内创建一?取消"按钮,只需要把该链接的herf指向打开该对话框的按钮然后给链接加上data-rel="back"属性。这样制作的后退链接在不支持js的设备上也同样管用

对于js生成的链接,可以把链接的herf设为"#",添加data-rel="back"属性。也可以手动地调用对话框的close()方法关闭对话框,比如? $('.ui-dialog').dialog('close').

设置关闭按钮的文字 Setting the close button text

就像页面插件一样,你可以设置程序或属性两种方法设置对话框关闭按钮的文字。程序的设置可以通过更改mobileinit绑定的事件,然后? $.mobile.dialog.prototype.options.closeBtnText 设置一个字符串。或者给标记代码增加 data-close-btn-text 属性来设置文字

历史和后退按钮的行为 History & Back button behavior

因为对话框是典型地用来给页面起支持作用的,所以Jquery Mobile不会在历史记录的哈希值里包含对话框。这就意味着当点击对话框后退按钮时,他不会出现在你的浏览器历史记录里。比如说,如果你在一个页面上,点击了一个按钮打开了一个对话框,然后关闭了这个对话框,到了另一个页面。这时如果你点击浏览器的后退按钮,那你会回到第一个页面,而不是对话框