[英]jQuery Mobile: How To Put Listview Popup on Top of Page Content?
I'm creating a simple UI for mobile app using jQuery mobile. 我正在使用jQuery mobile为移动应用创建一个简单的UI。 This is my code (jsfiddle) . 这是我的代码(jsfiddle) 。
HTML: HTML:
<div class="container">
<!-- start -->
<div data-role="page">
<div data-role="header" data-theme="c">
<h1>Infographic</h1>
</div>
<!-- end data role header -->
<div data-role="content" role="main" style="overflow-x: hidden;">
<div class="infografik-image">
<img src="http://placehold.it/440x699" />
</div>
<!-- end infografik-image -->
</div>
<!-- end content -->
<!-- start footer -->
<ul data-role="listview" data-theme="c" style="display:none;" id="pop">
<li><a href="faq.html" rel="external">FAQ</a>
</li>
<li><a href="aduan.html" rel="external">Report</a>
</li>
<li><a href="infographic.html" rel="external">Infographic</a>
</li>
</ul>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar">
<ul>
<li><a href="index.html" rel="external" class="ui-btn-active">Home</a>
</li>
<li><a href="news.html" rel="external">News</a>
</li>
<li><a href="contact.html" rel="external">Contact</a>
</li>
<li><a href="javascript:toggle();" rel="external" id="displayText">More</a>
</li>
</ul>
</div>
<!-- /navbar -->
</div>
<!-- /footer -->
</div>
<!-- end page -->
</div>
<!-- end container -->
CSS: CSS:
body {
margin: 0;
padding: 0;
}
ul#pop {
display:none;
}
.infografik-image {
width: 95%;
margin: 0 auto;
}
.infografik-image img {
width: 100%;
height: auto!important;
vertical-align: bottom;
}
JS: JS:
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";
}
}
I created a small popup. 我创建了一个小弹出窗口。 When user tap on the 'More' tab, my popup will be shown. 当用户点击“更多”标签时,我的弹出窗口将会显示。 I create this using javascript (i'm JS & jQuery noob). 我使用javascript创建它(我是JS和jQuery noob)。
What I actually want this popup do is, display it on top of the page content. 我真正希望这个弹出窗口做的是,将它显示在页面内容的顶部。 In this case, I want it to be shown on the top of the infographic image. 在这种情况下,我希望它显示在信息图图像的顶部。
If you have another suggestion/resources/tutorial that easy to follow, please share it to me. 如果您有其他易于理解的建议/资源/教程,请与我分享。 I want to learn it. 我想学习它。
If you want to use the jQuery Mobile Popup widget: 如果要使用jQuery Mobile Popup小部件:
$(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"
});
});
The code first changes the button text to Close by finding the appropriate SPAN inside the button with the class ui-btn-text. 代码首先通过使用类ui-btn-text在按钮内找到适当的SPAN,将按钮文本更改为Close。
- It then calculates where the popup should go, taking into account the scroll position of the body. - 然后考虑到身体的滚动位置,计算弹出窗口的位置。
- Next, turn off scrolling on the body while the popup is active - the rest resets the text and scroll on popup close and positions the popup just above the button. - 接下来,在弹出窗口处于活动状态时关闭主体上的滚动 - 其余部分重置文本并在弹出窗口上滚动关闭并将弹出窗口置于按钮上方。
Change your java script code like below. 更改您的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'});
}
}
Refer this FIDDLE DEMO 参考这个FIDDLE DEMO
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.