创建一个弹出式窗口，给要弹出的内容 div 容器添加 data-role="popup" 属性。并且添加 id 属性值。然后创建一个超级链接，href的值即是此ID的值。并且给超级链接添加 data-rel="popup" 。当添加此超级链接的时候，jquery mobile框架会打开弹出内容层。这是一个类似的对话框控件的标记模式。一个弹出div层必须与嵌套超级链接在同一页面上的。
<a href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
<p> This is a completely basic popup, no options set.<p>
</div>
弹窗由两部分组成：第一个是“屏幕”，这是一个透明或半透明的元素覆盖整个文档。第二个是“容器”，这是弹出层本身。如果你原来的元素有一个id属性，屏幕和容器将每个接收基于它的ID属性。屏幕上的ID将后缀“-screen”，与容器的ID将后缀“-popup”（在上面的例子分别是，id="popupBasic-screen" and id="popupBasic-popup"）
jquery mobile框架文本元素增加了少量的margin，此容器是一个空白页面，视觉效果只有一个圆角容器和阴影（这些功能可以通过选项来禁用）。
缩放图像：灯箱的例子
框架的CSS规则使弹窗中的子元素图片适合屏幕。由于对弹出的容器的绝对定位，在所有的浏览器中，图片的高度不调整屏幕高度。你可以使用一个简单的脚本，设置图片的最大高度来防止垂直滚屏。
<!DOCTYPE html>
<html>
<head>
<title> Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"> </script>
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 585px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 585px;
}
.ui-content{
padding:10px 15px 0px 15px;
}
</style>
</head>
<body>
<div data-role="page" style="max-height:590px; min-height:590px;">
<div data-role="content" >
<a href="#popupPhotoLandscape" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true">Photo landscape</a>
<a href="#popupPhotoPortrait" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true" data-transition="fade"> Photo portrait</a>
<div data-role="popup" id="popupPhotoLandscape" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right"> Close</a> <img src="photo-landscape.jpg" alt="Photo landscape">
</div>
<div data-role="popup" id="popupPhotoLandscape" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right"> Close</a> <img src="photo-portrait.jpg" alt="Photo portrait">
</div>
</div>
</div>
</body>
</html>
下面例子中，该处理程序绑定到popupbeforeposition事件，保证了图像不仅缩放，也重置了当窗口大小（如方向变化）。此代码示例中的高度降低了60，将顶部和底部的30像素的耐受性的考虑。
$( document ).on( "pageinit", function() {
$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});
});
弹窗中的框架
你可能需要一个iframe框架嵌入到一个弹窗中使用第三方插件。在这里，我们将展示一些真实世界的例子：视频和地图中的工作。
<a href="#popupVideo" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true"> Launch video player</a>
<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
<iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298" seamless></iframe>
</div>
当在弹窗内使用iframe框架的时候，设置宽度和高度属性值为0是很重要。这可以防止网页被截断，例如Android平台2.3。请注意，你要设置的属性，因为CSS设置宽度和高度是不足够的。你可以在HTML标记中设置实际的宽度和高度，防止浏览器中禁用了JavaScript和在pageinit事件中使用attr()设定零点值。
其次，结合到popupbeforeposition事件来设置iframe所需的尺寸时，弹出显示或窗口尺寸改变时（如改变方向）。对于iframe的例子在这个页面的自定义功能scale()用于减少iframe适应较小的屏幕。扩大下面查看此函数的代码。
function scale( width, height, padding, border ) {
var scrWidth = $( window ).width() - 30,
scrHeight = $( window ).height() - 30,
ifrPadding = 2 * padding,
ifrBorder = 2 * border,
ifrWidth = width + ifrPadding + ifrBorder,
ifrHeight = height + ifrPadding + ifrBorder,
h, w;
if ( ifrWidth < scrWidth && ifrHeight < scrHeight ) {
w = ifrWidth;
h = ifrHeight;
} else if ( ( ifrWidth / scrWidth ) > ( ifrHeight / scrHeight ) ) {
w = scrWidth;
h = ( scrWidth / ifrWidth ) * ifrHeight;
} else {
h = scrHeight;
w = ( scrHeight / ifrHeight ) * ifrWidth;
}
return {
'width': w - ( ifrPadding + ifrBorder ),
'height': h - ( ifrPadding + ifrBorder )
};
};
注：此功能是没有框架的一部分。复制代码到你的脚本中使用它。当弹出关闭的宽度和高度应重新设置为0。你可以通过结合到popupafterclose事件。
$( document ).on( "pageinit", function() {
$( "#popupVideo iframe" )
.attr( "width", 0 )
.attr( "height", 0 );
$( "#popupVideo" ).on({
popupbeforeposition: function() {
var size = scale( 497, 298, 15, 1 ),
w = size.width,
h = size.height;
$( "#popupVideo iframe" )
.attr( "width", w )
.attr( "height", h );
},
popupafterclose: function() {
$( "#popupVideo iframe" )
.attr( "width", 0 )
.attr( "height", 0 );
}
});
});
地图例子
在下例子中,一个iframe是用于显示谷歌地图API。使用iframe防止问题与控件的地图。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 385px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 385px;
}
.ui-content{
padding:10px 15px 0px 15px;
}
</style>
</head>
<body>
<div data-role="page" style="max-height:390px; min-height:390px;">
<div data-role="content">
<a href="#popupMap" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true">Open Map</a>
<div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<iframe src="map.html" width="480" height="320" seamless></iframe>
</div>
</div>
</div>
</body>
</html>
map.html页面源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map</title>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng( 51.520838, -0.140261 );
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map( document.getElementById( "map_canvas" ), myOptions );
}
</script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#map_canvas {
height: 100%;
}
</style>
</head>
<body οnlοad="initialize()">
<div id="map_canvas"></div>
</body>
</html>
iframe框架的大小设置与视频的例子，是完全一样的。有一个例外，像Android 2.3平台上，你也应该设置包含了地图div的宽度和高度，防止页面打破。在这个例子中，这个div的ID是#map_canvas
这是完整的脚本和链接打开地图弹出:
$( document ).on( "pageinit", function() {
$( "#popupMap iframe" )
.attr( "width", 0 )
.attr( "height", 0 );
$( "#popupMap iframe" ).contents().find( "#map_canvas" )
.css( { "width" : 0, "height" : 0 } );
$( "#popupMap" ).on({
popupbeforeposition: function() {
var size = scale( 480, 320, 0, 1 ),
w = size.width,
h = size.height;
$( "#popupMap iframe" )
.attr( "width", w )
.attr( "height", h );
$( "#popupMap iframe" ).contents().find( "#map_canvas" )
.css( { "width": w, "height" : h } );
},
popupafterclose: function() {
$( "#popupMap iframe" )
.attr( "width", 0 )
.attr( "height", 0 );
$( "#popupMap iframe" ).contents().find( "#map_canvas" )
.css( { "width": 0, "height" : 0 } );
}
});
});
叠加面板
进一步，采取定制。这里是一个例子，一个弹窗，已经被定制，看起来像一个垂直面板，上面有三个迷你按钮：
<a href="#popupPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-role="button">Open panel</a>
<div data-role="popup" id="popupPanel" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0">
<button data-theme="a" data-icon="back" data-mini="true">Back</button>
<button data-theme="a" data-icon="grid" data-mini="true">Menu</button>
<button data-theme="a" data-icon="search" data-mini="true">Search</button>
</div>
下面是使用CSS，风格这个面板,并将它附加到右边缘。注意,# popupPanel-popup是容器div的ID，有JQM框架生成。
#popupPanel-popup {
right: 0 !important;
left: auto !important;
}
#popupPanel {
width: 200px;
border: 1px solid #000;
border-right: none;
background: rgba(0,0,0,.5);
margin: -1px 0;
}
#popupPanel .ui-btn {
margin: 2em 15px;
}
因为弹出集装箱定位是绝对的,你不能把面板全高度与高度:100%;。这小脚本设置高度弹出的实际屏幕的高度。
$( "#popupPanel" ).on({
popupbeforeposition: function() {
var h = $( window ).height();
$( "#popupPanel" ).css( "height", h );
}
});
0
0
已为社区贡献3条内容
所有评论(0)