jQuery Mobile Popups
jQuery Mobile Popup弹窗集合。
带有样式风格的弹出框
可自定义样式和最大宽度定义的弹出框 自定义弹窗
弹出菜单
弹出表单
弹出窗口
弹出图片
调用方法:
这个部件在jQueryMobile中会自动初始化,但是你也可以通过popup()方法来调用。$(‘#uedcool’).popup();
调用打开弹出框方法:
除了通过一个带有data-rel=’popup’的链接来触发部件显示,还可以调用open方法来打开弹出框部件,如:$(‘#uedcool’).popup(‘open’);
关闭部件的方法:
弹出框可以通过按Esc键或者点击弹出框外面的区域来关闭,除此之外也可以通过调用close方法来关闭,如:$(‘#uedcool’).popup(‘close’);
还可以通过在弹出框中添加关闭按钮的方式来调用关闭方法,只需要在关闭按钮或者链接中添加data-rel=’back’属性就可以通过点击来隐式调用关闭方法,例如:
注:可以通过定义ui-btn-right
或者ui-btn-left
来控制按钮的显示位置。
部件容器内边距:
建议在弹出框的的div上添加ui-content样式,这样可以使这个容器内内部定义一个15px的内边距,使容器的布局更加自然,如下:
在容器上添加ui-content
样式
定位:
在默认情况下,弹出框的中心点是和触发元素的中心点重合的(除在对边界位置进行修正的情况下),这样可以很方便的来实现菜单或者提示功能。
除此之外,可以通过在触发的链接上定义data-position-to来实现类似对话框或者lightbox风格在页面上居中的显示效果,例如:
弹出框的中心点与页面的中心点对应:
I am positioned to the window.
弹出框的中心点与触发元素的中心点对应:
I am positioned to the window.
除了以上window和origin这两个参数外,还可以在data-position-to属性中设置一个元素的id来使弹出框在该元素的位置显示。
jQuery Mobile Popups