jQuery Mobile 页面

一、使用 jQuery Mobile 入门

    提示:尽管 jQuery Mobile 适用于所有移动设备,它在台式计算机上仍然可能存在兼容性问题(由于有限的 CSS3 支持)。

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>HEADER</h1>
        </div>
        
        <div data-role="content">
            <p> jQuery Mobile 入门</p>
        </div>
        
        <div data-role="footer">
            <h4>FOOTER</h4><!--这里必需放h4不能放其他-->
        </div>
    </div>
</body>
</html>

   注意要加上视口 

  解释:

    data-role="page" 是显示在浏览器中的页面

    data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮)

    data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等

    data-role="footer" 创建页面底部的工具栏

  在这些容器中,您可以添加任意 HTML 元素 - 段落、图像、标题、列表等等。

  提示:HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>HEADER</h1>
        </div>
        
        <div data-role="content">
            <p> jQuery Mobile 入门</p>
        </div>
        
        <div data-role="footer" data-position="fixed"><!--加上该属性data-position="fixed"就放在了页面的底部-->
            <h4>FOOTER</h4><!--这里必需放h4不能放其他-->
        </div>
    </div>
</body>
</html>

  jQuery Mobile的工作原理:

  jQuery Mobile 页面_第1张图片

 

 

 

 

二、页面之间的跳转

  在 jQuery Mobile,您可以在单一 HTML 文件中创建多个页面。并通过唯一的 id 来分隔每张页面,并使用 href 属性来连接彼此:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>HEADER</h1>
        </div>
        
        <div data-role="content">
            <p><a href="#pagetwo">页面一</a></p>
        </div>
        
        <div data-role="footer">
            <h1>FOOTER</h1>
        </div>
    </div>
    
    
    <div data-role="page" id="pagetwo">
        <div data-role="header">
            <h1>HEADER</h1>
        </div>
        
        <div data-role="content">
            <p><a href="#pageone">页面二</a></p>
        </div>
        
        <div data-role="footer">
            <h1>FOOTER</h1>
        </div>
    </div>
</body>
</html>

  包含大量内容的 web 应用程序会影响加载时间(比如文本、链接、图像和脚本等等)。如果您不希望在内部链接页面,请使用外部文件:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>HEADER</h1>
        </div>
        
        <div data-role="content">
            <p><a href="index.html">页面一</a></p>
        </div>
        
        <div data-role="footer">
            <h1>FOOTER</h1>
        </div>
    </div>
</body>
</html>

 

  这样子直接链接外部的页面是不行的  需要在a标签中加上 data-ajax="false"属性           因为他是是默认通过 ajax 切换页面的     默认不写这个属性是true  所以跳转不了外部的页面

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>HEADER</h1>
        </div>
        
        <div data-role="content">
            <p><a href="index.html" data-ajax="false">页面一</a></p>
        </div>
        
        <div data-role="footer">
            <h1>FOOTER</h1>
        </div>
    </div>
</body>
</html>

 

 

 

 

 

 

三、将页面用作对话框

  对话框是用来显示信息或请求输入的视窗类型。

  如需在用户点击(轻触)链接时创建一个对话框,请向该链接添加 data-rel="dialog":

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>HEADER</h1>
        </div>
        
        <div data-role="content">
            <p><a href="#pagetwo" data-rel="dialog" data-transition="pop">跳转到页面二</a></p>
        </div>
        
        <div data-role="footer">
            <h1>FOOTER</h1>
        </div>
    </div>
    
    
    <div data-role="page" id="pagetwo">
          <div data-role="header">
            <h1>我是一个对话框!</h1>
          </div>

      <div data-role="content">
        <p>对话框与普通页面不同,它显示在当前页面的顶端。它不会横跨整个页面宽度。对话框页眉中的图标 "X" 可关闭对话框。</p>
        <a href="#pageone">转到页面一</a>
      </div>

      <div data-role="footer">
          <h1>页脚文本</h1>
      </div>
</div> 
</body>
</html>

 

   data-transition  是弹出对话框的效果  属性可选值:pop(默认), fade,flip,turn,flow,slidefade,slide,slideup,slidedown,none

 

你可能感兴趣的:(jquery,mobile)