react joyride_初学者基础：Joyride，互换，桌子和面板

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-06-04 11:38:20 发布 929 阅读 AI 写同款· GEO 优化 ›

react joyride

让我们通过查看Joyride插件进一步增加我们的基金会武库，该插件可帮助引导用户浏览您的网站。我们还将查看定价表，标准表和交换表；一种新颖的响应式图像工具。我们将通过一个简单的模板介绍这些功能的实现，您可以下载并使用它们。

我们将从本教程中介绍的最直接的功能开始。

面板

在几乎所有元素上添加一类“面板”会将其变成浅色块。但是，不仅是任何类型的块，因为这些面板使用边框样式，因此将填充合并到对象的宽度中。这是一种非常方便的方法，因为它可以使您更加直观地控制元素尺寸。

<div class="large-6 columns">
	<div class="panel">		
		<p id="firstStop">We have a simple selection of hosting packages for you to choose from, these will work fantastically for any company. With ultra fast mySQL database connections, content management systems really fly. Add to this 24/7 customer support and 99.9% uptime and you've got a great hosting package.</p>		
	</div>
</div>

为了说明这一点，我使用图像和面板完美对齐地创建了两列布局。

定价表

拥有/建立网站的主要原因之一是为了出售东西。因此，定价表在互联网上很普遍，并且已经使用了很多年，因此Foundation当然涵盖了这一领域。每个表实际上是一个无序列表，其中包含列表项和一些位置适当的类。

<ul class="pricing-table">
	<li class="title">Startup</li>
	<li class="price">$9.95</li>
	<li class="description">An awesome package to get any company onto their feet. With instant setup and magic money making plugins.</li>
	<li class="bullet-item">1 Database</li>
	<li class="bullet-item">5GB Storage</li>
	<li class="bullet-item">20 Users</li>
	<li class="cta-button"><a class="button round" href="#">Buy Now</a></li>
</ul>

ul标记本身具有“定价表”类，而在其中，您可以选择使用“标题”，“价格”，“描述”，“项目符号”和“ cta按钮”。唯一需要的其他自定义内容就是您的内容。您可能需要一排排排在一起，以创建更多的价格比较表。

标准表

定价表很棒，但是有时您会需要一个实际的html表来显示数据。在Foundation中进行设置非常容易，因为根本没有真正的设置。只需正常添加表格标记，即可处理其样式。您可能要做的唯一一件事就是增加列宽以使列均匀。

<table>
  <thead>
    <tr>
      <th width="200">Startup</th>
      <th width="200">Enterprise</th>
      <th width="200">Global Corporation</th>
    </tr>
  </thead>
  <tbody>
  
  	<tr>
  		<td>1 Database</td>
  		<td>5 Database</td>
  		<td>10 Database</td>
  	</tr>
  	
  	<!--more rows-->
  	
  	<tr>
  		<td>No Backups</td>
  		<td>50GB Backups</td>
  		<td>100GB Backups</td>
  	</tr>
  </tbody>
</table>

互换处

尽管Foundation中的所有图像默认情况下都是流畅的，但有时您会遇到问题-RWD中图像的整个主题正在进行中。

而且，我想补充一点，我想这是我们行业中任何人都可以谈论一个多小时的“仅图像”的想法。 #RWD

— Dave Rupert（@ davatron5000），2013年5月14日

当图像中有文字时，就会出现这样的问题。最近，Zurb添加了一个名为“ Interchange”的新插件。它的工作很简单-当屏幕尺寸达到特定点时，将您选择的图像替换为另一幅图像。它通过添加一个特殊属性（即“数据交换”）来工作。这用于容纳图像源更改的选项。

<img src="small.jpg" data-interchange="[smallest.jpg, (default)], [smallest.jpg, (screen and (max-width: 568px))], [small.jpg, (small)], [med.jpg, (medium)], [large.jpg, (large)]">

在这里，我利用了属性中可用的许多选项。有很多参数，例如，您可以选择设置自定义点来切换图像。

这不是性能最高的插件，因为更改可能需要一到两秒钟，希望Zurb将来会解决此问题。该插件的主要优点之一是节省了在移动设备上的加载时间。您可以加载同一图像的较小的优化版本，而不是在3G连接上加载大量的jpeg，从而释放带宽以加载页面的其余部分。

Joyride

到目前为止，在本系列的每个部分中，我们都介绍了Foundation中可用JavaScript插件，但在本例中，我们将介绍两个。

在某些情况下，使用户进入用户界面的神奇神秘之旅非常有用。例如，谷歌在其许多应用程序中启动新功能时就这样做。通过逐步指导用户，您可以解释每个部分的功能以及它的发展方向。 Joyride通过使用一个列表来解决此问题，该列表将每个列表项（持有您的游览站）与页面上的元素相结合。该列表可以是有序列表，也可以是无序列表，但是必须同时具有“ joyride-list”类和“ data-joyride”属性。

<ol class="joyride-list" data-joyride>
	<li data-id="firstStop" data-text="Go">
		<p>Let's get started, here we have an intro.</p>
	</li>
	<li data-id="numero1" data-class="custom so-awesome" data-text="Next">
		<h4>First Stop</h4>
		<p>Here we use the new interchange function to change images based on screen size.</p>
	</li>
	<li data-id="numero2" data-button="Next" data-options="tipLocation:top;tipAnimation:fade">
		<h4>Second Stop</h4>
		<p>We are using pricing tables here to display a list of services from a hosting company.</p>
	</li>
	<li data-id="numero3" data-button="Next" data-options="tipLocation:top;tipAnimation:fade">
		<h4>Third Stop</h4>
	<p>This is just a link but it opens a modal with a standard table inside, exciting eh?</p>
		</li>
	<li data-button="End">
		<h4>End Of The Line</h4>
		<p>Our tour ends here, please remember to take all your belongings with you on your way to the exit.</p>
	</li>
</ol>

每个列表项都需要自己的“数据ID”，该“数据ID”必须与与其耦合的元素ID相匹配。如果您的旅行的第一站是h2标签，那么您的data-id可以是“ data-id =” title“”。您的h2需要一个ID为“ title”。简单。

除了此基本设置之外，您还需要添加“下一步”按钮，以便用户可以轻松地从一个停靠站导航到下一个停靠站。通过将另一个属性附加到列表项来添加这些属性； “数据=文本”。在上面的示例中，我使用“开始”开始，使用“下一步”继续。

Joyride有很多选择，有些可以直接添加到每个列表项。在上面，我使用了data-options="tipLocation:top;tipAnimation:fade" ，您可能已经猜到了，这会将巡视点分配到耦合元素的顶部，使其淡入。还有更多参数可以传递关于JavaScript初始化。您也可以使用Cookies插件，或者如果您的用户已登录，则保存一个选项，仅显示一次巡回演出。