精选文章 jQuery Mobile第2课

jQuery Mobile第2课

作者:cukeoumuqian0413 时间: 2020-08-02 10:48:55
cukeoumuqian0413 2020-08-02 10:48:55

Today we continue our lessons about jQuery Mobile. In this lesson we will look at examples of jQuery Mobile initialization, creation of pages, event handlers, page transitions and other.

今天,我们继续关于jQuery Mobile的课程。 在本课程中,我们将研究jQuery Mobile初始化,页面创建,事件处理程序,页面转换等示例。

在您的站点中包括JQUERY移动 (INCLUDING JQUERY MOBILE IN YOUR SITE)

Implementing the jQuery framework into your site is as straight forward as adding any external Javascript file.

在您的站点中实现jQuery框架与添加任何外部Javascript文件一样简单。





  jQuery Mobile on Script Tutorials
  
  
  
  


  

Site contents will be here





  jQuery Mobile on Script Tutorials
  
  
  
  


  

Site contents will be here

Fig 2.1 section 2 – rendered html look after loading .js scripts files in the head of html5

图2.1第2部分–在html5的头部加载.js脚本文件后呈现的html外观

使用JQUERY移动创建简单的页面 (CREATING A SIMPLE PAGE USING JQUERY MOBILE)

We have already covered the code it takes to build the basic structure for a mobile site, but we have not actually made it look like a mobile site. Let’s expand that into a one-page and one button site so that we can get a better feel for how jQuery Mobile works. jQuery Mobile designates pages using the data-role attribute. Behind the scenes, jQuery Mobile selects elements based on this attribute and progressively enhances them, adding CSS classes, any needed markup, and event management. This may seem like a complicated way of handling things – why not simply have regular pages linked like you ordinarily would? but this tutorial gives jQuery Mobile several important features:

我们已经介绍了构建移动网站基本结构所需的代码,但实际上并没有使其看起来像移动网站。 让我们将其扩展为一页和一个按钮的站点,以便更好地了解jQuery Mobile的工作方式。 jQuery Mobile使用data-role属性指定页面。 在后台,jQuery Mobile根据此属性选择元素并逐步增强它们,添加CSS类,任何需要的标记和事件管理。 这似乎是一种复杂的处理方式-为什么不像通常那样简单地链接常规页面呢? 但是本教程为jQuery Mobile提供了几个重要功能:

Page Transitions By handling pages as separate content areas in one document, jQuery Mobile can create smooth page transitions, resulting in an overall ‘application-like’ look and feel.

页面转换通过将页面作为一个文档中的单独内容区域来处理,jQuery Mobile可以创建平滑的页面转换,从而产生整体“应用程序式”外观。

Navigation Management jQuery Mobile can automatically handle page navigation, providing features like back buttons and deep linking.

导航管理 jQuery Mobile可以自动处理页面导航,并提供后退按钮和深度链接等功能。

Efficiency Since resources are all contained in one file, the browser does not have to access the network over and over again, as it would with smaller individual files. This will help mitigate application slowness and battery drain on the mobile device. The trade-off is that for a large application there could be an appreciable download time for a large HTML page with many individual jQuery Mobile page views. However, once the file is downloaded and ready, the behavior will be much faster and will not necessarily be dependent on network access.

效率由于资源全部包含在一个文件中,因此浏览器不必像处理单个文件那样一遍又一遍地访问网络。 这将有助于减轻移动设备上的应用程序速度和电池消耗。 权衡是,对于大型应用程序,对于具有许多单独的jQuery Mobile页面视图的大型HTML页面而言,下载时间可能会相当可观。 但是,一旦下载并准备好文件,其行为将更快,并且不必依赖于网络访问。

jQuery Mobile第2课1

jQuery Mobile第2课2




Script-tutorial: jQuery Mobile






Single Page Site

Look at the button!

I am a button




Script-tutorial: jQuery Mobile






Single Page Site

Look at the button!

I am a button

Fig 2.1 section 2.1 creating simple page using jQuery mobile

图2.1第2.1节使用jQuery mobile创建简单页面

Example 1: creating a simple page using jQuery mobile

示例1:使用jQuery mobile创建一个简单页面

jQuery Mobile第2课3
Fig 2.2 section 2.1 creating a simple page using jQuery mobile




Script-tutorial: jQuery Mobile






Single Page Site

Look at the button!

I am a button
jQuery Mobile第2课4
图2.2第2.1节使用jQuery mobile创建简单页面




