Jquery Mobile Popup 不以第一次点击为中心
Posted
技术标签:
【中文标题】Jquery Mobile Popup 不以第一次点击为中心【英文标题】:Jquery Mobile Popup not centered on first click 【发布时间】:2014-02-13 19:11:39 【问题描述】:在将 jQuery Mobile 弹出窗口居中时,我遇到了一个令人困惑的问题。当我第一次单击它时,它没有居中并出现在我页面的角落。关闭再打开后突然居中。
这是我的代码:
$(document).on("pageshow",function()
$('.image_link').on('click', function(event)
var id = $(this).children('img').attr("id");
$("#show_image_img").attr("src",sPath + "/view/images/" + id);
$("#show_image").popup('open');
$("#show_image" ).popup( positionTo: "window" );
);
);
这是我的html代码
<div data-role="popup" id="show_image" data-theme="c" class="ui-corner-all">
<div style="padding:20px 30px;">
<img id="show_image_img" src="" />
</div>
</div>
有人知道如何解决这个问题吗?我已经尝试了各种方法,例如将 pageshow
事件更改为 pagebeforeshow
等等。
【问题讨论】:
您使用的是哪个 jQM 版本? 【参考方案1】:我相信在图像完全下载之前第一次点击弹出窗口正在加载,所以它不知道用于定位的大小。因此,左上角居中。
如果你提前知道图片尺寸,你可以通过 CSS 在弹出窗口中预先设置 IMG 标签的大小
如果页面上没有太多图片,可以尝试预加载它们
您还可以在弹出窗口中添加一个小的 setTimeout 延迟,以完成图片下载:
$(document).on("pageshow", function ()
$('.image_link').on('click', function (event)
$("#show_image_img").attr("src", "http://www.aai.ee/planets/nineplanets/gif/SmallWorlds.jpg");
setTimeout(OpenPopup, 50);
);
);
function OpenPopup()
$("#show_image").popup( positionTo: "window" ).popup('open');
【讨论】:
我使用这个方法,超时时间为 100 毫秒,但事实证明,在移动设备中使用时(从 sd 加载图像)并不总是足够的。所需时间取决于图像的大小、设备的速度、网络的速度……这就是我现在使用图像的加载事件的原因。 Jannis,我认为超时也不是永久的解决方案。因为您不确定加载数据需要多长时间。我认为如果它是一个图像加载,那么可能给出图像高度会更好。如果数据来自 ajax 调用,那么最好的办法是在将数据填充到弹出 div 之后,在 ajax 成功案例中打开弹出窗口。这就是我的情况。【参考方案2】:您可以在图像加载后重新定位弹出窗口:
$(document).on("pageshow", function ()
$('.image_link').on('click', function (event)
var $img=$("#show_image_img").attr("src", "http://www.thinkstockphotos.com/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg");
var $popup=$("#show_image").popup("open",
"positionTo": "window"
);
$img.one('load',function()
$popup.popup("reposition",
"positionTo": "window"
);
);
);
);
编辑:在弹出窗口打开时添加位置到窗口,因为如果未加载图像(例如死链接),则弹出窗口未居中。
【讨论】:
@QuickFix,我同意在大多数情况下,这比我的答案更好。 +1!如果您提前知道图像大小,则可以在图像加载之前在正确的位置打开弹出窗口。 是的,我没有看到你的代码在“你也可以”部分;) 大多数时候无法知道尺寸,所以根据我的说法,这个答案非常有效,谢谢【参考方案3】:更新
打开弹窗后正在加载图像,导致错误计算弹窗的尺寸。
为了解决这个问题,重新定位在popupafteropen
事件上弹出。
$("#show_image")
.popup("open")
.on("popupafteropen", function ()
$(this)
.popup("reposition",
"positionTo": "window"
);
);
您在打开弹出窗口后更新positionTo
,您应该在之前更新或将其作为与open
内联的选项 传递。
$("#show_image")
.popup('open',
positionTo: "window"
);
Demo
【讨论】:
您的演示也有同样的问题。弹出窗口显示在左下方。 imagizer.imageshack.us/v2/800x600q90/545/hj97.jpg @JannisHanke 这是图像大小问题,您需要将其定位在popupbeforeposition
事件上,以重新定位它。试试这个jsfiddle.net/avC68/1
@JannisHanke 检查更新的答案和演示jsfiddle.net/Palestinian/avC68【参考方案4】:
我认为超时也不是永久解决方案。因为您不确定加载数据需要多长时间。我认为如果它是一个图像加载,那么可能给出图像高度会更好。如果数据来自 ajax 调用,那么最好的办法是在将数据填充到弹出 div 之后,在 ajax 成功案例中打开弹出窗口。这就是我的情况。
【讨论】:
【参考方案5】:在您的 $(document).ready 函数中等到弹出窗口上的“afteropen”,然后重新定位弹出窗口。还要注意“公差”。我将其设置为“0,0,0,0”,这将让您在 iPhone 4 上填满整个屏幕,而弹出窗口周围没有任何边框 - 如果您的弹出窗口需要填满整个屏幕:
$(document).ready(function()
// Init the jqm popup
$("#popup_modal").popup(
positionTo: "window", history: false, tolerance: "0,0,0,0");
// Wait until the popup finishes opening and reposition it
$("#popup_modal").popup(
afteropen: function (event, ui)
$('#popup_modal').popup('reposition', 'positionTo: window');
);
// Show the popup initially
$("popup_modal").popup('open');
);
【讨论】:
以上是关于Jquery Mobile Popup 不以第一次点击为中心的主要内容,如果未能解决你的问题,请参考以下文章
jQuery Mobile Popup 和 ListView,以及 Popup div 内的 Knockout.js 数据绑定 - 不工作
jquery mobile popup,需要点击两次才能关闭
jquery mobile popup - 按钮样式不正确,data-iconpos =“notext”,以及其他问题