mobile

jQuery Mobile教程-基础篇-弹窗篇

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

本文主要看一下jQuery Mobile体系中的dialog组件,我们采用"提问●回答"的方式来初步地了解一下:

1、如何设置alert dialog?

示例:

jQuery Mobile教程-基础篇-可折叠篇

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

本文主要看一下jQuery Mobile体系中的可折叠内容,我们采用"提问●回答"的方式来初步地了解一下:

1、如何设置折叠?

示例:

<div data-role="collapsible">
<h3>本文主要介绍可折叠</h3>
<ol data-role="listview" data-inset="true">
	<li><a>如何设置折叠</a></li>
	<li><a>如何设置theme</a></li>
	<li><a href="#open-mode-page">如何设置展开模式</a></li>
</ol>
</div>

图示:

jQuery Mobile教程-基础篇-按钮篇

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

相比其他组件,按钮是最基本也是最常见的,那在jQuery Mobile的体系中,到底是什么样子的呢?我们采用"提问●回答"的方式来初步地了解一下:

1、按钮包含哪两类?

常见的:

<button>button</button>
<input type="button" value="input button"/>
<input type="submit" value="input submit"/>
<input type="reset" value="input reset"/>
<input type="image" value="input image"/>

图示:

jQuery Mobile教程-基础篇-如何开始?

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

不管你是对jQuery Mobile一无所知或者对它有很大的兴趣在研究过程中,还是已经开始用它做项目的开发者,欢迎加入这个jqm学习之旅

1、什么是jQuery Mobile?

按照官方的描述:针对智能手机和平板、做过触摸优化的web框架。截止到编写这个教程的时候,目前最新的版本是1.3.0。

2、jQuery Mobile推崇什么?

其实很多读者应该多用过jquery,它推崇的是"write less,do more",那jQuery Mobile呢?

答案是一定的,而且更加针对移动设备。

3、相关资源依赖?

jQuery Mobile首先依赖jquery框架提供的接口处理相关操作

提升移动设计用户体验的9种方法

以下内容来自Ben Terrill的一篇投稿文章。在Mobify工作的Ben带领着他的团队帮助他们那些就像Starbucks, Bose 和 Threadless的重要客户在移动和平板方面上打造出了卓越的完美体验。Ben参与编写了一篇名为50 Ways to Please Your Customers的电子书籍,而该书提供了移动web设计的最佳实践方法。来自Mobify的Julie Szabo通过信件帮助我对这本书进行了一些改善,虽然我很少这么做,但我还是觉得很有必要向大家说明一下:Julie Szabo的这封信完全是无偿的帮助,而且这本免费提供给大家的书也是非常优秀的。

本文由LL根据的《Nine Ways to Improve User Experience in Mobile Design》所译,从九个方面向大家介绍了如何提升移动端设计给用户带来最好的体验。

此像素非彼像素

本文由99根据Patrick H. Lauke的《A pixel is not a pixel is not a pixel》所译,主要介绍了Viewport方面的知识。99根据原文进行翻译,另外添加了许多自己从外面搜集的资料进行分析,从而解决了很多Web前端人员所不知道的——viewport对Web开发者会有什么影响。实属于干货系列,很值得一读。

iPads和iPhones的Media Queries

CSS3 Media Queries是一个强大的媒体查询功能,他的出现使用我们的站点可以随着不同的设备展现出不同的样多风格。紧随着Responsive设计的出现,Media Queries的功能是越来越得到前端人员的亲眯。

我也不另外,跟着这股时尚流行风,从接触到学习,紧接的到应用,对这个属性有了基本上的了解和实战经验。为了大家方便使用Media Queries,W3cplus通过互联网的搜集整理了一份CSS3 Media Queries模板。随着移动端上的应用越来越多,特别是苹果公司的系列产品型号的增加,给前端人员对Media Queries的运用带些许的麻烦。为了解决这个麻烦,在互联网上搜集了相关的资料,专门针对苹果的iPads和iPhones的Media Queries模板,希望这些模板能帮助大家减少在网上查找的时间。

image-set实现Retina屏幕下图片显示

最近一直在学习Retina屏幕下图片的处理方法,从《走向视网膜(Retina)的Web时代》一文中知道了Retina这个新名词,同时知道了他是什么东东,同时也继续在探讨Retina方面的知识点,随后在《移动Web——CSS为Retian屏幕替换图片》和《使用css sprites来优化你的网站在Retina屏幕下显示》中学习了Retina屏幕下图片的设置方法,或者说技巧吧,接下来《Web设计师如何制作Retina图像》学习了Retina屏幕下的图片制作技巧。其实可以说,这几篇文章可以让我知道如何在Retina屏幕下处理图片的技巧和细节了。因为这几篇文章从概念到制作Retina屏蔽下的图片,以及Coding实现,可以说是一条龙了。这些都是自以为事,为什么呢?除了这些方法,其实还有更先进的方法,这也就是我接下来要说的事情了。

移动Web——CSS为Retina屏幕替换图片

移动端的Web开发是一个热门的话题,由于移动端的普及,以后互联网上她将是会是主流,取代PC端的霸主之位。做为前端开发人员,很有必要的去了解并掌握移动Web的开发与制作。今天这篇教程主要是介绍Retina设备下的图片处理技术,正如《走向视网膜(Retina)的Web时代》一文所言,普通图片在Retina设备下显示将会变得模糊(图片在Retina设备下像素放大了两倍),所以为了能让用户在Retina设备(如iPhone 5, New iPad,Galaxy Nexus等设备)浏览的图片能清晰,满足用户的体验,Web前端人员需要学习并掌握如何处理这些问题,这对于Web前端人员来说是一个新的课题,也是一个新的挑战。今天跟着的《The Mobile Web: CSS Image Replacement for Retina Display Devices》一文学习了几种在移动端的Retina屏幕下处理图片的方法,觉得蛮好的,特意花了一个晚上时间将其转译为中文,希望对有着同样爱好与兴趣的同学有所帮助,如果有译的不对之处,烦请指正,或者大家可以阅读原文,你会有更深的体会(因为本人的EN是三脚毛功夫,莫怪(^_^))。

CSS3 Media Queries在iPhone4和iPad上的运用

CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少。前几天在《修复iPhone上submit按钮bug》上介绍了修复form中sumit按钮的bug。同一个项目,为了实现iPhone和iPad横板与竖板的风格,让我还是头疼了一翻。

一开始按照CSS3 Media Queries模板中的介绍来运用,虽然帮我解决了iPad的横板与竖板的风格渲染问题,但在iPhone4上还是存在问题的。后来结过网上的查找,总算是问题解决了,下面就来看看问题是如何解决的。

在具体开始之前,先来看看他的源码:

页面

返回顶部