Script-tutorial: jQuery Mobile






Single Page Site

Look at the button!

I am a button

A simple page with one button linking to the dialog page Example 2: creating a simple page using jquery mobile with a working button and second page section using jquery mobile

一个带有一个按钮的简单页面链接到对话框页面示例2:使用带有工作按钮的jquery mobile创建一个简单页面,并使用jquery mobile创建一个第二页面部分

jQuery Mobile第2课5
Fig 2.3 section 2.1 A simple page with one button linking to the dialog page




  Script-tutorials: jQuery Mobile
  
  
  
  


  

Single Page Site

Look at the button!

I am a button

Clicked!

clicked content!

Go back
jQuery Mobile第2课6
图2.3第2.1节的简单页面,其中一个按钮链接到对话框页面




  Script-tutorials: jQuery Mobile
  
  
  
  


  

Single Page Site

Look at the button!

I am a button

Clicked!

clicked content!

Go back

第2.2节:JQUERY移动框架 (SECTION 2.2: JQUERY MOBILE FRAMEWORK)

移动初始化事件 (MOBILE INITIALIZATION EVENT)

The jQuery framework uses the $(document).ready() function to circumvent manipulation and loading problems by giving you access to your functions as soon as possible. While this is fantastic for single page sites, it becomes a small problem for the jQuery Mobile framework.

jQuery框架使用$(document).ready()函数使您能够尽快访问函数,从而规避了操作和加载问题。 尽管这对于单页网站来说是很棒的,但是对于jQuery Mobile框架来说这是一个小问题。

jQuery Mobile uses AJAX to load the contents of each page rather than reload the entire DOM structure. The $(document).ready() function only runs once per page load, not per AJAX call. In jQuery Mobile, the $(document).ready() function doesn’t run once per page, but rather once per site unless a page refresh is requested or performed by the user. This means that some of the default settings that need to be set by jQuery Mobile cannot be set in the $(document).ready() function because they would not be applied to pages included through AJAX. The answer to setting and changing these defaults is to use the mobileinit event because it runs before the $(document).ready() function ever does. To use the mobileinit event you must first include the jQuery framework and then either inline or include an external JavaScript file that contains an event binding for the mobileinit event and finally the include for jQuery Mobile.

jQuery Mobile使用AJAX加载每个页面的内容,而不是重新加载整个DOM结构。 $(document).ready()函数每个页面加载仅运行一次,而不是每个AJAX调用运行一次。 在jQuery Mobile中, $(document).ready()函数不是每个页面运行一次,而是每个站点运行一次,除非用户请求或执行页面刷新。 这意味着jQuery Mobile需要设置的一些默认设置无法在$(document).ready()函数中设置,因为它们不会应用于AJAX包含的页面。 设置和更改这些默认值的答案是使用mobileinit事件,因为该事件在$(document).ready()函数之前运行。 要使用mobileinit事件,您必须首先包含jQuery框架,然后内联或包含一个外部JavaScript文件,该文件包含mobileinit事件的事件绑定,最后包含jQuery Mobile的include。

Example 3: Including jQuery, an Inline mobileinit Script, and jQuery Mobile

示例3:包括jQuery,Inline mobileinit脚本和jQuery Mobile










JQUERY移动中的页面初始化 (PAGE INITIALIZATION IN JQUERY MOBILE)

To use the pageinit event on your page, you have to take a slightly less dynamic and more planned approach to your code. There are a few different ways you can attach the pageinit event in your code. When using a version of jQuery Mobile prior to 1.1, you will be using jQuery 1.6.4, which means you use the .bind() function instead of the .on() function. When using jQuery Mobile 1.1+ you use the .on() function to bind the event. The .on() function introduced in jQuery 1.7 is a unification of previous functions used to bind events. Instead of having to worry about using .bind(), .live(), or .delegate(), you can now use the .on() function to find events. More about this function can be found by visiting http://api.jquery.com/on/. If you are using a version of jQuery Mobile prior to 1.1, you should not use the .on() method, but should instead use the .delegate() or .live() function.

