JqueryMobile- 搭建主模板

  最近公司要开发手机端的,可是我没学过安卓,然后用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>
复制代码

 

posted @   春天又来了  阅读(1972)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2014-10-29 ASP.NET- 无刷新上传使用jQuery插件之ajaxFileUpload
点击右上角即可分享
微信分享提示