JQuery Mobile Popup窗口定位

素颜马尾好姑娘i 2022-08-08 14:54 50阅读 0赞

在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>

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

![菜单定位效果][20150918094814890]

[20150918094814890]: /images/20220731/cd6ba31d170545d380f13d89047d8791.png

发表评论取消回复

表情：

评论列表（有 0 条评论，50人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery mobile学习教程之Jquery mobile 二页面结构

Jquery Mobile基本框架在jQuery Mobile中，有一个基本的页面框架模型，就是在页面中通过将一个标记的“data-role”属性设置为“pag

一时失言乱红尘/ 2023年10月16日 19:32/ 0 赞/ 3 阅读

相关 jquery mobile学习教程之初识Jquery mobile 一

Jquery Mobile简介： jQuery Mobile 是一个针对触摸体验的 web UI 开发框架，允许您开发跨智能电话和平板电脑工作的移动 web 应用程序

墨蓝/ 2023年10月16日 19:32/ 0 赞/ 29 阅读

相关 jQuery Mobile 快速入门

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQueryMobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery

谁借莪１个温暖的怀抱￠/ 2022年09月26日 14:54/ 0 赞/ 167 阅读

相关 JQuery mobile 基本结构

JQuery mobile的书看了些，说实话有点过时了可能，我觉得最好还是看官网的API可能效果更好点吧。最近学习了下，感觉的确比较容易，也是结合这最近看的书，写写笔记啥的

刺骨的言语ヽ痛彻心扉/ 2022年08月21日 08:52/ 0 赞/ 182 阅读

相关 jquery mobile笔记

1：http://www.wglong.com/main/artical!details?id=4\q2 2：codeigniter（ci）在nginx下返回404

深碍√TFBOYSˉ_/ 2022年08月13日 00:42/ 0 赞/ 174 阅读

相关 JQuery Mobile Popup窗口定位

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

素颜马尾好姑娘i/ 2022年08月08日 14:54/ 0 赞/ 51 阅读

相关 jquery mobile界面数据刷新

[jquery mobile界面数据刷新][jquery mobile] JQM里面当我们更新了某些页面标签(如: listview, radiobuttons, che

野性酷女/ 2022年07月15日 06:50/ 0 赞/ 209 阅读

相关 jquery windows resize 定位指定元素改变窗口大小

jQuery.noConflict(); jQuery(document).ready(showNavigationHr); jQuery(window).resize(sho

迷南。/ 2022年07月10日 23:50/ 0 赞/ 216 阅读

相关 jQuery Mobile

jQuery Mobile是一个基于jQuery Core的触摸友好UI框架，适用于所有流行的移动，平板电脑和桌面平台。官网：[http://jquerymobile.co

小灰灰/ 2022年05月14日 07:07/ 0 赞/ 539 阅读

相关 JQuery Mobile试试水

JQuery Mobile了解，扩展一下知识面……废话不多说，找资料去…… 第一步：打开软件——webstorm。（哈哈，让我缓一下）第二步：找到所需的一些工具，引入进

浅浅的花香味﹌/ 2021年06月24日 16:11/ 0 赞/ 357 阅读