要在页面上使用pageinit事件,您必须对代码采取稍微不那么动态且计划更多的方法。 您可以通过几种不同的方式在代码中附加pageinit事件。 当使用1.1之前的jQuery Mobile版本时,将使用jQuery 1.6.4,这意味着您使用.bind()函数而不是.on()函数。 使用jQuery Mobile 1.1+时,您可以使用.on()函数绑定事件。 jQuery 1.7中引入的.on()函数是用于绑定事件的先前函数的统一。 现在,您不必担心使用.bind(), .live() .delegate().delegate() ,而可以使用.on()函数查找事件。 有关此功能的更多信息,请访问http://api.jquery.com/on/。 如果您使用的是1.1之前的jQuery Mobile版本,则不应使用.on()方法,而应使用.delegate().live()函数。

Example 4: Using the pageinit and mobileinit Script Event Instead of $(document).ready()

示例4:使用pageinit和mobileinit脚本事件代替$(document).ready()

jQuery Mobile第2课7
It gives the above image if multipage_two.html is not available in the directory direction link.




  Script-Tutorials jQuery Mobile
  
  
  


  

pageinit event example

The button below will use AJAX to load another page and trigger a bound event

Click to open a new page
jQuery Mobile第2课8
如果multipage_two.html在目录方向链接中不可用,它将给出上面的图像。




  Script-Tutorials jQuery Mobile
  
  
  


  

pageinit event example

The button below will use AJAX to load another page and trigger a bound event

Click to open a new page

The below script Has an Event Tied to It in the above script of pageinit.html That Will Trigger on Page Load directly from that file.

下面的脚本在以上pageinit.html脚本中将事件绑定到该事件,该事件将在直接从该文件加载页面时触发。

jQuery Mobile第2课9
This is multipage_two.html




  Script-tutorials: jQuery mobile
  
  
  
  


  

pageinit event example

Fantastic! I am a new page and was loaded through AJAX.

Amazing, now take me back
jQuery Mobile第2课10
这是multipage_two.html




  Script-tutorials: jQuery mobile
  
  
  
  


  

pageinit event example

Fantastic! I am a new page and was loaded through AJAX.

Amazing, now take me back

jQuery Mobile第2课11

jQuery Mobile第2课12




  Script-Tutorials jQuery Mobile
  
  
  
  
  


  

pageinit event example

The button below will use AJAX to load another page and trigger a bound event

Click to open a new page




  Script-Tutorials jQuery Mobile
  
  
  
  
  


  

pageinit event example

The button below will use AJAX to load another page and trigger a bound event

Click to open a new page

页面转换 (PAGE TRANSITIONS)

Page transitions involve two pages: a “from” page and a “to” page – these transitions animate the change from the current active page (fromPage) to a new page (toPage).

页面转换涉及两个页面:“从”页面和“至”页面–这些转换使从当前活动页面(fromPage)到新页面(toPage)的更改具有动画效果。

页面隐藏和显示事件 (PAGE HIDE AND SHOW EVENTS)

Because of its asynchronous nature, jQuery Mobile makes the distinction between page load events and page show and hide events. Page load events happen when a file is loaded into the browser in a standard synchronous way. When a file is loaded like this, the usual jQuery(document).ready() method is available for use, and jQuery Mobile also fires off other initialization events as well. As we have seen, a single HTML file may contain multiple jQuery Mobile page views, and the user can transition between those page views multiple times. These transitions do not fire off the page load events, instead jQuery Mobile provides a set of events that happen every time a page transition occurs. Each of these events provides references to the event and ui objects: pagebeforehide This event fires on the page being transitioned from, before the transition starts. ui.nextPage will be either the page being transitioned to, or an empty jQuery object if there is none. pagebeforeshow This event fires on the page being transitioned to, before the transition starts. ui.prevPage will be the page being transitioned from, or an empty jQuery object if there is none. pagehide This event fires on the page being transitioned from, after the transition finishes. ui.nextPage will be the jQuery object of the page being transitioned to, or empty if it does not exist. pageshow This event fires on the page being transitioned to, after the transition finishes. ui.prevPage will contain the jQuery object of the page being transitioned from, or empty if it does not exist. These four events provide useful analogs to the jQuery(document).ready() call for application page views. To use these events, you attach event listeners to the appropriate page using jQuery.bind(), jQuery.live(), or jQuery.delegate().

