我们继续讲解jquery操作事件中，手机版里面点击按钮，弹出播放视频窗口。定义显示位置，点击图片可以实现按照代码要求定义到显示的位置。
1.视频效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511//jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511//jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511//jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511//jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>使用弹出页面</h1>
</div>
<div data-role="content">
<a href="#popupVideo" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">播放视频</a>
<div data-role="popup" id="popupVideo" data-overlay-theme="b" data-theme="a" class="ui-content">
<video controls autoplay loop >
<source src="//freemuban.com/js/511/video.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511//jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511//jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511//jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511//jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
$( document ).on( "pagecreate", function() {
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 )
};
};
$( "video" )
.attr( "width", 0 )
.attr( "height", "auto" );
$( "video" )
.css( { "width" : 0, "height" : 0 } );
$( "#popupVideo" ).on({
popupbeforeposition: function() {
var size = scale( 480, 320, 0, 1 ),
w = size.width,
h = size.height;
$( "#popupVideo video" )
.attr( "width", w )
.attr( "height", h );
$( "#popupVideo video" )
.css( { "width": w, "height" : h } );
},
popupafterclose: function() {
$( "#popupVideo video" )
.attr( "width", 0 )
.attr( "height", 0 );
$( "#popupVideo video" )
.css( { "width": 0, "height" : 0 } );
}
});
});
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>使用弹出页面</h1>
</div>
<div data-role="content">
<a href="#popupVideo" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">播放视频</a>
<div data-role="popup" id="popupVideo" data-overlay-theme="b" data-theme="a" class="ui-content">
<video controls autoplay loop >
<source src="//freemuban.com/js/511/video.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</body>
</html>
2.定义显示位置
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511//jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511//jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511//jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511//jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css">
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>定制弹出页面</h1>
</div>
<div data-role="content">
<a href="#window" data-rel="popup" data-position-to="window" data-role="button">定位到屏幕中央</a>
<a href="#origin" data-rel="popup" data-position-to="origin" data-role="button">定位到当前按钮上</a>
<a href="#selector" data-rel="popup" data-position-to="#pic" data-role="button">定位到指定对象上</a>
<div class="ui-content" id="window" data-role="popup" data-theme="a">
<p>显示在屏幕中央</p>
</div>
<div class="ui-content" id="origin" data-role="popup" data-theme="a">
<p>显示当前按钮上面</p>
</div>
<div class="ui-content" id="selector" data-role="popup" data-theme="a">
<p>显示在指定图片上面</p>
</div>
<img src="//freemuban.com/js/511/1.jpg" width="50%" id="pic" />
</div>
</div>
</body>
</html>
