Question

我有一个客户希望创建一个非常类似于http://www.facebook.com/enchantment

的Facebook页面

在“附魔”页面中，您可以看到有一个子标签列表，“结界，模糊，摘录，顺序”。我希望创造相同的风格，但我似乎无法弄清楚如何。我查看了代码，看起来他们正在使用主要标签的“FBML静态”应用程序，并且有大量的javascript来显示和隐藏我非常怀疑的标签都是手工编写的。

有没有人有这方面的经验？提前谢谢。

Answer 1

您必须通过开发者页面中的我的应用程序链接创建Facebook应用程序。填写完所有字段后，您的应用页面应该已启动并运行。

现在您需要开始在您的网站上开发实际的应用程序（您必须在应用程序设置中指定链接）。浏览开发人员文档，因为它们有很好的文档。

因此，为了实际创建这些选项卡，它实际上非常简单，您只需要使用FBMls clicktoshow和clicktohide属性。基本上你只需要以下代码：

<a href="#" clicktoshow="nav1" clicktohide="nav2,nav3">Link 1</a>

<a href="#" clicktoshow="nav2" clicktohide="nav1,nav3">Link 2</a>

<a href="#" clicktoshow="nav3" clicktohide="nav1,nav2">Link 3</a>

<div id="nav1">
//content for first tab
</div>

<div id="nav2">
//content for second tab
</div>

<div id="nav3">
//content for third tab
</div>

当Facebook'导入'时（仅通过FMBL，我不确定这是否适用于iframe）它可以方便地完成所有工作，并将上述链接转换为：

   <a href="#" clicktoshow="nav1" clicktohide="nav2, nav3" class="test" 
onclick="(new Image()).src = '/ajax/ct.php?app_id=7146470109&amp;action_type=3&amp;post_form_id=fd583a515fe76b1d3d300e974aba931d&amp;position=16&amp;' + Math.random();FBML.clickToHide(&quot;app7146470109_nav2&quot;);
FBML.clickToHide(&quot;app7146470109_nav3&quot;);
FBML.clickToHide(&quot;app7146470109_nav4&quot;);FBML.clickToHide(&quot;app7146470109_nav5&quot;);FBML.clickToHide(&quot;app7146470109_nav6&quot;);
FBML.clickToHide(&quot;app7146470109_nav7&quot;);FBML.clickToHide(&quot;app7146470109_nav8&quot;);FBML.clickToShow(&quot;app7146470109_nav1&quot;);return false;">Test</a>

但是，你只需要担心第一部分，因为Facebook负责第二部分。如您所见，这是一个相当简单的过程。

Answer 2

您无法直接看到代码，因为用FBML编写的代码在传递到浏览器并转换为HTML之前会被Facebook解析;这就是你看到很多JavaScript的原因。

实际上它看起来并不复杂，所以我相信它实际上是用JavaScript手工编写的。

Answer 3

他们可能只是捕获点击事件，只是根据它显示和隐藏不同的div。您可以创建一个静态FBML选项卡，并在其中执行类似的操作：

<ul>
<li><a id="afoo" href="#foo" onclick="gotoFoo(this); return false;">Foo</a></li>
<li><a id="abar" href="#bar" onclick="gotoBar(this); return false;">Bar</a></li>
</ul>

<div id="foo">
This is content of the foo tab
</div>
<div id="bar" style="display:none;">
This is content of the bar tab
</div>

<script>
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
var afoo = document.getElementById('afoo');
var abar = document.getElementById('abar');

var gotoFoo = function(target) {        
  abar.removeClassName('selected');   
  bar.setStyle({display: 'none'});
  afoo.addClassName('selected');    
  foo.setStyle({display: 'block'});
};

var gotoBar= function (target) {
  afoo.removeClassName('selected');   
  foo.setStyle({display: 'none'});
  abar.addClassName('selected');    
  bar.setStyle({display: 'block'});
};

</script>

我没有为你创建任何样式，但上面的代码是隐藏并显示“foo”和“bar”div，具体取决于你点击的内容。它还将类名“selected”添加到单击的锚标记中，以便您可以设置一些样式以提供关于当前活动的选项卡的可视提示。你肯定想要添加一些样式来实现这一点。

我希望这会有所帮助。

Facebook FBML问题

3 个答案: