Question

我想做像Wordpress编辑器这样的事情我带了jQuery UI标签（我不想使用另一个标签插件，因为我已经在网站上使用了jUI）并创建了两个名为“WYSIWYG”和“HTML”的标签。标签标题下有一个TEXTAREA 然后我想使用NicEdit - 正如你在演示中看到的那样，它可以用HTML编辑器“包装”和“解包”textarea。一切似乎都很好，但问题是：

当我在标签'HREF中使用“”或“＃”时，第一个标签处于活动状态，第二个标签不是 - 所以不可点击，所以我无法将SELECT事件附加到它
当我使用不存在的id（<a href="#notexist">...）时，它当然会抛出异常
当我使用不存在的“虚拟”选择器（真的 - <a href="dummy">...）然后在标签标题下（标签和textarea之间）显示相当大的空间，如标签创建新div并“关闭”它他们的内容。

我想要的只是使用jQuery UI标签只是为了创建两个没有内容的标签，可以（de）选择并在选择时触发事件，所以我可以使用NicEdit。我错过了什么？

Answer 1

我一直在寻找实现相同目标的自然方式（这就是我在这个主题中的意思）。

由于这里没有答案，我将发布我结束的简单解决方案：

<div id="tabs" class="ui-tabs">
   <ul>
      <li><a id="firstTab" href="#listContent" onclick="yourOwnHandler();">Text</a></li>
      <li><a href="#listContent" onclick="yourOwnHandler();">Text</a></li>
      <!-- Etc, etc... -->
   </ul>
   <div id="listContent"></div> 
</div>

所有想法都在空div中，无论jQuery适用于哪种类都没有显示 - 只是因为没有什么可以显示。

这接近你的3d方法，但问题是href不正确（没有＃），除非这是你想要的。

如您所见，您甚至不需要几个div - 每个tab href可以是相同的。我选择“listContect”作为div ID，因为URL“yourSite / Page＃listContent”看起来比使用“#dummy”或“#tabs”更好。

当然，如果使用jQuery附加，onclick事件会更漂亮，但是有理由（特定于我的页面）为什么我在这里使用内联方法。

Answer 2

我不确定我完全理解你的问题是什么。我猜你只想用一个textarea。如果我错了，请纠正我。

无论如何，我认为你最好使用两个textareas并在切换标签时同步它们。

NicEdit提供了一个基本的javascript API来获取/设置编辑器实例的内容。

我已经 jsfiddle 让你看。

没有href和/或内容的jQuery UI选项卡，只有事件？

2 个答案: