JqueryMobile- 搭建主模板

最新推荐文章于 2017-03-05 16:38:00 发布

转载最新推荐文章于 2017-03-05 16:38:00 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cxeye/p/4919660.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍如何使用HTML5结合JQuery Mobile快速搭建移动端网页应用的基本框架。通过设置data-role属性来定义页面头部、主要内容区域及底部，实现了一个简单的移动端网页布局。

　　最近公司要开发手机端的，可是我没学过安卓，然后用HTML5+JQUERYMOBILE也可以做这些手机端的程序，做成个网页，发到网上，免强也行，于是开始了我JQUERYMOBILE的学习。

　　先放一下主模板，在建三个DIV，在data-role属性里依次放header,content,footer，于是主模板就有了，很是EASY！

　　代码贴下，备注：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="../assets/lib/mobile/jquery.mobile-1.4.2.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <!--data-role属性就是JQM中控件的概念-->
    <div data-role="page">
        <div data-role="header" data-position="fixed">
            <h1>这是标题头</h1>
        </div>
        <div data-role="content">
            <a href="02-page2.html" data-transition="slide">Page2</a> <a href="03-page3.html"
                data-rel="dialog">Page3</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h4>
                Copyright &copy; chunxiao.cn</h4>
        </div>
    </div>
</body>
</html>
<script src="../assets/lib/jquery/jquery-1.11.0.js" type="text/javascript"></script>
<script src="../assets/lib/mobile/jquery.mobile-1.4.2.js" type="text/javascript"></script>

转载于:https://www.cnblogs.com/cxeye/p/4919660.html