jQuery Mobile 前端笔记一

最新推荐文章于 2024-04-10 02:02:02 发布

wuyanwen888

最新推荐文章于 2024-04-10 02:02:02 发布

阅读量610

点赞数

分类专栏： jquery mobile

本文链接：https://blog.csdn.net/wuyanwen888/article/details/10488577

版权

jquery mobile 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

http://www.lampweb.org/jquerymobile/1/

<!DOCTYPE html> 
<html> 
	<head> 
	<meta charset="utf-8">
	<title>Page Template</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>	
</head> 
<body> 

<div data-role="page">
	<div data-role="header">
		<h1>Page Header</h1>
	</div>

	<div data-role="content">	
		<p>Hello jQuery Mobile!</p>
	</div>

	<div data-role="footer" data-position="fixed">
		<h4>Page Footer</h4>
	</div>
</div>

</body>
</html>

jQueryMobile将页面所有的链接跳转都视作Ajax调用，这样可以充分利用CSS的过渡效果，当你想要链接到你自己的web程序之外的某些链接时，你可以这样编写你的链接代码：

<a href="http://www.lampweb.org" rel="external">lampweb.org</a>

有时列表data-role="listview"并不太好看，这时可以加上　 <ul data-role="listview" data-inset="true"><!--这里使用的data-inset属性--> 
有时候我们需要在一个很长的列表中添加一行用于区分的数据，这时候我们就可以使用data-role="list-divider"，添加到其中的某一个li上，这样就能实现区分的效果。
有时需要在foot区加入一个导航
<div data-role="footer" data-position="fixed">
   <div data-role="navbar">
      <ul>
         <li><a href="#nav1" class="ui-btn-active">Royals</a></li>
         <li><a href="#nav2">Leaders</a></li>
      </ul>
   </div><!-- /navbar -->
</div><!-- /footer -->
由于对话框在jQueryMobile里面其实和其他page没有任何区别，因此你可以在对话框里添加任何类型的HTML代码，当然你也可以在同一个html文件里创建两个page，一个是主界面：
<div data-role="page">
   <div data-role="header">
      <h1>Dialog Box</h1>
   </div><!-- /header -->
<div data-role="content">   
   <a href="#dialogPopUp" data-rel="dialog" data-role="button">Open dialog</a> 
</div><!-- /content -->
<div data-role="footer">
   <h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
　　
另一个是对话框（上面的HREF属性便指向这个对话框page）：
<div data-role="page" id="dialogPopUp">
   <div data-role="header">
      <h1>Dialog Title</h1>
   </div><!-- /header -->
   <div data-role="content">   
      This is a dialog box      
   </div><!-- /content -->
<div data-role="footer">
<h4>Additional Footer information</h4>
</div><!-- /footer -->
</div><!-- /page -->
　　
要注意以上代码中footer是可选的，但是你必须包括header，因为如果没有header，将无法显示自动生成的对话框关闭按钮。

 你还可以为列表添加小气泡来展示一些附加数据
<ul data-role="listview" style="margin-top: 0;">
   <li><a href="#nav1">Henry VIII <span class="ui-li-count">Reign 37 Years</span></a></li>
   <li><a href="#nav1">George V <span class="ui-li-count">Reign 25 Years</span></a></li>
   <li><a href="#nav1">Prince of Wales <span class="ui-li-count">N/A</span></a></li>
   <li><a href="#nav1">Elizabeth I <span class="ui-li-count">Reign 44 Years</span></a></li>
   <li><a href="#nav1">Elizabeth II<span class="ui-li-count">Reign since 1952</span></a></li>
</ul>

   <li><a href="#nav1">Henry VIII <span class="ui-li-count">Reign 37 Years</span></a></li>
   <li><a href="#nav1">George V <span class="ui-li-count">Reign 25 Years</span></a></li>
   <li><a href="#nav1">Prince of Wales <span class="ui-li-count">N/A</span></a></li>
   <li><a href="#nav1">Elizabeth I <span class="ui-li-count">Reign 44 Years</span></a></li>
   <li><a href="#nav1">Elizabeth II<span class="ui-li-count">Reign since 1952</span></a></li>
</ul>
<span class="ui-li-count">Reign 37 Years</span>

下面是一个更加复杂的例子，列表中包含了链接，图片，文本：
<ul data-role="listview" style="margin-top: 0;">
   <li>
      <img src="http://img.freebase.com/api/trans/image_thumb/en/henry_viii_of_england?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64" />
      <h3><a href="index.html">Henry VIII</a></h3>
      <p>Reign 37 Years</p>
      <a href="#home">Details</a>
   </li>
   <li>
      <img src="http://www.iwise.com/authorIcons/15/King_George%20V_64x64.png" />
      <h3><a href="index.html">George V</a></h3>
<p>Reign 25 Years</p>
      <a href="#home">Details</a>
   </li>
   <li>
      <img src="http://img.freebase.com/api/trans/image_thumb/en/prince_of_wales_secondary_school?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64" />
      <h3><a href="index.html">Prince of Wales</a></h3>
      <p>Reign N/A</p>
      <a href="#home">Details</a>
   </li>
   <li>
   <img src="http://www.iwise.com/authorIcons/13846/Elizabeth%20I%20of%20England_64x64.png" />
      <h3><a href="index.html">Elizabeth I</a></h3>
      <p>Reign 44 Years</p>
      <a href="#home">Details</a>
   </li>
   <li>
      <img src="http://www.iwise.com/authorIcons/9098/Elizabeth%20II_64x64.png" />
      <h3><a href="index.html">Elizabeth II</a></h3>
      <p>Reign Since 1952</p>
      <a href="#home">Details</a>
   </li>
</ul>