Javascript jQuery Mobile:如何将Listview弹出窗口放在页面内容的顶部?
我正在使用jQuery mobile为移动应用程序创建一个简单的用户界面 HTML: JS: 我创建了一个小弹出窗口。当用户点击“更多”选项卡时,将显示我的弹出窗口。我使用javascript(我是JS&jquerynoob)创建它 我真正想要这个弹出窗口做的是,将它显示在页面内容的顶部。在本例中,我希望它显示在信息图形图像的顶部 如果您有其他易于遵循的建议/资源/教程,请与我分享。我想学它Javascript jQuery Mobile:如何将Listview弹出窗口放在页面内容的顶部?,javascript,jquery,jquery-mobile,jquery-mobile-listview,jquery-mobile-popup,Javascript,Jquery,Jquery Mobile,Jquery Mobile Listview,Jquery Mobile Popup,我正在使用jQuery mobile为移动应用程序创建一个简单的用户界面 HTML: JS: 我创建了一个小弹出窗口。当用户点击“更多”选项卡时,将显示我的弹出窗口。我使用javascript(我是JS&jquerynoob)创建它 我真正想要这个弹出窗口做的是,将它显示在页面内容的顶部。在本例中,我希望它显示在信息图形图像的顶部 如果您有其他易于遵循的建议/资源/教程,请与我分享。我想学它 更改java脚本代码,如下所示 function toggle() { var ele = docume
更改java脚本代码,如下所示
function toggle() {
var ele = document.getElementById("pop");
var text = document.getElementById("displayText");
if (ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "More";
} else {
ele.style.display = "block";
text.innerHTML = "Close";
$("#pop").css({top: 50,left:280, position:'absolute'});
}
}
如果您想使用jQuery移动弹出窗口小部件,请参阅此:
$(document).on("click", "#btnToggle", function(){
$(this).find(".ui-btn-text").text("Close");
var bottomPos = $(document).height() - $.mobile.getScreenHeight() + 62 - $(document).scrollTop();
$("body").css("overflow", "hidden");
$("#popupMenu")
.popup( "open", {})
.on( "popupafterclose", function( event, ui ) {
$("#btnToggle .ui-btn-text").text("More");
$("body").css("overflow", "auto");
})
.parents(".ui-popup-container")
.css({
"right": "4px",
"left" : "auto",
"bottom": bottomPos + "px",
"top": "auto"
});
});
代码首先使用类ui btn文本在按钮内部找到适当的跨度,从而将按钮文本更改为关闭。-然后计算弹出窗口的位置,并考虑主体的滚动位置。
-接下来,在弹出窗口处于活动状态时关闭主体上的滚动 -其余部分重置文本并在弹出窗口关闭时滚动,并将弹出窗口定位在按钮上方 以下是更新后的
为什么不使用弹出窗口小部件:检查此小部件并告诉是否有任何更正。@Aravinth看起来不错。但是如何让它像这样漂浮在底部()?看起来不错。但是如何让它像这样在底部浮动()?如果你想在图像中像pop一样,你需要找到图像的高度(这是你的placehold图像)并根据它进行设置。谢谢@ezanker。我在我的安卓手机上测试了一下,它看起来还不错。但当我在iphone上测试它时,我会这样想:这是我的代码结构:我的代码有什么问题吗?或者,JS在iPhone上不能很好地工作?我在iPhone上访问了你的小提琴,我没有看到问题。弹出窗口按预期在底部打开…可能我以前的代码与我的自定义CSS弄乱了。好的,现在我创建一个新的干净的HTML文件&使用纯jquerycss。这是我的截图:你得到的和我的一样吗?你能分享截图吗?不,当我访问你的小提琴时,我得到了预期的结果。iPhone 4s iOS 7.1。您的htm头部是否有vieport meta标记:
function toggle() {
var ele = document.getElementById("pop");
var text = document.getElementById("displayText");
if (ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "More";
} else {
ele.style.display = "block";
ele.style.width = "50%";
ele.style.float = "right";
ele.style.marginRight = "3%";
ele.style.paddingTop = "25px";
ele.style.paddingBottom = "25px";
text.innerHTML = "Close";
}
}
function toggle() {
var ele = document.getElementById("pop");
var text = document.getElementById("displayText");
if (ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "More";
} else {
ele.style.display = "block";
text.innerHTML = "Close";
$("#pop").css({top: 50,left:280, position:'absolute'});
}
}
$(document).on("click", "#btnToggle", function(){
$(this).find(".ui-btn-text").text("Close");
var bottomPos = $(document).height() - $.mobile.getScreenHeight() + 62 - $(document).scrollTop();
$("body").css("overflow", "hidden");
$("#popupMenu")
.popup( "open", {})
.on( "popupafterclose", function( event, ui ) {
$("#btnToggle .ui-btn-text").text("More");
$("body").css("overflow", "auto");
})
.parents(".ui-popup-container")
.css({
"right": "4px",
"left" : "auto",
"bottom": bottomPos + "px",
"top": "auto"
});
});