jquery mobile测试例子
来源：互联网 发布：c 编程思想 编辑：程序博客网 时间：2024/04/30 05:13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<script src="jquery.js"></script>
<script src="jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one" >
<div data-role="header">
<h1>Multi-page</h1>
</div><!-- /header -->
<div data-role="content" >
<h2>Page One</h2>
<p><a href="#two" data-role="button" data-transition="slide">加载page "two"</a></p>
<p><a href="#three" data-role="button" data-transition="slide">加载page "three"</a></p>
<p><a href="#four" data-role="button" data-transition="slide">加载page "four"</a></p>
<p><a href="#five" data-role="button" data-transition="slide">加载page "five"</a></p>
</div><!-- /content -->
<div data-role="footer" data-theme="d" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Two</h1>
<a href="#one" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>Hybrid app</h2>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page two -->
<!-- Start of three page: #three -->
<div data-role="page" id="three" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>three</h1>
<a href="#one" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>异步加载网络数据</h2>
<a href="javascript:void(0)" onclick="getdata1()" data-role="button" data-mini="true">Ajax get Data</a>
<ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="f">
<li data-role="list-divider">时间</li>
<li id="bt1">请求开始时间：</li>
<li id="et1">请求结束时间：</li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider" id="title1"></li>
<div id="content1"></div>
</ul>
</div><!-- /content -->
<script>
function getdata1(){
var d = new Date().getTime();
document.getElementById("bt1").innerHTML = "请求开始时间："+d;
$.getJSON("http://te.3g2win.com/case/?jsoncallback=?",function(data){
var e = new Date().getTime();
document.getElementById("et1").innerHTML = "请求结束时间："+e;
document.getElementById("title1").innerHTML = data.title;
document.getElementById("content1").innerHTML = data.content;
});
}
</script>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page three -->
<!-- Start of four page: #four -->
<div data-role="page" id="four" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>four</h1>
<a href="#one" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>异步加载网络数据</h2>
<a href="javascript:void(0)" onclick="getdata2()" data-role="button" data-mini="true">Ajax get Data</a>
<ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="f">
<li data-role="list-divider">时间</li>
<li id="bt2">请求开始时间：</li>
<li id="et2">请求结束时间：</li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider" id="title2"></li>
<div id="content2"></div>
</ul>
</div><!-- /content -->
<script>
function getdata2(){
var d = new Date().getTime();
document.getElementById("bt2").innerHTML = "请求开始时间："+d;
$.getJSON("http://te.3g2win.com/case/?jsoncallback=?",function(data){
var e = new Date().getTime();
document.getElementById("et2").innerHTML = "请求结束时间："+e;
document.getElementById("title2").innerHTML = data.title;
document.getElementById("content2").innerHTML = data.content;
});
}
</script>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page four -->
<!-- Start of five page: #five -->
<div data-role="page" id="five" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>five</h1>
<a href="#one" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>异步加载网络数据</h2>
<a href="javascript:void(0)" onclick="getdata3()" data-role="button" data-mini="true">Ajax get Data</a>
<ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="f">
<li data-role="list-divider">时间</li>
<li id="bt3">请求开始时间：</li>
<li id="et3">请求结束时间：</li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider" id="title3"></li>
<div id="content3"></div>
</ul>
</div><!-- /content -->
<script>
function getdata3(){
var d = new Date().getTime();
document.getElementById("bt3").innerHTML = "请求开始时间："+d;
$.getJSON("http://te.3g2win.com/case/?jsoncallback=?",function(data){
var e = new Date().getTime();
document.getElementById("et3").innerHTML = "请求结束时间："+e;
document.getElementById("title3").innerHTML = data.title;
document.getElementById("content3").innerHTML = data.content;
});
}
</script>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page five -->
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<script src="jquery.js"></script>
<script src="jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one" >
<div data-role="header">
<h1>Multi-page</h1>
</div><!-- /header -->
<div data-role="content" >
<h2>Page One</h2>
<p><a href="#two" data-role="button" data-transition="slide">加载page "two"</a></p>
<p><a href="#three" data-role="button" data-transition="slide">加载page "three"</a></p>
<p><a href="#four" data-role="button" data-transition="slide">加载page "four"</a></p>
<p><a href="#five" data-role="button" data-transition="slide">加载page "five"</a></p>
</div><!-- /content -->
<div data-role="footer" data-theme="d" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Two</h1>
<a href="#one" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>Hybrid app</h2>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page two -->
<!-- Start of three page: #three -->
<div data-role="page" id="three" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>three</h1>
<a href="#one" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>异步加载网络数据</h2>
<a href="javascript:void(0)" onclick="getdata1()" data-role="button" data-mini="true">Ajax get Data</a>
<ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="f">
<li data-role="list-divider">时间</li>
<li id="bt1">请求开始时间：</li>
<li id="et1">请求结束时间：</li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider" id="title1"></li>
<div id="content1"></div>
</ul>
</div><!-- /content -->
<script>
function getdata1(){
var d = new Date().getTime();
document.getElementById("bt1").innerHTML = "请求开始时间："+d;
$.getJSON("http://te.3g2win.com/case/?jsoncallback=?",function(data){
var e = new Date().getTime();
document.getElementById("et1").innerHTML = "请求结束时间："+e;
document.getElementById("title1").innerHTML = data.title;
document.getElementById("content1").innerHTML = data.content;
});
}
</script>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page three -->
<!-- Start of four page: #four -->
<div data-role="page" id="four" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>four</h1>
<a href="#one" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>异步加载网络数据</h2>
<a href="javascript:void(0)" onclick="getdata2()" data-role="button" data-mini="true">Ajax get Data</a>
<ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="f">
<li data-role="list-divider">时间</li>
<li id="bt2">请求开始时间：</li>
<li id="et2">请求结束时间：</li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider" id="title2"></li>
<div id="content2"></div>
</ul>
</div><!-- /content -->
<script>
function getdata2(){
var d = new Date().getTime();
document.getElementById("bt2").innerHTML = "请求开始时间："+d;
$.getJSON("http://te.3g2win.com/case/?jsoncallback=?",function(data){
var e = new Date().getTime();
document.getElementById("et2").innerHTML = "请求结束时间："+e;
document.getElementById("title2").innerHTML = data.title;
document.getElementById("content2").innerHTML = data.content;
});
}
</script>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page four -->
<!-- Start of five page: #five -->
<div data-role="page" id="five" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>five</h1>
<a href="#one" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>异步加载网络数据</h2>
<a href="javascript:void(0)" onclick="getdata3()" data-role="button" data-mini="true">Ajax get Data</a>
<ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="f">
<li data-role="list-divider">时间</li>
<li id="bt3">请求开始时间：</li>
<li id="et3">请求结束时间：</li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider" id="title3"></li>
<div id="content3"></div>
</ul>
</div><!-- /content -->
<script>
function getdata3(){
var d = new Date().getTime();
document.getElementById("bt3").innerHTML = "请求开始时间："+d;
$.getJSON("http://te.3g2win.com/case/?jsoncallback=?",function(data){
var e = new Date().getTime();
document.getElementById("et3").innerHTML = "请求结束时间："+e;
document.getElementById("title3").innerHTML = data.title;
document.getElementById("content3").innerHTML = data.content;
});
}
</script>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page five -->
</body>
</html>
- jquery mobile测试例子
- Jquery Mobile + GPONEGAP 的例子
- jquery mobile 的事件测试
- Jquery mobile基本元素总结(一个例子)
- jQuery Mobile写移动端网页例子
- Jquery mobile各种折叠块及图表的例子
- jQuery Mobile
- jQuery Mobile
- JQUERY MOBILE
- jQuery Mobile
- jquery mobile
- jQuery Mobile
- jQuery Mobile
- jquery mobile
- jQuery Mobile
- jQuery Mobile
- JQuery Mobile
- jquery mobile
- discuz DIY模块添加自定义字段
- android makefile 文件中使用shell命令
- js ajax 访问 axis2 webservice
- Android之ListView异步加载网络图片(优化缓存机制)
- Qt Designer设计 UI 文件并调用
- jquery mobile测试例子
- 20岁到30岁，我拿十年做什么
- ubuntu——get apt to use a mirror close to me, or choose a faster mirror
- iOS 7设计备忘单
- hdu 3496
- HDU 1116 并查集
- C语言深度解剖读书笔记(2.字符的技巧)
- Css hack
- Flash图表控件FusionCharts如何自定义图表的工具提示
