jquery mobile
我们收集了50个jQuery移动技巧和教程 , 10个移动插件 , 10个移动网站演示 , 10个免费移动主题 , 10个新移动框架 , 10个移动备忘单以及更多内容,可以帮助您轻松启动和运行该移动网站。时间!
什么是jQuery Mobile?
jQuery Mobile是Web应用程序,移动和移动网站的框架,目的是在多个平台(如iPhone移动设备,BlackBerry,Android和Windows Mobile)上提供统一的用户界面。 随时了解最新的jQuery Mobile开发!
1.骨干移动示例
在Safari中运行的骨干移动应用程序。 开始您的移动开发经验的一个好地方是看看如何将它们组合在一起。 首先在浏览器中查看应用程序。
2.使用媒体查询来定位设备
您可能会问如何在CSS中定位设备(基于屏幕尺寸)。 假设您需要iPad的两列布局和智能手机的单列布局。 最好的方法是使用媒体查询。 使用一些简单的媒体查询,您可以快速确定CSS目标屏幕的尺寸。
3.快速提示:如何使用@ Font-face
有几种可用的字体替换方法,例如cufon,sIFR,FLIR,@ font-face和Google Fonts API。 使用jQuery Mobile构建Web应用程序时,我发现@ font-face方法是最容易使用的方法,并且性能令人满意。
4.在哪里添加传统的jQuery调用
如果要在触发移动插件之前修改页面上的内容,建议的解决方案是将传统jQuery调用简单地放在加载移动插件的引用之前。 这样,您的jQuery命令就有机会在加载库之前运行。
5.完整的基本页面
如果您发现自己需要一遍又一遍的基本页面的完整标记。 因此,这里是设置基本单页所需的全部代码。
6.自己创建一个列结构
如果您希望为多个设备最佳地构建一个页面,则可以发现自己将上面的媒体查询技巧与“任何顺序的列”技术结合在一起。 幸运的是,Web开发人员很久以前就想出了如何移动列以及将这种技术与媒体查询结合起来的方法。
7.在jQuery Mobile中使用Google Analytics(分析)
了解如何在jQuery mobile上使用Google Analytics(分析)。
8.使用PHP通过AJAX提交jQuery Mobile表单
了解如何通过AJAX和PHP提交jQuery Mobile表单。
9.如何使用jQuery Mobile创建移动WordPress主题
该工具使您可以轻松创建移动网站和Web应用程序。 在本教程中,我将向您展示如何创建针对移动设备优化的WordPress主题。
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
10.使用jQuery Mobile创建网站,第1部分
在本教程中,我将向您展示如何使用JQuery Mobile构建网站。 在本教程的第一部分中,我将解释该站点的特征,并实现该站点的主页。
11.使用JQuery Mobile创建网站,第2部分
现在是时候构建“发言人”页面,作为我关于如何使用jQuery Mobile创建网站的系列文章的续篇。
12.禁用按钮动作
以下是禁用按钮操作的方法(例如:从打开页面开始),添加以下JavaScript。
13.创建弹出对话框
该库的一项便捷功能是其内置的弹出窗口或对话框功能。 设置此功能非常简单。 注意:首先,目标页面必须是完整的jQuery移动页面,如技巧1所述。 其次,这仅适用于外部页面。 它必须是一个完整的单独页面才能正常工作。
14. jQuery Mobile简介
了解如何使用jQuery Mobile框架。 这是有关如何设置页面,链接,导航和按钮的基本介绍。
15.设置页面的背景色
这听起来很简单,但是花了我几分钟的时间弄清楚如何将背景色应用于页面,而又不会被jQuery Mobile CSS覆盖。 通常,您会为body元素设置背景颜色,但是如果您使用的是jQuery Mobile框架,则需要将其设置为ui-page类。
16. jQuery Mobile:它可以为您做什么?
了解新的jQuery Mobile框架如何帮助您轻松构建美观的跨设备Web应用程序。 包含许多代码示例和演示。 如何创建一个简单的jQuery Mobile App
17.禁用加载弹出消息
我发现加载弹出消息有点烦人,因为每次您加载不同的页面时都会触发该弹出消息。 要禁用此功能:将以下代码行添加到JS文件中。 如果您发现加载弹出消息有点烦人,因为每次您加载不同页面时都会触发该弹出消息。 有一种禁用它的方法,只需将以下代码行添加到您的JS文件中即可。
18.如何用jQuery Mobile构建RSS阅读器
今天,我们将深入探讨并使用PHP和jQuery Mobile构建一个简单的Tuts + RSS阅读器。 完成后,您只需单击一个按钮,即可将这个简单的项目添加到您的iPhone或Android手机中,以及构建网络应用程序的技能!
19.“取消” +“保存”按钮组合
此代码段满足两个基本需求。 第一种是使两个按钮彼此相邻。 幸运的是,该库具有内置的列结构,可以使用字段集标记和适当的类轻松地将其投入使用,如下所示。 第二个是有两个主题不同的按钮。 该代码直接来自文档,我经常使用它。
20.使用jQuery的目标平台
就像我们可能要为某些设备执行某些CSS一样,我们也可能只希望在特定设备上运行jQuery。 这是Snipplr的一些代码的改编版,它使我可以轻松地分割jQuery的各个部分以根据用户的设备运行。
21.创建一个自定义主题
jQuery Mobile框架带有5个主题-主题A,主题B,主题C,主题D和主题E。但是您可以轻松地为Web应用程序创建一个新主题。
22.阻止某些关键项目被截断
库的一个功能(或缺陷,取决于您的需求)是它可以智能地截断长项目以适合UI元素。 在两种情况下,这可能很烦人。 首先,在列表项中,我希望看到全文,第二个在页脚文本中。
23.两个iPhone开发技巧,以及jQuery的帮助
第一个也是最简单的技巧是使用视口。 (您可能需要在Apple处注册才能查看该链接。Apple要求简单文档登录需要两个提示!)view port是一个简单的meta标记。 这是一个例子:
24.从列表项中删除箭头
默认情况下,jQuery Mobile框架在每个列表项旁边添加一个箭头。 要禁用此功能,请在要删除箭头的列表项上将data-icon属性设置为“ false”。
25. jQuery Mobile表单验证
在本教程中学习jQuery移动表单验证。
26.使用JQuery Mobile和HTML5 canvas元素在iPad和Android浏览器上侦听触摸事件
JQuery Mobile支持许多触摸事件,使生活变得更加轻松。 实际上,JQuery Mobile确保您的Web应用程序也可以在移动和台式机/笔记本电脑浏览器上运行。 遗憾的是,您无法期望JavaScript onclick事件在移动设备上像在台式机/笔记本电脑浏览器上一样起作用。
27. jQuery Mobile Touch事件:点击
了解如何在智能手机设备上检测“轻按”触摸事件。
28.将JQuery Mobile与appMobi结合使用
该教学视频向您展示如何将流行的JQuery JavaScript库的新移动版本与appMobi一起使用。 通过JQuery Mobile,您可以轻松创建具有内置应用程序外观和感觉的应用程序,并带有内置按钮,过渡,表单等。
29.一次禁用所有链接的AJAX导航
就像AJAX导航一样,有时候您宁愿禁用它。 使用这部分jQuery告诉移动库不要使用AJAX导航。
30.在页面加载时显示随机背景图像
jQuery Mobile有许多页面初始化事件,可用于在页面加载时触发某些方法。 每次加载页面时,以下CSS + JavaScript可用于显示随机背景图像。
31.创建一个无文字的仅图像按钮
有时,您可能不需要按钮的任何文本,但仍使用按钮元素附带的其余功能。 使用主页按钮或信息按钮通常是这种情况。 要隐藏与该按钮关联的任何文本,请将data-iconpos属性设置为“ notext”。 例如:
32. jQuery Mobile工具栏导航菜单的
了解如何使用jQuery Mobile工具栏,导航栏,创建固定位置菜单等!
33. jQuery Mobile中的搜索列表
我们可以轻松创建一个包含搜索元素的列表,用户可以通过该列表开始输入文本,并从列表中过滤掉所有适合此文本的元素。
34. jQuery Mobile:官方jQuery Mobile开发框架
这个移动开发框架具有许多出色的功能,并允许[移动]开发人员在其iOS,Android,BlackBerry,Bada,Windows Mobile,Palm OS,Symbian和MeeGo应用程序和Web应用程序中或其中摇摆一些严肃的jQuery。 您应该在移动Safari中看到这个坏男孩。
35.在不使用AJAX进行页面过渡的情况下打开链接
要在不使用AJAX进行页面转换的情况下打开链接(即:以传统方式重新加载整个页面),请将rel属性设置为“ external”。
36. jQuery Mobile多页内部链接
这是一个简短的视频片段,解释了内部链接如何在jQuery Mobile中工作。
37. jQuery Mobile中的对话框转换
了解在jQuery Mobile中显示对话框时如何设置过渡。
38.向jQuery Mobile网站添加行车路线
了解如何将行车路线添加到jQuery移动网站。
39. jQuery Mobile Framework –表单教程
在本教程中,我们将重点介绍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 Mobile中)设置固定位置的含义。
44. jQuery Mobile内联按钮
通过向其添加data-inline =“ true”属性,可以得到一个按钮,其宽度不是屏幕的整个宽度。 该视频片段显示了如何执行此操作。
45. jQuery Mobile中的Hello World
这是一个简短的视频片段,解释了如何开发一个利用jQuery Mobile库的简单网页。
46.使用jQuery Mobile构建具有离线功能的移动网站
了解如何使用jQuery mobile建立具有办公功能的移动网站。
47. jQuery Mobile和JSON
本教程介绍了jQuery Mobile(JQM)框架,该框架用于编写针对移动行业领先的浏览器的移动Web应用程序。 JQM用于为在移动设备(例如iPhone,iPad,Android,WebOS,BlackBerry版本6(火炬,Playbook)等)上运行的基于Web的应用程序提供直观一致的用户体验。 本教程首先对JQM项目以及JQM与HTML5以及对HTML5的依赖关系进行了概述。 在简要介绍了构建JQM应用程序的多种方法之一以及JQM增强基本Web UI元素的某些方法之后,本教程将介绍基本的销售人员自动化需求。
48.在jQuery Mobile中创建和使用自定义图标
这篇文章将向您展示如何创建和实现自定义图标。 此外,我还将向您展示如何为iPhone 4的Retina显示屏和较新的高分辨率设备添加高分辨率图标支持。
49. jQuery Mobile&Rails 3入门
此应用程序将允许您从移动设备创建,阅读,更新和删除博客文章。
50.使用jQuery Mobile构建一个本地Android News Reader应用程序
了解如何使用jQuery Mobile构建本机Android News Reader应用程序。
仍然没有足够的移动提示! 5个其他jQuery Mobile技巧
翻译自: https://www.sitepoint.com/50-jquery-mobile-development/
jquery mobile