jquery mobile image Popup中的对齐问题
Posted
技术标签:
【中文标题】jquery mobile image Popup中的对齐问题【英文标题】:Alignment Issue in jquery mobile image Popup 【发布时间】:2014-12-18 19:14:41 【问题描述】:我有一个 ID 为 popupBasic 的 div,用于 Jquery Mobile 中的弹出窗口
<div data-role="popup" id="popupBasic">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img id="imgView" />
</div>
为了打开按钮上的弹出窗口,请单击btnViewPopup,使用以下代码。
function btnViewPopup()
try
if (localStorage.imageURL == undefined || localStorage.imageURL.length == 0 || localStorage.imageURL == "undefined")
Notify(22);
else
var source = localStorage.imageURL
$("#imgView").attr('src', source);
$("#popupBasic").popup("open");
catch (err)
ErrorMessageDB("Issue Attachments", "btnAttViewClick", "", "click-to view attachment", err.message, localStorage.EmployeesKId4LastModifiedBy);
当前实现
-
有一个用于图像列表的单选按钮列表。
如果选择其中一个,则其图像 URL 将存储在本地存储中。
点击查看按钮时,将imgView的src设置为localstorage中的值
调用弹窗(“打开”)
我的问题是第一次单击查看按钮时,显示的图像很小并且它与右中对齐。下次当我打开另一个或相同的图像时,它会像我预期的那样显示完整。 我没有给出图像的高度和宽度,因为不同的图像可能会有所不同。
我做错了什么?
提前致谢
【问题讨论】:
【参考方案1】:在知道图像尺寸之前显示您的弹出窗口。图片加载完成后可以打开弹窗,如下:
CSS:
#imgView
width: 100%;
height: 100%;
JS:
function btnViewPopup()
localStorage.imageURL = 'http://www.elated.com/res/Image/articles/development/javascript/jquery/jquery-mobile-what-can-it-do-for-you/themes.jpg';
try
if (localStorage.imageURL == undefined || localStorage.imageURL.length == 0 || localStorage.imageURL == "undefined")
Notify(22);
else
var source = localStorage.imageURL;
$("#imgView").attr('src', source);
$("#imgView").one("load", function()
$("#popupBasic").popup("open");
).each(function()
if (this.complete)
$(this).load();
);
catch (err)
ErrorMessageDB("Issue Attachments", "btnAttViewClick", "", "click-to view attachment", err.message, localStorage.EmployeesKId4LastModifiedBy);
这里是DEMO。
【讨论】:
以上是关于jquery mobile image Popup中的对齐问题的主要内容,如果未能解决你的问题,请参考以下文章
jQuery Mobile Popup 和 ListView,以及 Popup div 内的 Knockout.js 数据绑定 - 不工作
jquery mobile popup,需要点击两次才能关闭
jquery mobile popup - 按钮样式不正确,data-iconpos =“notext”,以及其他问题