当前位置： div+css >

手机端设置栏目显示和隐藏

2020-05-17 ⁄ 文章标签： 插件 ⁄ 浏览次数：次

我们讲解下在手机端怎么插入视频，文章介绍的是使用弹出页面播放视频，设置视频的相关属性，宽高，是否自动播放等

HTML5教程

我们看看页面效果

手机端播放视频

<!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>

属性设置，点击展开子栏目的效果

<!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/517/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/517/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/517/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/517/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page" id="page">
    <div data-role="header">
        <h1>折叠嵌套</h1>
    </div>
    <div data-role="collapsible" data-iconpos="right">
        <h1>折叠按钮</h1>
        <p>折叠内容</p>
    </div>
</div>
</body>
</html>

二级标题

<!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/517/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/517/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/517/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
$( document ).on( "mobileinit", function() {
    $.mobile.collapsible.prototype.options.initSelector = ".mycollapsible";
});
</script>
<script src="//freemuban.com/js/517/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page" id="page">
    <div data-role="header">
        <h1>设置选项</h1>
    </div>
    <div data-role="collapsible" class="mycollapsible">
        <h1>折叠按钮</h1>
        <p>折叠内容</p>
    </div>
    <div data-role="collapsible">
        <h1>折叠按钮</h1>
        <p>折叠内容</p>
    </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/517/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/517/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/517/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
$( document ).on( "mobileinit", function() {
    $.mobile.collapsible.prototype.options.heading = ".header";
});
</script>
<script src="//freemuban.com/js/517/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page" id="page">
    <div data-role="header">
        <h1>设置选项</h1>
    </div>
    <div data-role="collapsible" class="mycollapsible">
        <h1>一级标题</h1>
        <h2 class="header">二级标题</h2>
        <p>折叠内容</p>
    </div>
</div>
</body>
</html>

设置事件，点击栏目先弹出确认框，然后在显示子栏目

<!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/517/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/517/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/517/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/517/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(e){
    $(document).delegate(".mycollapsible", "expand", function(){
        alert('内容被展开');
    });
    $(document).delegate(".mycollapsible", "collapse", function(){
        alert('内容被折叠');
    });
});
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page" id="page">
    <div data-role="header">
        <h1>设置事件</h1>
    </div>
    <div data-role="collapsible" class="mycollapsible">
        <h1>折叠按钮</h1>
        <p>折叠内容</p>
    </div>
</div>
</body>
</html>

设计折叠组

<!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/517/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/517/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/517/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/517/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page" id="page">
    <div data-role="header">
        <h1>网址导航</h1>
    </div>
    <div data-role="collapsible-set">
        <div data-role="collapsible" data-collapsed="false">
            <h1>视频</h1>
            <p><a href="#">优酷网</a></p>
            <p><a href="#">奇艺高清</a></p>
            <p><a href="#">搜狐视频</a></p>
        </div>
        <div data-role="collapsible">
            <h1>新闻</h1>
            <p><a href="#">CNTV</a></p>
            <p><a href="#">环球网</a></p>
            <p><a href="#">路透中文网</a></p>
        </div>
        <div data-role="collapsible">
            <h1>邮箱</h1>
            <p><a href="#">163邮箱</a></p>
            <p><a href="#">126邮箱</a></p>
            <p><a href="#">阿里云邮箱</a></p>
        </div>
        <div data-role="collapsible">
            <h1>网购</h1>
            <p><a href="#">淘宝网</a></p>
            <p><a href="#">京东商城</a></p>
            <p><a href="#">亚马逊</a></p>
        </div>        
    </div>
</div>
</body>
</html>

你可能还感兴趣···

手机端设置栏目显示和隐藏

手机端设置栏目显示和隐藏

你可能还感兴趣···

人气下载

热门标签