3.jQuery Mobile页面(pages)(1)

本文介绍了如何使用HTML创建基本页面结构,包括页头、内容区和页脚,并提供了一个包含这些元素的示例代码。

page页面是用户可以在设备屏幕上直观看到的内容,我们可以在一个HTML中创建一个或多个页面,下面将会进行实例的讲解。

1.简单页面

我们在<body>标签中,加入一个<div>标签,再给<div>标签添加data-role="page"属性,代码如下:

               <body>

      ...    

<div data-role="page">

      ...    

</div>

     ...    

</body>

通过以上代码,我们就完成了一个page页面的主体框架,而在主体中,我们有可以分为分为“头部、内容和底部”,我们通过再添加<div>标签以及data-role="header",data-role="content"(还可以是role="main"  class="ui-content",效果一样)和data-role="footer"属性,来进行区分。代码如下:

<body>

     ...    

<div data-role="page">

               <div data-role="header">...</div>
                <div data-role="content">...</div>
     	<!—或者是:<div role="main" class="ui-content"> ...</div> -->
                <div data-role="footer">...</div>

</div>

     ...    

</body>

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

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

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

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



示例如下:


代码:

<!DOCTYPE html>

<html>

    <head>

       <meta  charset="UTF-8">

       <meta  name=" viewport "  content="height=device-height,width =device-width" />

       <title>简单页面</title>

       <link  rel="stylesheet"   href="css/jquery.mobile-1.4.5.css"/>

       <script  src="js/jquery.min.js"></script>

       <script  src="js/jquery.mobile-1.4.5.min.js"></script>

    </head>

    <body>

       <div  data-role="page">

           <div  data-role="header">

              <h1>页面头部</h1>

           </div><!-- /header -->

           <div  data-role="content">

              <p>页面内容部分</p>

           </div><!-- /content-->

           <div  data-role="footer">

              <h4>页面底部</h4>

           </div><!-- /footer-->

       </div><!-- /page -->

    </body>

</html>

 

注释:关于meta的viewport属性,不懂的可以参考我的博文:HTML5开发之viewport的使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值