首页 > 代码库 > jquerymobile
jquerymobile
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://www.mamicode.com/ui/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet"
href="http://www.mamicode.com/ui/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="http://www.mamicode.com/ui/jquery.mobile-1.4.5/js/jquery.js"></script>
<script src="http://www.mamicode.com/ui/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://www.mamicode.com/ui/main/css/style.css" />
<script type="text/javascript"
src="http://www.mamicode.com/ui/main/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function getDown() {
var gundong = document.getElementsByClassName("gundong");
var L = gundong.length;
var show = 1;
for ( var i = 0; i < L; i++) {
if (gundong[i].style.display == ‘block‘) {
show = i;
break;
}
}
if (show + 2 < L) {
gundong[show].style.display = ‘none‘;
gundong[show + 2].style.display = ‘block‘;
}
}
function getUp() {
var gundong = document.getElementsByClassName("gundong");
var L = gundong.length;
var show = 1;
for ( var i = 0; i < L; i++) {
if (gundong[i].style.display == ‘block‘) {
show = i;
break;
}
}
if (show - 1 >= 0 && show + 2 <= L) {
gundong[show - 1].style.display = ‘block‘;
gundong[show + 1].style.display = ‘none‘;
}
}
</script>
<style type="text/css">
ul {
float: left;
margin-right: 5px;
text-align: center;
}
li {
float: left;
margin-right: 5px;
text-align: center;
}
a {
width: 80px;
}
#q {
position: fixed;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<div data-role="controlgroup" data-type="horizontal" style="width: 100%;">
<ul style="width: 100%;">
<li><input type=‘button‘ value="http://www.mamicode.com/<"></li>
<li class="gundong" id="liudong" style="display: block"><a
href="http://www.mamicode.com/#pageone" data-role="button">转转转转</a></li>
<li class="gundong" id="liudong" style="display: block"><a
href="http://www.mamicode.com/#" data-role="button">播转转转</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="http://www.mamicode.com/#" data-role="button">到转转转</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="http://www.mamicode.com/#" data-role="button">新转转转</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="http://www.mamicode.com/#" data-role="button">浪</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="http://www.mamicode.com/#" data-role="button">微</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="http://www.mamicode.com/#" data-role="button">博</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="http://www.mamicode.com/#" data-role="button">转播到新浪微博</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="http://www.mamicode.com/#" data-role="button">转播到新浪微博</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="http://www.mamicode.com/#" data-role="button">转播到新浪微博</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="http://www.mamicode.com/#" data-role="button">转播到新浪微博</a></li>
<li><input type=‘button‘ value="http://www.mamicode.com/>"></li>
</ul>
</div>
</div>
</div>
<div data-role="content">
<p>这些按钮仅供演示，无任何效果。</p>
</div>
<div data-role="footer">
<h1>我的页脚</h1>
</div>
</div>
</body>
</html>
jquerymobile