JQuery Mobile Popup窗口定位

在JQuery Mobile 1.4.5 Demo中，有Popup窗口定位的实例，看上出倒是很强大，自己用起来的确很蛮烦的，本人通过修改窗口位置来实现相对定位，供参考。

/*计算菜单位置*/
function openGroupMenu(){var left, top;var rect = document.getElementById('vbook-books-menu').getBoundingClientRect();var winrect = document.getElementById('vbook-menu-group').getBoundingClientRect();left = rect.right - winrect.width/2;top = rect.bottom + winrect.height/2;$('#vbook-menu-group').popup("open", {x:left,y:top});/*计算三角型的位置*/winrect = document.getElementById('vbook-menu-group').getBoundingClientRect();document.getElementById('vbook-menu-group-arrow').style.left = (rect.left + rect.width/2 - winrect.left) + "px";
}

vbook-books-menu为需要定位的div ID.
vbook-menu-group为Popup窗口的div ID.
vbook-menu-group-arrow为Popup窗口的箭头ID。
HTML代码如下：

<div data-role="popup" id="vbook-menu-group"class="vbook-menu-popup ui-popup-container ui-popup-active ui-popup ui-corner-all"><ul data-role="listview" data-inset="true" style="min-width:210px;"><li><a href="#">封面模式</a></li><li><a href="#">列表模式</a></li></ul><div  class="ui-popup-arrow-container ui-popup-arrow-t"><div id="vbook-menu-group-arrow" class="ui-popup-arrow ui-body-inherit"></div></div>
</div>

通过样式可以实现如下效果：

转载于:https://www.cnblogs.com/yin138/p/4902248.html

JQuery Mobile Popup窗口定位相关推荐

jQuery mobile(初级教程)
1,jquery mobile 教程页面内容 <div data-role = "page"></div>头部兰 <div data-role = & ...
jQuery Mobile中弹窗popup的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中弹窗popup的data-*选项带有 data-role="popup&q ...
jquery html data属性,jQuery Mobile Data 属性
jQuery Mobile Data 属性 jQuery Data 属性 jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观. 在下面的参考列 ...
jQuery Mobile Data 属性
按钮带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...
jQuery Mobile基础学习笔记
1.了解jQuery Mobile 1.认识与下载jQuery Mobile 认识jQuery Mobile 1.jQuery Mobile: jQuery Mobile是jQuery在手机上 ...
jQuery Mobile中链接（包含button和表单提交的链接）的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中链接的data-*选项所有的链接,包含那些带有 data-role="bu ...
jQuery Mobile 所有data-*选项，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...
13款基于jQuery Mobile的布局插件和示例
现在已经进入了移动互联网时代,因此将你的网站迁移到移动设备上就显得比较重要的.问题是,如何在移动设备的小屏幕中呈现你的网站中的所有内容呢? 本文介绍13款基于jQuery Mobile的布局插件和示例 ...
jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
jQuery Mobile 1.1八大新特性介绍
随着HTML 5时代的来临,移动开发开始进入了一个新的时代,现在只需要懂得HTML5,配合一定的开发框架,就可以开发出十分漂亮的HTML5的移动应用.在众多的移动HTML5开发框架中,比较著名的是j ...

JQuery Mobile Popup窗口定位

JQuery Mobile Popup窗口定位相关推荐

最新文章

热门文章