学习笔记-0816-jquerymobile前端框架

2016-08-17 本文已影响0人幽谷听泉

jquery mobile前端框架

Query Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

jquery mobile加载

<head>
    <meta charset="utf-8">
    <meta name="viewport" 
    content="width=device-width,initial-scale=1.0,maximum- sacle=1.0,user-scalable=0" />
    <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.js"></script>
    <title></title>
</head>

示例

<body>
  <div data-role="page">

    <div data-role="header">
      <h1>欢迎访问我的主页</h1>
    </div>

     <div data-role="content">
      <p>我是一名移动开发者！</p>
    </div>

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

  </div>
</body>

Paste_Image.png

data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏

在 jQuery Mobile 中添加页面

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">转到页面二</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">转到页面一</a>
  </div>
</div>

可通过data-transition参数设置在页面见跳转过渡

<a href="#anylink" data-transition="slide">滑动到页面二</a>

作业：

1.使用jqueryMobile写三个界面（商品首页、列表页、详情页）单页多应用的

2.使用jqueryMobile写一个用户注册和登陆的页面

上一篇下一篇

猜你喜欢

热点阅读