ratchet教程_Ratchet的Push.Js –多屏移动应用程序原型

本文主要是介绍ratchet教程_Ratchet的Push.Js –多屏移动应用程序原型，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

ratchet教程

Ratchet是一个框架，用于使用简单HTML，CSS和JS组件快速构建移动应用程序和原型。在我的上一篇文章Ratchet –轻松开发移动应用程序原型中，我们研究了开始使用Ratchet框架的步骤。

我们还研究了如何在一个屏幕上放置重要组件，例如标题栏，表格视图，V形，Toggles和Ratchicons。

在本文中，我们将学习如何在单个应用程序中创建多个屏幕并使用Ratchet的push.js脚本加载它们。

什么是push.js？

push.js是一段JavaScript代码，预加载在Ratchet的默认JS文件ratchet.js 。无需外部可下载文件。它通过AJAX在Ratchet应用程序中连接各种HTML页面。

在移动应用程序原型中使用AJAX驱动的push.js有两个主要优点： 与服务器的交互更快 ， 并且给人以单页应用程序的感觉 。

开发人员可以使用Ratchet创建移动应用程序，然后使用PhoneGap之类的软件将其转换为iOS和Android应用程序。因此， push.js可以帮助开发人员从服务器快速获取数据并将其显示在屏幕上。

应用程式

在本文中，我们将创建一个称为“ SitePoint的世界新闻 ”的新闻提要应用程序。

我知道它不存在，但是如果SitePoint认为它会很好。 ;）

这是此应用程序将具有的功能列表。

主屏幕将托管新闻列表。
每个新闻项将链接到另一个屏幕以显示新闻文章。
使用标题栏上的“后退”按钮返回主屏幕的功能。
每个新闻项都可以具有一个设置屏幕。
共享弹出窗口以共享新闻项。

除了仅检查push.js的用法push.js ，我们还将尝试其具有的一些出色功能。在上面列出的所有功能中， push.js将仅在功能编号2中使用，即加载不同的页面。它看起来和push.js用法一样简单，但有必要了解它的作用。

对于第一个功能，我们将使用带有V形燕尾形组件的Ratchet 表视图 。我们将列出各种带有相关图像的虚拟新闻项目。第三个功能是在应用程序的顶部栏图标上添加向左箭头，并带有指向主屏幕的链接。

我们将为设置屏幕创建一个模态组件。此屏幕将具有一个带有切换组件的表格视图，以代表每个设置项目。

最后一个功能，即共享选项，将使用Ratchet的popover组件实现。

让我们开始吧

从其官方网站goratchet.com下载Ratchet。将其内容提取到工作文件夹中，并在其中创建一个名为index.html的新文件。或从github下载最终代码。该页面将成为我们应用程序的第一个屏幕。

接下来，我们需要在该HTML页面中放入Ratchet推荐HTML标记。如果您不记得重要的meta标签和Ratchet HTML页面的基本结构，可以随时在此处找到它们。

index.html页面现在应包含以下标记：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SitePoint’s World News</title>
<!-- Sets initial viewport load and disables zooming  -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<!-- Include the compiled Ratchet CSS -->
<link href="css/ratchet.css" rel="stylesheet">
<!-- Include the compiled Ratchet JS -->
<script src="js/ratchet.js"></script>
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">SitePoint’s World News</h1>
</header>
<div class="content">
</div>
</body>
</html>

我已将页面标题更改为SitePoint的世界新闻 ，并删除了基本模板中.content div内的所有内容。

正如我在棘轮上的前一篇文章中所讨论的那样，棘轮的每个页面都应包含两个重要组成部分： 顶部栏和内容部分 。

顶部栏应为具有以下类的<header>元素： .bar和.bar-nav而内容部分应具有类.content 。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

有关运行棘轮应用程序的步骤，请参阅我的上一篇文章。有多种选择。

我们的目标是在内容部分填充一些虚拟新闻内容。我毫不客气地从Google新闻页面中挑选了一些新闻条目，以使应用程序具有逼真的感觉。

为了创建新闻列表，我们将使用Ratchet的“带有人字形的表格视图” HTML组件。因此，让我们继续将以下标记放入.content div中。

<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="navigate-right" href="#">
Nintendo apologises for lack of virtual equality
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
New Surface Pro reportedly debuting alongside Surface mini
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Microsoft share price: Software giant announces Office Mix
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Snapchat Settles FTC Charges That It Misled Users About Disappearing Photo ...
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Apple Loop: Beats and Earbuds, Nokia's Imaging Brains And US Legal ...
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Fed court overturns Oracle v. Google Java API copyright decision
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Say goodbye to Facebook's Poke and Camera
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Ford recalls Escape, C-Max and more vehicles to fix safety issues
</a>
</li>
<li class="table-view-cell">
<a class="navigate-right" href="#">
Chrysler recalls 780000 minivans over window switch
</a>
</li>
</ul>
</div>

