弹窗 data-role=popup

创建一个弹出式窗口,给要弹出的内容 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 onload="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 );
    }
});