jQuery技术

50个jQuery Mobile开发技巧大全 移动网站开发必备

字号+ 作者:H5之家 来源:H5之家 2015-10-31 09:33 我要评论( )

你可能会问如何使用CSS来锁定设备(根据屏幕尺寸)。比如说,你想要为iPad设计两列布局、为智能手机设计单列布局。要做到这一点,最佳办法就是使用媒体查询。只要

1、Backbone移动实例

Backbone移动实例

这是在Safari中运行的一款Backbone移动应用程序。想开始体验移动开发,一个好的出发点就是关注这个应用程序的构建方式。先不妨在你的浏览器中查看该应用程序。

相关链接:

2、使用媒体查询来锁定设备

使用媒体查询来锁定设备

你可能会问如何使用CSS来锁定设备(根据屏幕尺寸)。比如说,你想要为iPad设计两列布局、为智能手机设计单列布局。要做到这一点,最佳办法就是使用媒体查询。只要一些简单的媒体查询已到位,你就能迅速让CSS锁定屏幕尺寸。

相关链接:

3、快速技巧:如何使用@Font-face

快速技巧:如何使用@Font-face

可几个字体更换方法可以使用,比如cufon、sIFR、FLIR、@font-face和Google Fonts API。使用jQuery Mobile构建web应用程序时,我发现@font-face方法是用起来最容易的方法,其性能让人相当满意。

相关链接:

4、何处添加额外的jQuery调用

何处添加额外的jQuery调用

如果你想在移动插件被触发之前改动页面上的内容,那么建议的解决办法就是只要把传统的jQuery调用放在装入移动插件的引用之前。这样,你的jQuery命令就有机会在库装入之前运行。

相关链接:

5、完整的基本页面

你可能发现自己一再需要为基本页面建立完整的标记。正因为如此,这里是创建一个基本页面所需要的全部代码。

相关链接:

6、自行创建列结构

自行创建列结构

如果你想为多个设备设计最佳的单个页面结构,会发现自己经常结合运用上述的媒体查询技巧和“随意顺序的列”(columns in any order)方法。幸好,web开发人员很早以前就弄清楚了如何移动列以及结合运用这个方法和媒体查询。

相关链接:

7、结合使用谷歌分析(Google Analytics)工具和jQuery Mobile

结合使用谷歌分析

可以学习如何结合使用谷歌分析(Google Analytics)工具和jQuery Mobile。

相关链接:

8、通过AJAX和PHP,提交jQuery Mobile表单

通过AJAX和PHP,提交jQuery Mobile表单

可以学习如何通过AJAX和PHP,提交jQuery Mobile表单。

相关链接:?p=2574

9、如何使用jQuery Mobile来创建移动WordPress主题

如何使用jQuery Mobile来创建移动WordPress主题

这个工具让你很容易创建移动网站和web应用程序。在这个教程中,我会介绍如何创建针对移动设备优化的WordPress主题。

相关链接:

10、使用jQuery Mobile来创建网站,第一个部分

使用jQuery Mobile来创建网站,第一个部分

在这个教程中,我会介绍如何使用jQuery Mobile来创建网站。在该教程的这第一个部分中,我会解释网站的特点,还会实施网站的主页。

相关链接:

11、使用jQuery Mobile来创建网站,第二个部分

使用jQuery Mobile来创建网站,第二个部分

作为如何使用jQuery Mobile来创建网站这个系列的下一个部分,现在介绍构建扬声器(Speakers)页面。

相关链接:

12、禁用按钮动作

禁用按钮动作

下面介绍如何禁用按钮动作(比如说禁止打开页面),添加下列JavaScript。

相关链接:

13、创建弹出式对话框

创建弹出式对话框

jQuery Mobile库的一项便利特性就是内置的弹出内容或对话框特性。创建这项便利的特性简单得很。注意:首先,目标页面必须是完整的jQuery Mobile页面,如第一个技巧所概述。其次,这只适用于外部页面;它必须是完整的单独页面才能正常工作。

相关链接:

14、jQuery Mobile简介

可以学习如何使用jQuery Mobile框架。这个基本简介主要介绍了如何建立页面、链接、导航和按钮。

相关链接:?v=VY20Q6ON4QA

15、设定页面的背景颜色

设定页面的背景颜色

这听起来可能很简单,但我花了好几分钟才弄清楚如何给页面添加背景颜色,又不会被jQuery Mobile CSS所覆盖。通常你会给主体元素设定背景颜色,但如果你在使用jQuery Mobile框架,就需要把它设成ui-page类。

相关链接:

16、jQuery Mobile:我能为你做些什么?

jQuery Mobile:我能为你做些什么?

可以弄清楚新的jQuery Mobile框架如何帮你轻松构建外观出色、跨设备运行的web应用程序。包括许多代码示例和演示。可以学习创建一个简单的jQuery Mobile应用程序。

相关链接:

17、禁止装入弹出式消息

我觉得装入弹出式消息有点烦人,因为每当你装入不同的页面,该操作就会被触发。想禁止这个操作,只要往你的JS文件中添加下面这行代码。

相关链接:

18、如何使用jQuery Mobile来创建RSS阅读程序

如何使用jQuery Mobile来创建RSS阅读程序

如今,我们会深入介绍使用PHP 和jQuery Mobile,创建一个简单的Tuts+ RSS阅读程序。创建完毕后,你只要点击一下按钮,并且运用构建web应用程序的技能,就可以把这个简单项目添加到你的iPhone或Android手机上。

相关链接:

19、“Cancel”和“Save”按钮组合

“Cancel”和“Save”按钮组合

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
e