表格视图是具有.table-view类的<ul>元素。表格视图中的每个<li>元素都应具有一个.table-view-cell 。在这里，我为每个新闻项使用了一个.navigate-right类的<a>元素。 .navigate-right类在每个.table-view-cell元素.navigate-right输出一个向右箭头。

到目前为止，我们的屏幕应该是这样的：

应用预览

快准备好了我们需要在每个项目旁边放置一个图像项目。该图像项必须放置在每个<a>元素内，以表示相应的新闻图像。这是图片的标记：

<img class="media-object pull-left" src="images/img1.jpeg">

该图像应具有class media-object以将其标识为Ratchet媒体组件。我使用类.pull-left来使图像相对于新闻标题左对齐。继续，将图像标签放置在标记中的每个项目内。我们应该得到一个如下所示的屏幕。

该应用程序的第二个屏幕

现在是时候创建另一个HTML页面，该页面将用于显示完整的新闻文章。在同一工作文件夹中创建另一个文件，名为article.html 。

我们将在此页面中放入来自Ratchet的相同基本HTML模板。因此，标记article.html应该是：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Post's Title</title>
<!-- Sets initial viewport load and disables zooming  -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<!-- Include the compiled Ratchet CSS -->
<link href="css/ratchet.css" rel="stylesheet">
<!-- Include the compiled Ratchet JS -->
<script src="js/ratchet.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-left-nav pull-left" href="index.html"></a>
<h1 class="title">Post's Title</h1>
</header>
<div class="content">
</div>
</body>
</html>

除了<header>元素中的附加链接之外，其他所有内容看起来都相同。我使用了Ratchet的Ratchicons在顶部栏中创建了一个左侧图标。该图标使用.icon和.icon-left-nav类生成。附加类.pull-left用于将图标放置在顶部栏的最左侧。由于此图标是链接元素，因此我们将index.html作为目标。因此，只要单击此按钮，便会将我们带回到主屏幕。

让我们在.content div中放入一些内容来表示文章。

<div class="content-padded">
<img class="media-object" src="images/img1.jpeg">
<h1>Nintendo apologises for lack of virtual equality</h1>
<p><i>‎5 hours ago by Syed Fazle Rahman</i></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>

.content-padded类用于在屏幕和内容之间创建一些填充。我放置了代表新闻项的图像，使用<h1>标签的新闻项标题和使用多个<p>标签的新文本表示新闻内容。

article.html应该如下所示。

应用程式的文章页面

现在我们已经准备好2个页面，让我们链接它们。这是我们实际使用push.js功能的地方。

再次打开index.html 。我们将第一个新闻项的href属性值更改为article.html 。默认情况下，Ratchet应用程序中的所有链接都是push.js驱动的链接。这意味着它们将使用AJAX获取。

Ratchet在当前页面和新获取的页面中查找.bar和.content div。然后，它使用新页面的内容更新旧页面中的div。因此，在新获取的页面中放置在.bar和.content div之外的任何内容都将被忽略。

在我们的例子中，它将使用article.html页面相应组件的内容更新index.html页面的顶部标题栏和.content div。因此，我们将看到更新的顶部栏和新闻文章，而不是新闻列表。

继续并单击主屏幕中的第一个新闻项，您将看到新闻文章正在加载。单击顶部栏上的“后退”按钮，它将带您回到主屏幕。

让我们在通过push.js更改屏幕时添加一些过渡。通过将名为data-transition的自定义属性添加到链接<a>元素，将过渡应用于应用程序。此属性采用三个不同的值： fade ， slide-in或slide-out 。让我们将slide-in效果添加到主屏幕中的第一个新闻项，如下所示：

<a class="navigate-right" href="two.html" data-transition="slide-in">
<img class="media-object pull-left" src="images/img1.jpeg">
Nintendo apologises for lack of virtual equality
</a>

还可以在article.html页面的后退按钮中添加slide-out效果。

<a class="icon icon-left-nav pull-left" href="index.html" data-transition="slide-out"></a>

继续并再次运行您的应用程序。取回新页面时应该看到滑入效果，而返回时应该看到滑出效果。根据Ratchet应用程序中包含的主题，这些效果可能看起来略有不同。当使用iOS主题时，将应用iOS平台过渡，而在Android主题中，将应用Android平台过渡。

而已。我们的应用程序几乎已经具备基本功能。还有2个功能需要实现：新闻文章上的共享选项和设置屏幕 。由于这些选项仅在第二个屏幕上可用，因此我们将在article.html创建它们。

