1

CMS (Alterian) からのコンテンツに対して、jQueryTools を使用してツールチップ機能を実装しようとしています。アイデアは、編集者がテキスト内の単語をツールチップが必要な場所にハッシュと括弧でマークすることです。つまり、「#triggerword (ツールチップ コンテンツ)」です。リクエスト時に、HTML は正規表現を使用して変更され、ツールチップの div はそれぞれの後に挿入されます。トリガーワード、次のように:

...replace(/#(\w[\s\S]*?)\(([\s\S]*?)\)/g, "<span class='tipword'>$1</span><div class='tooltip'>$2</div>");

これは多くの場合うまく機能しますが、トリガー ワードは P タグ内にも表示される可能性があります。編集者がテキストを書き、これらは CMS によって HTML として保存されます。P タグの使用を制御できません。P タグ内に div を配置すると、div が挿入される前に P タグが自動的に閉じられます。もちろん、これはテキストのレイアウトを壊し、トリガーワードとツールチップ div が隣接していないため、ツールチップは機能しません。

CMS からの HTML が次のような場合:

<P>
    some text with a #triggerword (it's a word that triggers a tooltip to appear)
    and the text goes on....
</P>

次に、ツールチップの変換を行った後、DOM は次のように読み取ります。

<P>
    some text with a <SPAN class='tipword'>triggerword</SPAN>
</P>
<DIV class='tooltip'>it's a word that triggers a tooltip to appear</DIV>"); 
and the text goes on....
<P></P>

...そして、レイアウトとツールチップが壊れています。

私に提案された解決策は、ツールチップのスパンと div を object-tag でラップすることです。

...replace(/#(\w[\s\S]*?)\(([\s\S]*?)\)/g, "<object><span class='tipword'>$1</span><div class='tooltip'>$2</div></object>");

これは確かに機能します！Pタグにも！Firefox および Chrome 用ですが、IE 用ではありません。IE は DOM を変更し、ヒントの HTML を object-tag の altHtml プロパティに入れます。

<object altHtml="<span ..... /div>"/>

私の (社内の) ユーザーの 90% 以上が IE を使用しているため、そのブラウザーを無視することはできません (好きなだけ)。

次に何を試すべきかについて誰か提案がありますか? あなたたちは私の最後の手段です。素敵なツールチップ div を忘れて、代わりに標準のブラウザー ツールチップ (タイトル属性) に頼らなければならなくなるのではないかと心配しています。

ありがとう！

バート

4

1 に答える 1

1

以下の回答は、元の漠然とした回答から、特定のアプローチに同意するように編集されています。

主な問題は、pにブロックレベルの要素 (別のp, divなど)を絶対に含めることができないことです。このようなページの chrome では、ブラウザーが html を再マングルし、標準の .html 検証ツールでこれを把握することは困難です。ですから、これに注意してください。

したがって、基本的にツールチップの内容を別の場所に配置する必要があります。最も単純で最もエレガントなアプローチは、ツールチップに属するdivを文字列に収集し、それらを Web ページの下部に非表示として追加することだと思います。(私は Alterian を使用したことはありませんが、プラグインのようなものをサポートする必要があると思いますか?) 次に、クリック/ホバー時にこれらの div を移動して表示します。このような Web ページが次のように表示されることを示してみました: http://jsfiddle.net/NaDeh/1/これは数十行の長さです。

原則として、div の内容を JavaScript 文字列などの別の場所に配置することもできますが、慎重にエスケープする必要があります。または別のページで ajax をロードする必要がありますが、そのような余分なロードは必要ないようです。

于 2011-07-01T15:55:24.827 に答える