jquery mobile(jQuery Mobile 数据库) 收藏 0

身为现代前端人员，不懂响应式怎么行？

响应式网页的话题随着如今移动互联网的盛行又被推到了很重要的位置，有相关人士预计，移动互联网的数据流量将在2015年超越桌面端的流量。

你一定听说过，我们目前正处在“后PC时代”，这对于前端开发人员来说，意味着应该处理一些用户行为上的改变，由此步入一个响应式与自适应设计技术统治的时代。这其中的关键点在于web的统一化，也就是说在合理的条件下，无论用户使用任何设备，都应该传达相同的内容信息与服务。

What？

2010年，Ethan Marcotte提出了“自适应网页设计”（ResponsiveWeb Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。举个例子：

（1）当屏幕宽度大于1300像素

（2）当屏幕宽度在600像素到1300像素之间

（3）当屏幕宽度在400像素到600像素之间

（4）当屏幕宽度在400像素以下

响应式的核心优势在于设计者可以为所有设备使用同一种模板，只需要用CSS来定制内容在各种大小屏幕上的呈现方式。

响应式网页的组成关键

响应式页面的实现其实并不算困难，用到的也都是大家比较熟悉的一些技术。

（1）Media Query

Media Query的主要作用是根据不同的分辨率去调整一些不同的样式。由于目前主流的移动设备都基于ios和Android，这两者的自带浏览器都是webkit内核，因此我们可以使用viewport属性和Media Query技术实现响应式网页。通过这一方法，我们能实现让基准字号font-size在不同分辨率下显示不一样的内容。

（2）Fluid grid

Fluid grid也称流体布局，就是在PC端实现的基础上将一些元素的狂傲由固定调整为弹性制的百分比或是字体比例等。使用Fluid grid的网站能够根据屏幕宽度自动调整页面中每列的宽度，从而保证页面始终处于完整展现的状态，并且实现原有的基本功能。

（3）Flex box

Flex box是CSS3新添加的一种模型属性，它的出现有力的打破了我们常常使用的浮动布局、实现垂直等高、水平均分、按比例划分，可以实现许多我们之前做不到的自适应布局。如果你希望网站能以webapp的外观呈现在手机用户面前，那么，Flex box就是个不错的方式。Flex box和APP的结构很类似，头部底部全部固定，而中间部分的高度实现自适应。

另外，与传统的web开发相比，由于响应式设计的页面布局、内容尺寸都发生了一些变化，所以，最终的成品极有可能与设计稿出入较大，还需前端开发人员和设计师多沟通，以免造成不必要的时间浪费。

响应式web设计的优化

在响应式网页的设计过程中，其中也会涉及到一些用户体验方面的问题和弊端，需要进一步的优化。

(1)减轻Javascript库负载

对于移动端来说，jQuery表现的太过厚重，而现在针对移动端的状态来说，有jQuery Mobile、YUI、XUI等可供选择的框架。

（2）减少HTTP请求次数

移动端相比较PC端有一个特殊的限制需要考虑到，就是用户的网络流量是有限的。这时候针对这些页面内部的部分操作，可以使用Ajax异步请求来完成，针对短期内不会变化的一些数据，可以使用服务器端缓存、前端缓存等机制来保存这些数据，这样可以减少用户一定的数据请求量。

（3）Javascript和CSS需要尽量压缩

把页面中使用的Javascript和CSS进行压缩之后会有效地减少页面大小。

（4）用CDN管理页面资源

CDN的即内容分发网络，意在尽可能避开互联网上有可能影响数据传输速度和稳定性的环节，使内容传输的更稳定。

（5）列表图片实现“懒”加载

移动终端设备因为屏幕大小有限，没有必要将全屏中的图片一次性加载完成，网页加载的同时，我们可以选择逐个加载，当用户进行滑动页面的时候，再继续加载图片。

（6）图片显示的优化处理

根据用户设备的分辨率来加载不同分辨率下的不同图片，这样既能给不同终端的用户一个很好的视觉体验，又不会白白浪费用户的网络数据流量。

转载自AnyForWeb

一篇文章带你用jquery mobile设计颜色拾取器

【一、项目背景】

现实生活中，我们经常会遇到配色的问题，这个时候去百度一下RGB表。而RGB表只提供相对于的颜色的RGB值而没有可以验证的模块。