共享选项是一个弹出窗口，显示在顶部栏中，带有一长串社交网络选项。我们将使用Ratchet的popover组件来创建它。让我们重新打开article.html 。弹出框组件的标记如下所示：

<div id="popover" class="popover">
<header class="bar bar-nav">
<h1 class="title">Share this</h1>
</header>
<ul class="table-view">
<li class="table-view-cell">Facebook</li>
<li class="table-view-cell">WhatsApp</li>
<li class="table-view-cell">Google+</li>
<li class="table-view-cell">Tweet</li>
<li class="table-view-cell">Pinterest</li>
<li class="table-view-cell">Reddit</li>
<li class="table-view-cell">Pocket</li>
<li class="table-view-cell">Email</li>
</ul>

每个弹出窗口都应具有标题和正文部分。标头用于为弹出框提供标题。就像应用程序的顶部栏一样，此标头还应该具有.bar和.bar-nav 。接下来，我们将使用Ratchet的表格视图组件列出共享网络集。这里是最大的问题！我应该在哪里放置此弹出框的标记？

如上所述，由于将使用push.js提取article.html push.js只会拉出顶部栏中和.content div中的内容。因此，以上弹出标记应放置在.content div的</div>上方。

弹出窗口是棘齿的隐藏组件之一。这意味着它们只有在被触发时才可见。因此，我们需要一个将触发弹出窗口的处理程序。

在article.html <header>组件中的文章标题旁边放置一个共享图标。该图标将成为我们触发共享弹出窗口的处理程序。现在， article.html顶部栏的标记应为：

<header class="bar bar-nav">
<a class="icon icon-left-nav pull-left" href="index.html" data-transition="slide-out"></a>
<h1 class="title">Nintendo apologises <a class="icon icon-share" href="#popover"></a></h1>

处理程序的href属性应包含目标弹出框的ID。这里的值是#popover 。共享图标是一个Ratchicon，使用类icon和icon-share进行显示。我们去检查它在我们的应用程序中是否正常工作。它应该如下所示。

共享弹出窗口

惊人！是不是我们不必为该弹出窗口编写一行CSS和JS。致敬棘轮团队。

现在该创建设置屏幕了。该屏幕将是棘轮模式。就像弹出窗口一样，模态默认情况下也是不可见的。必须触发它们才能使其可见。让我们在article.html屏幕中创建一个浮动的底部栏。我们将在其中放置一个设置图标，该图标将作为处理程序来触发模式屏幕。

要创建浮动栏，请在弹出框的标记下方添加以下标记。

<div class="bar bar-standard bar-footer">
<a class="icon icon-gear pull-right" href="#myModalexample"></a>

默认情况下，浮动条是可见的。我放置了一个齿轮图标来代表设置按钮。它的href属性包含即将创建的模态组件的ID。 article.html屏幕现在将如下所示：

向我们的文章页面添加图像

模态组件的标记如下：

<div id="myModalexample" class="modal">
<header class="bar bar-nav">
<a class="icon icon-close pull-right" href="#myModalexample"></a>
<h1 class="title">Settings</h1>
</header>
<div class="content">
<ul class="table-view">
<li class="table-view-cell">
Don't show such articles
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Lorem Ipsum Setting 1
<div class="toggle active">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Lorem Ipsum Setting 2
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
</div>

就像弹出框组件一样，模态也具有标头区域和.content区域。标题区域用于为模态赋予标题。在内容区域中，我使用了Ratchet的“带切换的表格视图”组件。因此，用户可以根据他的要求切换特定的设置项目。

模态屏幕如下所示：

设置弹出

模态组件的标记也应放置在article.html页面的.content div中。

防止push.js

如果您希望应用程序中的某些链接不应该使用push.js ，则可以在此类链接元素中使用data-ignore自定义属性（其值为push 。

例如：

<a href="http://www.sitepoint.com" data-ignore="push">SitePoint<a>

上面的链接会将您从应用程序重定向到目标URL。

结论

最后，我们有一个使用Ratchet的基本新闻源应用程序。它具有通常在大多数本机应用程序中发现的功能。我们仅使用HTML，CSS和JS技术就能够创建高保真应用程序。如果使用PhoneGap之类的框架集成此原型，则它可以成为成熟的混合应用程序，并可以作为本地应用程序与iOS和Android设备一起使用。

希望您像我一样喜欢创建这个虚拟应用程序。我期待使用AngularJS，ExpressJS和MongoDB增强此类应用程序的功能，并使其成为功能齐全的应用程序。如果您对此主题有任何疑问，可以直接使用我的Twitter句柄（ @fazlerocks ）鸣叫我，或在下面发表评论。我很乐意回答他们。