jQuery Mobile 教程 (1)
移动互联网是块诱人的大蛋糕,在手机屏上,到底是C/S横扫一切,还是B/S力争一席之地?我相信,B/S还是很有希望的。在找移动Web App开发的资料,发现了jQuery Mobile ,对它的设计理念是赞同的,因此简单的了解一下。
jQuery Mobile 简介
项目目标——跨平台和跨设备(Seriously cross-platform & cross-device)
这个javascript 类库是针对手机浏览器推出的 Javascript 库,程序员能够使用一套相同的语法和库来适配主流移动设备的浏览器,比如:iPhone, Android, BlackBerry OS6.0 等手机内置的浏览器,更简单的说法就是程序员写一个 HTML + CSS + Javascript 的网页在不同的终端浏览器上获得的效果基本一致,运算结果和效率仅仅跟 CPU 速度和浏览器的渲染速度相关。
这个mobile项目在UI的设计上专门为触摸屏幕做了优化(Touch-optimized layouts & UI widgets),看看下面的图片:
同样的,秉承jQuery UI的优良传统,jQuery Mobile 也是可以定制主题的(Themable designs: Bigger and better),据官方文档(we added support for more CSS3 properties like text-shadow
, box-shadow
, and gradients.)
jQuery Mobile Hello World!
不脱俗,先从hello world 开始
Hello jQuery Mobile!
Hello world, jQuery Mobile!.
Page Footer
效果如下:
首先,需要引用jquery&& jquery mobile
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
然后,在body中插入内容块:
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
data-role="page“代表这个div是一个Page,在一个屏幕中只会显示一个page;
header是标题,content是内容块,footer是页脚
如果一个html中有多个Page,会怎么显示呢?
我们来看下面的代码
<!-- 第一个页面 --><br><div id="first"><br><br> <div><br> <h1>第一个页面</h1></div><!-- /header --><br><br> <div> <br> <p>Hello,我是第一个页面</p> <br> <p>进入 <a href="#second">第二个页面</a></p> </div><!-- /content --><br><br> <div><br> <h4>第一个页面的 Footer</h4></div><!-- /header --></div><!-- /page --><br><br><br><!-- Start of second page --><br><div id="second"><br><br> <div><br> <h1>第二个页面</h1></div><!-- /header --><br><br> <div> <br> <p>我是第二个页面.</p> <br> <p><a href="#first">返回第一个页面</a></p> </div><!-- /content --><br><br> <div><br> <h4>第二个页面的 Footer</h4></div><!-- /header --></div><!-- /page -->
我们来看结果:
点击链接
- 如何在Python中扩展LSTM网络的数据
- 使用Keras的Python深度学习模型的学习率方案
- 全球电脑手机无一幸免,英特尔CPU“漏洞事件”到底多严重?
- 评估Keras深度学习模型的性能
- Python机器学习的练习二:多元线性回归
- 熔断器 Hystrix 源码解析 —— 命令合并执行
- Python机器学习的练习一:简单线性回归
- Dubbo源码解析 —— zookeeper连接
- 浣熊检测器实例, 如何用TensorFlow的Object Detector API来训练你的物体检测器
- 用Keras进行深度学习模式的正则化方法:Dropout
- 用深度学习硬件的闲置时间,来挖比特币
- 深度学习:如何理解tensorflow文本蕴含的原理
- 重磅!腾讯与科大讯飞技术共创,Google ProtoBuf进入TARS家族!
- 深度学习与R语言
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [源码分析]从"UDF不应有状态" 切入来剖析Flink SQL代码生成 (修订版)
- [白话解析] 通俗解析集成学习之GBDT
- [源码解析]为什么mapPartition比map更高效
- [记录点滴]Redis实现简单消息队列
- [源码解析] Flink的groupBy和reduce究竟做了什么
- [记录点滴]在Ionic和Android中上传Blob图片
- [源码解析] GroupReduce,GroupCombine 和 Flink SQL group by
- [记录点滴] 小心 Hadoop Speculative 调度策略
- [白话解析] 通过实例来梳理概念 :准确率 (Accuracy)、精准率(Precision)、召回率(Recall)和F值(F-Measure)
- [记录点滴] OpenResty中Redis操作总结
- [源码解析] 从TimeoutException看Flink的心跳机制
- [记录点滴] 一个解决Lua 随机数生成问题的办法
- [记录点滴] 记录一次用 IntelliJ IDEA遇到scope provided 的坑
- [记录点滴] 一个Python中实现flatten的方法
- [源码解析]Oozie来龙去脉之提交任务