mobile

Ratchet教程——安装

Ratchet是一款使用HTML、CSS和JavaScript用来制作移动网页或App的前端框架。目前最新版本是Ratchet v2.02。从今天开始我们一起来看如何使用Ratchet框架以及现成的组件制作移动网页或者app。首先向大家介绍Ratchet的环境配置与及安装。并向大家展示了使用Ratchet制作的一个简单的移动页面效果。

响应式设计、移动端网站与原生应用的优点和缺点

移动端的优化最近成了一个时髦的话题,将来也会有更多关于这方面的讨论。根据Mashable在2013年8月份发布的统计,可以得知,全球所有网站流量的17.4%都是通过移动设备来的,而这个数字在2014年将会继续增长。所以,你如果不想失去一杯羹的话,是时候步入移动端的领域了。

让手机站点像原生应用的四大途径

在移动设备上构建设计良好的网站慢慢变得越来越容易。不论使用什么方法(响应式设计、自适应等),如果你了解你所做的,创建一个美观的网站不是问题。但你的用户可能仍然要求网站有原生app的体验。完成这样的体验是一个挑战。大多数时候,当人们谈论“app”或“原生”的感觉,他们讲的的不是一个网站的视觉体验。他们所讨论的,是用户界面如何对他们的行为进行反馈,以及这种反馈是怎样呈现的。99根据Kyle Peatt的《A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App》所译,带大家一起体验让手机站点像原生应用的四大途径。

让你的网站在移动端健步如飞

最近一项 研究表明,80%的网民对移动端的浏览体验感到失望,同时,当体验提升时,他们会在智能手机上花费更多的时间。这不奇怪,因为64%的智能手机用户希望网站可以在4秒内加载完毕,但一半的网站花费了二倍以上的时间,达到了9秒。这篇文章会阐述一些可以使你的网站在移动端跑得更快的技术。99根据Johan Johansson的《How To Make Your Websites Faster On Mobile Devices》所译,向大家介绍如何让你的网站在移动端健步如飞。

jQuery Mobile教程-高级篇-原理之组件自动初始化

特别申明:本系列教程由小春撰写

本文我们来深度认识一下jQuery Mobile的内部设计原理中组件如何自动初始化
(注释:下面示例中的代码片段均来自1.1.0版本)
很多看过源码的同学或者使用过jquery mobile的同学们,大家有没有一个很大很大的问题:
------- jquery mobile提供了几个组件,他们如何自动初始化的?
!!重点说明:下面类似的自动初始化的流程多是在pagecreate触发后调用,有关pagecreate相关的说明可以查看我前面的相关介绍

我们挑选其中一个组件:listview

先看一张流程图:

jQuery Mobile教程-高级篇-特殊选择器扩展之:jqmData

特别申明:本系列教程由小春撰写

本文我们来认识一下jQuery Mobile的一个比较特殊的选择器方式
(注释:下面示例中的代码片段均来自1.1.0版本)
很多看过源码的同学,应该多会在很多地方看到下面这种选择器,用过jquery的人都会疑问?
---- jquery本身没有这种选择器类型的支持!

源码示例:

//获取页面data-role="page"和data-role="dialog"的数目
//#7470
var $pages = $(":jqmData(role='page'),:jqmData(role='dialog')")

那我来大家来看一下到底是咋样实现的呢?

源码展示:

jQuery Mobile教程-高级篇-pagecreate事件由来

特别申明:本系列教程由小春撰写

本文我们来深度认识一下jQuery Mobile体系中非常非常非常有用的事件:
--------pagecreate以及pagebeforecreate的由来!
(注释:下面示例中的代码片段均来自1.1.0版本)
很多看过源码的同学,应该多会在很多地方看到下面这种事件绑定,我挑选了第一个出现的地方:

源码实例:

jQuery Mobile教程-高级篇-自动增强主体结构开篇

特别申明:本系列教程由小春撰写

本文我们来深度认识一下jQuery Mobile中一个大致的自动增强的流程设计
还记得我们前面在《jQuery Mobile教程-基础篇-如何开始?》里面提到的一个最简单的页面结构吗?

jQuery Mobile教程-高级篇-网格配置实现细节

特别申明:本系列教程由小春撰写

本文我们来通过源码分析的方式,深度认识一下jQuery Mobile中grid组件的设计实现细节
还记得我们前面在《jQuery Mobile教程-基础篇-网格篇》里面提到的如何设置几列布局吗?

jQuery Mobile教程-高级篇-按钮自动增强的细节实现

特别申明:本系列教程由小春撰写

本文我们来通过对比按鈕自动增强前后的html代码,直观地让大家来深度认识一下jQuery Mobile中如何对按钮进行自动增强设计的!
还记得我们前面在《jQuery Mobile教程-基础篇-按钮篇》里面提到的一些基本的按钮知识吗?如何有不熟悉的,可以去查阅一下!

1、先看链接按钮:

我们在页面编写的代码:

<a data-theme="a" data-role="button">我是链接按钮</a>	  

我们来看一下经过自动增强后的:

页面

返回顶部