jQuery Mobile 是一个用来构建跨平台移动web应用程序的新UI框架,具有使用简单的特点。在短短几分钟内,你可以创建出能够在当今可用的近乎所有手机、平板电脑、台式机和电子阅读器设备上运行的优化移动应用程序。

jQuery Mobile具备的一些重要特性:

1.  通用访问;

  2.  跨所有移动平台的统一UI

  3. 简化的标记驱动的开发

  4.  渐进式增强

  5. 响应式设计

  6. 可主体化的设计

  7. 可访问性

基本的模版页面:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Page Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>    
</head>
<body>

<div data-role="page">
    <div data-role="header">
        <h1>Page Header</h1>
    </div>

<div data-role="content">    
        <p>Hello jQuery Mobile!</p>
    </div>

<div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

</body>
</html>

device-width值表示,让内容扩展到屏幕的整个宽度;initial-scale设置了用来查看Web页面的初始缩放百分比或者缩放因数。

jQuery Mobile 的css会为所有的A级和B级浏览器应用风格的优化,可以根据需要自定义或添加自己的CSS

jQuery 库是jQuery Mobile 的一个核心依赖,如果app需要更多的动态行为,则需要在移动页面中使用jQuery的核心API;

jQuery Mobile Javascript库必须在jQuery和任何可能存在的自定义脚本之后声明。

data-role="header"是页眉或者标题栏,该属性是可选的;

data-role="content"是内容主体的包装容器,该属性是可选的。

data-role="footer"包含页脚栏,该属性是可选的。


jQuery Moblie 页面模版(基础)相关推荐

  1. Web前端基础---JQuery的页面加载+选择器+电子时钟案例

    jQuery jQuery的页面加载 <!DOCTYPE html> <html><head><meta charset="UTF-8"& ...

  2. jQuery框架学习第七天:jQuery动画–jQuery让页面动起来!

    jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...

  3. 【Java从0到架构师】SpringBoot - 页面模版_Thymeleaf

    SpringBoot - 页面模版 集成 JSP 集成 Thymeleaf Thymeleaf 基本语法 注释 - 3 种 字面量 - ${} [[ ${} ]] 局部变量 - th:with.三目运 ...

  4. 如何使用jQuery刷新页面?

    如何使用jQuery刷新页面? #1楼 如果当前页面是通过POST请求加载的,则可能要使用 window.location = window.location.pathname; 代替 window. ...

  5. 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  6. [转]用 jQuery 实现页面滚动(Scroll)效果的完美方法

    转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...

  7. 微信公众号新功能-原创声明、赞赏功能、评论管理、页面模版

    原文:http://www.shichangbu.com/portal.php?mod=view&aid=25931 公众号如何申请这些功能?                          ...

  8. jQuery Mobile 笔记(1)- jQuery Mobile页面结构

    jQuery Mobile页面解构 jQuery Mobile 的"页面"结构不同于传统的html页面,这样做是为了优化single page application的用户体验. ...

  9. java怎么往右浮动_[Java教程]jQuery实现页面滚动时智能浮动定位

    [Java教程]jQuery实现页面滚动时智能浮动定位 0 2016-08-04 18:00:08 jQuery实现页面滚动时层智能浮动定位_前端开发 * { margin: 0; padding: ...

最新文章

  1. 漫谈时序设计(3)走进时序约束的大门!
  2. doe报告模板_技术漫谈|关于制剂研发过程中的实验设计(DOE)误区讨论
  3. Python 实例方法、类方法、静态方法的区别与作用
  4. axure文件如何加密_怎么样给PDF加密?PDF文件如何加密?
  5. 五种I/O 模式——阻塞(默认IO模式),非阻塞(常用语管道),I/O多路复用(IO多路复用的应用场景),信号I/O,异步I/O
  6. 新疆大学c语言期末考试题库,2016年新疆师范大学教育科学学院C语言程序设计考研复试题库...
  7. 服务器维修解锁,云服务器解锁
  8. android stagefright
  9. 【python】自动发送微信消息或文件
  10. HDU 5857 Median (推导)
  11. matlab中使用ode45来解热水冷却问题一阶微分方程
  12. 如何申请注册微软邮箱(支持海外apple ID注册)亲测
  13. python实现对遥感影像经纬度获取并实现海陆分离
  14. 使用CSS美化shiny app效果
  15. POI DataValidation 删除数据有效性验证
  16. Java stream().sorted()实现排序(升序、降序、多字段排序)
  17. Apk 拆包替换文件
  18. Learning AV Foundation(三)AVAudioRecorder
  19. FreeBSD网站平台建设全过程(一、系统安装)
  20. Windows Phone 7与Android和iPhone的比较

热门文章

  1. oenwrt 进不了bios_为什么进不bios_进不了bios怎么解决?
  2. Webstorm React Nodejs 整合
  3. 十大WordPress安全设置技巧
  4. avue里面的select怎么设置默认值_mysql大量的waiting for table level lock怎么办
  5. 论文首页下划线怎么对齐_毕业论文标准格式要求是什么样的?
  6. darknet_ros消息在其它包中的订阅
  7. 会话技术(Cookie Session)
  8. Android Studio 常用快捷键(超实用!!!)
  9. Ubuntu 18.04 美化
  10. 数据库之MySQL补充