50个jQuery Mobile开发技巧
我们收集了50个jQuery Mobile的技巧和教程 , 10个移动插件 , 10个移动网站演示 , 10个免费的手机主题 , 10个新的移动框架 , 10个移动小抄和更多的东西来帮助你,手机网站开始,启动并运行时间!
什么是jQuery Mobile的?
jQuery Mobile的是,以提供跨多个平台统一的用户界面像iPhone这样的移动设备的Web应用程序,移动设备和移动网站的框架,黑莓,Android和Windows Mobile。 保持最新的最新的jQuery Mobile的发展!
1.骨干移动实施例
主干移动应用程序在Safari上运行。 一个伟大的地方开始你的手机开发经验是看一看,这是放在一起的方式。 通过在浏览器中查看应用开始。
2.使用媒体查询目标设备
你可能会问如何定位在CSS设备(根据屏幕大小)。 假设你想为iPad一两栏布局和智能手机的一列。 做到这一点的最好办法是与媒体查询。 有了一些简单的媒体查询,可以快速让CSS目标的屏幕尺寸。
3.快速提示:如何使用@字体,面对工作
有可用的几个字体替代方法,如的Cufón,sIFR的,FLIR,@字体面和谷歌字体API。 当构建使用jQuery Mobile的一个web应用程序,我发现@字体面的方法是工作最简单的方法用,性能中规中矩。
4.如果添加传统的jQuery电话
如果你想之前修改网页上的东西移动插件被触发,推荐的解决方案是参考前简单地把传统的jQuery调用,负载移动插件。 这样一来,你的jQuery命令有机会被加载库前运行。
5.全基本页面
如果你发现自己需要全面加价的基本页面一遍又一遍。 因此,这里是所有你需要建立一个基本的单页面的代码。
6.在你自己创建一个列结构
如果你想优化结构,多种设备在一个页面,你会发现自己结合以上技术的“以任意顺序列”媒体查询技巧。 幸运的是,Web开发人员想出了不久前如何四处走动,并通过结合媒体查询该技术列。
7.使用谷歌分析与jQuery Mobile的
了解如何使用谷歌分析与jQuery移动。
8.通过AJAX提交jQuery Mobile的形式用PHP
了解如何通过AJAX提交jQuery Mobile的形式用PHP。
9.如何创建jQuery Mobile的移动WordPress主题
这个工具允许您轻松地创建移动网站和Web应用程序。 在本教程中,我会告诉你如何创建一个移动优化的WordPress主题。
10.创建一个网站使用jQuery移动,第1部分
在本教程中我将告诉你如何建立与jQuery Mobile的网站。 在本教程的第一部分,我将解释该网站的特点,我将实现网站的主页。
11.创建一个网站使用jQuery Mobile的,第2部分
现在是时候打造的扬声器页面我对如何建立一个网站使用jQuery Mobile系列的延续。
12.禁用一个按钮动作
以下是如何禁用按钮操作(例如:从打开页面),添加下面的JavaScript。
13.创建弹出对话框
图书馆的一个方便的功能是其内置的弹出窗口或对话框的功能。 要设置这个功能是非常简单的。 注意:首先,目标页面必须是一个全面的jQuery Mobile的页面,如提示#1所列。 其次,这只适用于外部网页工作; 它必须是一个完全独立的页面,以正常工作。
14.介绍jQuery Mobile的
了解如何使用jQuery Mobile框架。 这是一个关于如何设置页面,链接,导航和按钮的基本介绍。
页面15.设置背景颜色
这听起来简单,但我花了几分钟的时间来弄清楚如何应用背景颜色的页面没有通过jQuery Mobile的CSS有它覆盖。 通常情况下,你会设置一个背景色为主体元素,但如果你正在使用jQuery Mobile框架,您需要将其设置为UI的页面类。
16. jQuery Mobile的:它能做适合你?
找出新的jQuery Mobile的框架如何帮助您轻松打造精美的,跨设备的Web应用程序。 的代码示例和演示大量包括在内。 如何创建一个简单的jQuery移动应用
17.禁止装载弹出信息
我发现装载弹出消息有点讨厌,因为它被触发每次加载不同的页面的时间。 要禁用此:添加以下代码行到您的JS文件。 如果您发现装载弹出消息有点恼人已经因为它被触发每次加载不同的页面。 有一种方法来禁用它,只需添加下面的代码行到您的JS文件。
18.如何建立一个RSS阅读器与jQuery Mobile的
今天,我们将深入中,并建立一个简单的TUTS + RSS阅读器,使用PHP和jQuery Mobile的。 当我们完成后,你就会有这个简单的项目添加到您的iPhone或Android手机的一个按钮的点击,以及技能来构建你的web应用程序的能力!
19.“取消” +“保存”按钮组合
这段代码容纳两个基本需求。 首先是有彼此相邻的两个按钮。 幸运的是,库中有一个内置的,可以很容易用一个字段标签和适当的类来投入到工作中,如下图所示柱结构。 二是有不同主题的两个按钮。 此代码是直接从文档,我把它方便经常使用。
20.目标平台与jQuery
就像我们可能要执行某些设备特定CSS,我们也可能希望只在特定的设备上运行的jQuery。 下面是从Snipplr一些代码,让我很容易的jQuery段部分,以根据用户的设备上运行的适应。
21.创建一个自定义主题
jQuery Mobile的框架提供了5个主题 - 主题A,主题B,主题C,主题d和主题E.但是你可以很容易地为您的Web应用程序的新主题。
被截断22.阻止一些关键项目
图书馆的一个特点(或缺陷,根据您的需要)是它智能截断的长项以适应UI元素。 有两种情况下这可能是恼人。 首先,在列表中的项目,在这里我更愿意看到全文,第二个是在页脚文本。
23.两部iPhone开发技巧和jQuery救援
第一和最简单的尖端正与视口。 (您可能需要在苹果公司,以查看链接进行注册。两点关闭以苹果需要进行简单的文档登录!)观察口是一个简单的meta标签。 下面是一个例子:
24.从列表中删除项目的箭头
默认情况下,jQuery Mobile的框架,增加了旁边的每个列表项的箭头。 要禁用它,在列表项数据图标属性设置为“假”,你想删除的箭头。
25. jQuery Mobile的表单验证
了解本教程jQuery Mobile的表单验证。
26.使用jQuery移动与HTML5 canvas元素监听在iPad和Android浏览器的触摸事件
jQuery Mobile的支持多种触摸事件,使生活变得更加简单。 事实上,jQuery Mobile的保证您的网络应用将在移动和台式机/笔记本电脑的浏览器正常工作。 可悲的是你不能指望一个JavaScript onclick事件工作在移动设备上,因为它确实在台式机/笔记本电脑的浏览器。
27. jQuery Mobile的触摸事件:轻按
了解如何检测智能手机设备上的“点击”触摸事件。
28.使用jQuery移动随appMobi
这种教学视频展示了如何使用流行的jQuery JavaScript库appMobi的新移动版本。 jQuery Mobile的让您轻松创建拥有所有的应用程序的外观和感觉本地应用程序,具有内置按钮,转换,形式等。
29.禁用AJAX导航一次性为所有链接
由于真棒因为AJAX导航,有次在那里你只是相当禁用它。 使用jQuery的此位,告诉移动图书馆不使用AJAX导航。
30.显示在页加载的随机背景图像
jQuery Mobile的有一些页面初始化事件,你可以用它来触发页面加载某些方法。 下面的CSS + JavaScript可以每一个页面加载时间来显示一个随机背景图像。
31.没有文本创建一个只图像按钮
有时候,你可能不希望对您的按钮任何文字,但仍使用的是带有一个按钮元素特征的其余部分。 这通常是一个home键或信息键的情况。 要隐藏与该按钮关联的任何文字,数据集,iconpos属性“NOTEXT”。 例如:
32. jQuery Mobile的工具栏导航菜单的
了解如何使用jQuery Mobile的工具栏,导航栏,创建固定位置的菜单和更多!
33.搜索列表中的jQuery Mobile的
我们可以很容易地创建一个包括通过它用户可以开始输入文字,并得到适合本文从列表中过滤掉所有元素搜索元素列表。
34. jQuery Mobile的:官方jQuery Mobile的开发框架
这款移动开发框架是挤满了华而不实的功能,并允许[移动]开发商岩石上或在自己的iOS,Android,黑莓,巴达,Windows Mobile的Palm操作系统,塞班,和MeeGo应用程序和Web应用程序的一些严重的jQuery。 您应该看到在移动Safari浏览器这个坏小子。
35.打开,而无需使用AJAX与页面过渡链接
要打开链接,而不使用与页面过渡AJAX(即:重新加载整个页面的老派的方式),集rel属性为“外部”。
36. jQuery Mobile的多页内部链接
这是一个简短的视频剪辑,说明内部链接在jQuery Mobile的是如何工作的。
37.对话框过渡jQuery中移动
了解如何显示jQuery Mobile的对话框时设置的过渡。
38.行车路线添加到一个jQuery Mobile的网站
学习如何驾驶路线信息添加至到一个jQuery移动网站。
39. jQuery Mobile的框架-表单教程
在本教程中,我们将专注于jQuery Mobile的一些基本要素:页面结构,形式和Ajax表单提交。 的教程基于jQuery Mobile框架的版本1.0 alpha版本2。
40.简单列表视图中jQuery Mobile的
这种视频剪辑显示了如何创建jQuery Mobile的一个简单的列表视图。
41.拆分名单jQuery Mobile的
我们可以添加到列表项的辅助链路中的每一个。 这将在该项目的右侧部分的图标将显示在一起。
42.表单控件在jQuery Mobile的
这是使用jQuery Mobile的库时显示了可用的控制通过一个短片。
43.页眉和页脚固定定位在jQuery Mobile的
这是一个短视频剪辑示出了设置固定定位既页眉和页脚的含义(jQuery中移动)。
44. jQuery Mobile的内联按钮
我们可以得到一个按钮,它的宽度是不是屏幕的整个宽度,通过将数据内嵌=” true”属性吧。 这种视频剪辑显示了如何做到这一点。
45.世界您好在jQuery Mobile的
这是一个短片,介绍如何开发一个简单的网页,它利用jQuery Mobile的库。
46.建立离线功能的移动网站与jQuery Mobile的
了解如何构建一个办公室能够移动网站使用jQuery移动。
47. jQuery Mobile的和JSON
本教程介绍编写面向移动通信行业领先的浏览器的移动Web应用程序的jQuery Mobile的(JQM)框架。 JQM用于提供在移动设备上,如iPhone,iPad的,Android的,的WebOS,黑莓版本6(火炬,剧本),以及其他运行基于Web的应用程序直观且一致的用户体验。 补习始于一个高层次看JQM项目和JQM向关系,依赖,HTML5。 简单的介绍一下的许多方式可以构建一个JQM应用程序和一些在其JQM增强基本的Web UI元素的方法之一后,教程需要看看一个基本的销售队伍自动化的要求。
在jQuery Mobile的48创建和使用自定义图标
这篇文章将告诉你如何创建和实现自定义图标。 此外,我会告诉你如何添加高分辨率图标为iPhone 4的Retina显示支持,更新的高分辨率设备。
49.开始使用jQuery Mobile的&Rails 3的
此应用程序将允许您创建,读取,来自移动设备的更新和删除博客文章。
50.使用jQuery移动建设了Android本地新闻阅读器应用程序
了解如何使用jQuery移动建设了Android本地新闻阅读器应用程序。
仍然没有足够的移动技巧的! 5个更多jQuery Mobile的技巧
From: https://www.sitepoint.com//50-jquery-mobile-development/