由于其异步特性,jQuery Mobile区分了页面加载事件与页面显示和隐藏事件。 以标准同步方式将文件加载到浏览器时,将发生页面加载事件。 当这样加载文件时,可以使用常规的jQuery(document).ready()方法,并且jQuery Mobile也会触发其他初始化事件。 如我们所见,单个HTML文件可能包含多个jQuery Mobile页面视图,并且用户可以在这些页面视图之间多次转换。 这些转换不会触发页面加载事件,而是jQuery Mobile提供了一组在每次页面转换发生时发生的事件。 这些事件中的每一个都提供对事件和ui对象的引用: pagebeforehide在转换开始之前,此事件在被转换的页面上触发。 ui.nextPage将是要转换到的页面,如果没有,则为空jQuery对象。 pagebeforeshow在转换开始之前,此事件在要转换的页面上触发。 ui.prevPage将是要转换的页面,如果没有,则为空的jQuery对象。 pagehide在转换完成后,此事件在要转换的页面上触发。 ui.nextPage将是要转换到的页面的jQuery对象,如果不存在则为空。 pageshow转换完成后,将在要转换的页面上触发此事件。 ui.prevPage将包含要转换的页面的jQuery对象,如果不存在则为空。 这四个事件为应用程序页面视图的jQuery(document).ready()调用提供了有用的类比。 要使用这些事件,请使用jQuery.bind(),jQuery.live()jQuery.delegate()将事件侦听器附加到适当的页面。

jQuery.bind(), jQuery.live(), and jQuery.delegate() are the different methods that jQuery has for binding handlers to event listeners. For more details, consult the jQuery documentation. Here we are using jQuery.bind():

jQuery.bind(),jQuery.live()jQuery.delegate()是jQuery用于将处理程序绑定到事件侦听器的不同方法。 有关更多详细信息,请查阅jQuery文档。 在这里,我们使用jQuery.bind()






For pages that are all contained within the same document, jQuery.bind() is sufficient. For pages that will be asynchronously loaded by jQuery Mobile, use jQuery.delegate() or jQuery.live().

对于全部包含在同一文档中的页面, jQuery.bind()就足够了。 对于将由jQuery Mobile异步加载的页面,请使用jQuery.delegate()jQuery.live()

Example 4: pagebeforehide Event
jQuery Mobile第2课13




  Script-tutorials: pagebeforehide Event
  
  
  
  
  


  

pagebeforehide Event

Page One

Go to Page Two

Header

pagebeforehide Event

Page Two

Go to Page One

Footer

示例4:pagebeforehide事件
jQuery Mobile第2课14




  Script-tutorials: pagebeforehide Event
  
  
  
  
  


  

pagebeforehide Event

Page One

Go to Page Two

Header

pagebeforehide Event

Page Two

Go to Page One

Footer

Example 5: pagebeforeshow Event
jQuery Mobile第2课15
jQuery Mobile第2课16




  Script-tutorials: pagebeforehide Event
  
  
  
  
  


  

pagebeforehide Event

Page One

Go to Page Two

Footer 1

pagebeforehide Event

Page Two

Go to Page One

Footer 2

示例5:pagebeforeshow事件
jQuery Mobile第2课17
jQuery Mobile第2课18




  Script-tutorials: pagebeforehide Event
  
  
  
  
  


  

pagebeforehide Event

Page One

Go to Page Two

Footer 1

pagebeforehide Event

Page Two

Go to Page One

Footer 2

JQUERY移动负载事件 (JQUERY MOBILE LOAD EVENTS)

Page load events are for external pages. Whenever an external page is loaded into the DOM, 2 events fire. The first is pagecontainerbeforeload, and the second will either be pagecontainerload (success) or pagecontainerloadfailed (fail). These events are explained in the table below:

页面加载事件是针对外部页面的。 每当将外部页面加载到DOM中时,就会触发2个事件。 第一个是pagecontainerbeforeload ,第二个将是pagecontainerload (success)pagecontainerloadfailed (fail) 。 下表说明了这些事件:

EventDescription
pagecontainerbeforeloadTriggered before any page load request is made
pagecontainerloadTriggered after the page has been successfully loaded and inserted into the DOM
pagecontainerloadfailedTriggered if the page load request fails. By default, it will show the “Error Loading Page” message
事件 描述
pagecontainerbeforeload 在发出任何页面加载请求之前触发
pagecontainerload 成功加载页面并将其插入DOM后触发
pagecontainerloadfailed 如果页面加载请求失败,则触发。 默认情况下,它将显示“错误加载页面”消息

Below is the code in main.html file

以下是main.html文件中的代码

Example 6: page load Event
jQuery Mobile第2课19
jQuery Mobile第2课20




  Script-tutorials: pagebeforehide Event
  
  
  
  
  


  

Load Events

