实训第五天：播放器现目的实现
用的框架：jquery mobile 移动端
技术：
-
图标：九宫格
-
列表：jqm总共3个文件
-
引入css的样式文件，直接使用，用link标签
<link rel="stylesheet" href="css/jquery.mobile.min.css"> -
引入js文件，先引入jquery,在引入jQuery.moblie文件
<script src="js/jquery-1.7.1.min.js"></script> <script src="js/jquery.mobile.min.js"></script>
-
-
对于jqm框架：
<div data-role=”page”>表示一个移动端的页面 <div date-role=”header”>表示一个移动端的头部 <div data-role=”content”>表示一个移动端的中间内容 <div data-role=”footer”>表示一个移动端的底部- 移动的底部：
颜色样式改变：通过为header或者是footer中data- theme=”b”，“c“改变头部或底部的颜色样式。
-
底部的导航：
<div data-role=”navbar”>导航里面套接ul和li组合，就可以形成底部的导航例：
<div data-role="navbar"> <ul> <li><a href="#">首页</a></li> <li><a href="#">商品</a></li> <li><a href="#">设置</a></li> <li><a href="#">我的</a></li> </ul> </div> -
data-position作用在头部和底部，可以固定头部和底部。
-
移动端的中心内容：
扫描二维码关注公众号，回复： 13237707 查看本文章
-
九宫格：
<div class=”ui-grid-a”决定html元素是一排两个 <div class=”ui-block-a”为元素开辟的空间. 遇到class=”ui-block-a”就换行，其余不影响后面的分布 <div class=”ui-grid-b”一行三个元素 <div class=”ui-grid-c”表示一行四个元素 不管是一行三个元素，还是一行四个元素，只要遇到class=”ui-block-a”就换行 -
列表：
布局时常用列表的技术是ul和li
-
播放界面：
<a data-role="button">播放</a> 把独立的按钮形成一个按钮组，就需要一个元素把组合按钮包起来，这个元素就是div 指示div的功能起到组合的作用，data-role=”controlgroup” 现在绑定是竖向，如果横向就实现按钮组 横向就设置 data-type=”horizontal”
-
-
遇到的问题：项目整合的时候，点击的时候不能跳转。
解决：jqm原理，默认head中所有代码只加载一次，不需要加载第二次，但是某些项目中就会有不好的地方。 data-ajax技术
,给a标签做一个data-ajax=false就可以实现跳转。
例：整体代码：
首页：
<html> <head> <link rel="stylesheet" href="css/jquery.mobile.min.css"> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/jquery.mobile.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-theme="b" data-position="fixed"> <a href="#">返回</a> <h3>音乐宝盒</h3> </div> <div data-role="content"> <div class="ui-grid-b"> <div class="ui-block-a"> <center><a href="first.html" data-ajax=false><img src="images1/11.png"/> <p>儿童歌曲</p></a></center> </div> <div class="ui-block-c"> <center><img src="images1/12.png"/> <p>流行歌曲</p></center> </div> <div class="ui-block-b"> <center><img src="images1/13.png"/> <p>影视歌曲</p></center> </div> <div class="ui-block-b"> <img src="images1/14.png"/> </div> </div> </div> <div data-role="footer" data-theme="b" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#">首页</a></li> <li><a href="#">商品</a></li> <li><a href="#">设置</a></li> <li><a href="#">我的</a></li> </ul> </div> </div> </div> </body> </html>效果：
列表界面代码：
<html>
<head>
<link rel="stylesheet" href="css/jquery.mobile.min.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<a href="#">返回</a>
<h3>音乐宝盒</h3>
</div>
<div data-role="content">
<ul data-role="listview">
<li>
<a href="play.html" data-ajax=false><img src="images1/tu1.png"/>
<h3>一分钱</h3>
<p>这是一首精典</p></a>
</li>
<li>
<img src="images1/tu2.png"/>
<h3>二分钱</h3>
<p>这是一首精典</p>
</li>
<li>
<img src="images1/tu2.png"/>
<h3>三分钱</h3>
<p>这是一首精典</p>
</li>
<li>
<img src="images1/tu2.png"/>
<h3>四分钱</h3>
<p>这是一首精典</p>
</li>
<li>
<img src="images1/tu2.png"/>
<h3>五分钱</h3>
<p>这是一首精典</p>
</li>
<li>
<img src="images1/tu2.png"/>
<h3>六分钱</h3>
<p>这是一首精典</p>
</li>
<li>
<img src="images1/tu2.png"/>
<h3>七分钱</h3>
<p>这是一首精典</p>
</li>
<li>
<img src="images1/tu2.png"/>
<h3>八分钱</h3>
<p>这是一首精典</p>
</li>
<li>
<img src="images1/tu2.png"/>
<h3>九分钱</h3>
<p>这是一首精典</p>
</li>
</ul>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">商品</a></li>
<li><a href="#">设置</a></li>
<li><a href="#">我的</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
运行效果：
播放界面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312"/>
<link rel="stylesheet" href="css/jquery.mobile.min.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<a href="#" data-icon="back" data-iconpos="notext">返回</a>
<h2>儿童歌曲</h2>
<a href="#" data-icon="gear" data-iconpos="notext">设置</a>
</div>
<div data-role="content">
<img src="images1/tu1.png" width="100%" height="auto"/>
<h3>一分钱</h3>
<div data-role="controlgroup" data-type="horizontal">
<a data-role="button" onclick="ab()">播放</a>
<a data-role="button" onclick="bc()">暂停</a>
<a data-role="button" onclick="cd()">静音</a>
<a data-role="button" onclick="de()">音量+</a>
<a data-role="button" onclick="ef()">音量-</a>
</div>
<input type="range"/>
<audio src="yifenqian.mp3" id="myaudio" controls="controls"></audio>
<script>
function de(){
myaudio=document.getElementById("myaudio")
console.log(myaudio.volume)
myaudio.volume+=0.1
}
function ef(){
myaudio=document.getElementById("myaudio")
myaudio.volume-=0.1
}
function cd(){
/*取audio的标签*/
myaudio=document.getElementById("myaudio")
/*执行audio的静音属性取反*/
myaudio.muted=!myaudio.muted
}
function bc(){
/*取audio的标签*/
myaudio=document.getElementById("myaudio")
/*执行audio的暂停方法*/
myaudio.pause()
}
function ab(){
/*取audio的标签*/
myaudio=document.getElementById("myaudio")
/*执行audio的播放方法*/
myaudio.play()
}
console.log(document.getElementById("myaudio"))
</script>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">收索</a></li>
<li><a href="#">搜索</a></li>
<li><a href="#">管理</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
运行效果：