我们可以通过 jquery mobile去设计颜色的拾取器，得到我们想要的颜色值。同时可以验证RGB表的颜色值。

【二、项目准备】

框架：jquery mobile

软件：Dreamweaver

1、去官网 jQuerymobile.com 下载jquery mobile。

2、在你的网页中添加 jQuery Mobile

你可以通过以下几种方式将jQuery Mobile添加到你的网页中：

• 从 CDN 中加载 jQuery Mobile (推荐)。
• 从jQuerymobile.com 下载 jQuery Mobile库。

3、导入jQuery Mobile

【三、项目目标】

1、滑动滑块将对应的颜色显示在页面。

2、实现输入框，输入对应的RBG值，将结果显示在页面上。

【四、项目实现】

1、创建三层div块。（头部，中部，尾部）。

头部显示文字，中部颜色显示区域，尾部显示滑动条。

2、创建一个表单（用三个input来分别存放RGB这三种颜色）。

3、添加CSS样式

4、添加 JS

1） 定义(set_color()方法)获取相对于颜色的id属性。

2）生成rgb表示的颜色字符串。

3）设计内容框背景色。

5、调用set_color()。

【五、效果展示】

1、点击运行。

2、点击f12进入开发者模式，点击蓝色框框切换手机模式运行。

3、滑动任意一条滑动条。得到想要的颜色。

4、手动输入RGB（0-255）值，得到相对应的颜色，如下图所示。

【六、总结】

1、使更多的人去了解jQuery Mobile， jQuery可以快速找到文档中的html元素，并对其进行操作，如隐藏、显示、改变样式…”。

2、本项目主要学习了input标签（类型：滑动条）如何与js绑定，获取事件响应。

3、颜色拾取器项目中，随机产生颜色这个难点进行了有效的分析，并提供解决方案。

4、按照操作步骤，自己尝试去做。自己实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

5、需要本文源码的小伙伴，后台回复“颜色拾取”四个字，即可获取。

****看完本文有收获？请转发分享给更多的人****

IT共享之家

入群请在微信后台回复【入群】

想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/

jQuery 3.0 正式发布，兼容 Promises/A+

jQuery 3.0 正式发布，此版本从 2014 年 10 月份就开始开发，jQuery 团队想打造成轻量级的，速度更快，向后兼容的 jQuery 版本。此版本移除了所有旧版 IE 的方法，并且借鉴了一些现代 web APIs。如果用户想要继续支持 IE 6-8，请使用最新的 jQuery 1.12 版本。

为了更方便用户升级，jQuery 3.0 提供了全新的 3.0 升级指南，还有 jQuery Migrate 3.0 插件。

用户可以从 jQuery CDN 或者下面链接中下载最新文件：

https://code.jquery.com/jquery-3.0.0.js

https://code.jquery.com/jquery-3.0.0.min.js

或者从 npm 获取：

此外，发布了 jQuery Migrate 3.0：

https://code.jquery.com/jquery-migrate-3.0.0.js

https://code.jquery.com/jquery-migrate-3.0.0.min.js

更多从 jQuery 1.x/2.x 升级到 jQuery 3.0 的迁移问题请看 jQuery Migrate 1.4.1 博文。

更轻量的构建版本

jQuery 团队发布了一个更轻量的 “slim” 版本，不包括 ajax，动画效果和当前废弃的代码。有时候用户不需要 ajax，只要使用一些独立库就可以处理 ajax 请求。或者使用 CSS 和类操作的结合来制作 web 动画效果。jQuery 的性能得到了很大的提升，slim 构建版本比之前常规的构建小了 6k，也就是 23.6k vs 之前的 30k。 文件提供在 npm 和 CDN：

https://code.jquery.com/jquery-3.0.0.slim.js

https://code.jquery.com/jquery-3.0.0.slim.min.js

此外，jQuery 3.0 还兼容 jQuery UI 和 jQuery Mobile。

jQuery 3.0 主要改进

• jQuery.Deferred 兼容 Promises/A+

• Deferreds 新增 .catch() 方法

• 错误事例会抛出错误提示

• 移除废弃的事件别名，比如 , , 和

• 动画效果现在使用

• 加速一些 jQuery 自定义选择器

更多改进内容请看 jQuery 博客。

微信订阅号：开源派 （opensourcepie）

开源派官网：osp.io 作者：叶秀兰

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com