Content data loaded or faile to load

External Page Exist No Page Exist

Footer

示例6:页面加载事件
jQuery Mobile第2课21
jQuery Mobile第2课22




  Script-tutorials: pagebeforehide Event
  
  
  
  
  


  

Load Events

Content data loaded or faile to load

External Page Exist No Page Exist

Footer

翻译自: https://www.script-tutorials.com/jquery-mobile-lesson-2/

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:FOF是什么?

下一篇:ruby lambda_Ruby中的Lambda

您可能感兴趣

  • React Hooks 完全指南,读React作者博文感悟(2W字精华)

    阅读 facebook大佬:Dan Abramov 的文章颇有感悟 大佬 github地址 github.com/gaearon 重点总结 useEffect 是同步的 状态是捕获的当前 props 和 state 可以通过 useRef 获取改变后的 props 和 state 依赖项 [] 不能欺骗 复杂的状态变化应该使用 useReducer 可以使用 useCallback 设置依赖...

  • webpack 原理分析与性能优化(2w字精华)

    webpack webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件。 Webpack 核心概念: Entry(入口):Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。 Module(模块):在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖...

  • 被编进小学教材的Python,到底有多强大?

    前两天刷朋友圈,发现浙大中文系教授在学Python,还带动了一批学生学习。 自从Python被编入小学教材、纳入高考,已经成为人人都要学的一项基本技能。 Python一直都处于热度不减的状态,最大的原因便是它简单易学的特性,而且可使用的范围实在太广。 不仅可以用于 自动化测试,前端开发,机器学习 等IT专业领域,而且更是当下职场人必不可少的一项技能。 来看看python到底对日常工作有什么帮...

  • 学习视频处理(四)上传文件-断点续传解决方案

    1、需求: 通常视频文件都比较大,所以对于媒资系统上传文件的需求要满足大文件的上传要求。 http 协议本身对上传文件大 小没有限制,但是客户的网络环境质量、电脑硬件环境等参差不齐,如果一个大文件快上传完了网断了,电断了没 有上传完成,需要客户重新上传,这是致命的,所以对于大文件上传的要求最基本的是断点续传。 2、断点续传: 引用百度百科:断点续传指的是在下载或上传时,将下载或上传任务(一个...

  • php面试题整理

    一 、PHP基础部分 1、PHP语言的一大优势是跨平台,什么是跨平台? PHP的运行环境最优搭配为Apache+MySQL+PHP,此运行环境可以在不同操作系统(例如windows、Linux等)上配置,不受操作系统的限制,所以叫跨平台 2、WEB开发中数据提交方式有几种?有什么区别?百度使用哪种方式? Get与post两种方式 区别: (1)url可见性:get 方式url参数可见,pos...

  • js实现问卷星根据答案自动填写2019年11月

    参考链接地址:https://www.cnblogs.com/FHC1994/p/11721723.html (过程需要翻墙,问卷星链接需要在浏览器打开,在微信直接打开的链接本脚本无法使用) ①安装脚本: 油侯脚本是一款免费的浏览器扩展和最为流行的用户脚本管理器,增强了用户对浏览体验的控制权。油侯脚本下载地址:http://www.tampermonkey.net/ ②点击图片中红框位置按钮...

  • 2019最新完整版Python学习教程(附学习路线图+学习视频+课程大纲+面试题)福利放送!

    最近有很多朋友问我如何尽快入门Python,还有些是想从别的职业转行过来,但都不太了解Python开发究竟需要学什么,究竟要从哪里学起,哪些是主流的Python技术等等,导致想学,但又很迷茫,不知从何下手。 花了一个多礼拜的时间,本期的Python学习教程给大家贴心的做了一个Python学习路线图(附学习视频资源——Python全栈+人工智能视频教程等)。 英雄--look 过来!(文末有福...

  • 面试超尴尬瞬间:我从没参与过一个全栈项目

    写简历是找工作的第一步,第二步就是面试,那么简历就是一块敲开面试大门的敲门砖,所以写简历的根本目的就是要体现出你的专业水平和项目经验,那么什么样的简历能够快速的抓住HR的眼球呢?作为前端工程师的简历来说,其中很重要的一点,就是要在简历当中至少有一个亮点的项目,这个项目既要凸显出你技术的深度和广度,又要与公司中的主流技术栈相吻合。那么接下来我们就一起来分析一下目前公司的主流技术栈有哪些?我们又...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。