3

Wordpressエディターのようなことをしたかったのです。
jQuery UIタブ（別のタブプラグインは使用したくないので、サイトのタブにはすでにjUIを使用しているため）を使用して、「WYSIWYG」と「HTML」のような名前の2つのタブを作成しました。タブヘッダーの下にTEXTAREAがあります。
次に、NicEditを使用したいと思いました。デモでわかるように、HTMLエディターでテキストエリアを「ラップ」および「アンラップ」できます。すべてが順調に見えましたが、問題は次のとおりです。

  • タブのHREFで「」または「＃」を使用すると、最初のタブがアクティブになり、2番目のタブがアクティブになりません。クリックできないため、SELECTイベントをアタッチできません。
  • 存在しないid（<a href="#notexist">...）を使用すると、もちろん例外がスローされます
  • 存在しない「ダミー」セレクター（実際には- <a href="dummy">...）を使用すると、タブヘッダーの下（タブとテキストエリアの間）に非常に大きなスペースが表示されます。たとえば、タブが新しい​​divを作成し、コンテンツとして「閉じた」ようになります。

私が欲しいのは、jQuery UIタブを使用して、コンテンツのない2つのタブを作成することです。これは、（選択解除）して、選択時にイベントを発生させることができるため、NicEditを使用できます。私は何が欠けていますか？

4

2 に答える 2

5

私は同じことを達成するための自然な方法を探していました (それが、このトピックでここにたどり着いた方法です)。

ここには答えがないので、最後に簡単な解決策を投稿します。

<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 は必要ありません。各タブの href は同じにすることができます。div ID として「listContect」を選択したのは、URL「yourSite/Page#listContent」が「#dummy」や「#tabs」よりも見栄えがするためです。

もちろん、jQuery を使用してアタッチすると onclick イベントはよりきれいになりますが、ここでインライン アプローチを使用する理由 (私のページに固有) があります。

于 2012-06-01T14:46:21.060 に答える
2

私はあなたの問題が何であるかを完全に理解しているかどうかわかりません。テキストエリアを1つだけ使用しようとしていると思います。私が間違っている場合は私を訂正してください。

とにかく、2つのテキスト領域を使用して、タブを切り替えるときにそれらを同期する方がよいと思います。

NicEditは、エディターインスタンスのコンテンツを取得/設定するための基本的なJavaScriptAPIを提供します。

私はあなたが見ることができるようにjsfiddleを作りました。

于 2011-12-13T11:10:29.223 に答える