iWork には、テキストを強調表示してから、そのテキストにコメントをタグ付けする機能があります。コメントは、強調表示されたテキストに線でリンクされます。
このようなものがJQUERYで実装できるかどうか興味があります。A. ユーザーがテキストを変更したときに線を描画して更新する方法 B. テキストを強調表示して何らかの方法でタグ付けする方法は?
これが JQUERY とアイデアやプラグインで可能であるかどうかについて、あなたの考えを聞いて、私を正しい方向に向けたいと思います.
4 に答える
4
はい、これを達成するのはそれほど難しくありません。
最初 - select イベントを取得する必要があります
select イベントは、ユーザーが要素内でテキストを選択すると、その要素に送信されます。このイベントは、フィールドとボックスに限定されています。
たとえば、次の HTML を考えてみましょう。
<form>
<input id="target" type="text" value="Hello there" />
</form>
<div id="other">
Trigger the handler
</div>
イベント ハンドラーは、テキスト入力にバインドできます。
$('#target').select(function() {
alert('Handler for .select() called.');
});
参照: http://api.jquery.com/select/
2 番目 - タグを作成する必要があります
CSS
<style>
body{font-size:12px; font-family:"Trebuchet MS";}
#content1{
border:1px solid #CCCC33;
padding:10px;
margin-top:10px;
width:500px;
}
</style>
(X)HTML
<a href="#" id="click">Something Here</a>
<div class="box">
<div id="content1">
<p><a href="#" id="close">Close</a></p>
</div>
</div>
</body>
ご覧のとおり、これは非常に単純な例ですが、これを使用することはほぼ無限です!
次に、すべてのファンキーな処理を行う jQuery コードについて説明します。これから行うのは、Content1 Div 要素の表示と非表示です。そのために、以下の jQuery コードを作成しました。
$(document).ready(function(){
$('#content1').hide();
$('a').click(function(){
$('#content1').show('slow');
});
$('a#close').click(function(){
$('#content1').hide('slow');
})
});
前に述べたように、$(document).ready(function()} は、ページ内のコードを実行する前にページを操作する準備ができるまで待機する関数です。
次の行 $('#content1').hide(); 最初に Content1 Div を非表示にします。jQuery と CSS の間には ID が使用されていることに注意してください。ただし、括弧内の引数とまったく同じ方法でクラスを使用できます。
次に、リンクされたテキストがクリックされたときに DIV を「表示」するコードの次のセクションに進みます。$('a).click(関数(){}); これは、「クリック」関数を呼び出してから、Content1 Div で「表示」効果を呼び出しています。
コードをもう一度読んで、ロジックを把握してください。私もコツをつかむのに少し時間がかかりました!!!
表示および非表示になっている Div 内には、Div を非表示にする別のテキスト リンクがあります。
$('a#close').click(function(){
$('#content1').hide('slow');
})
これを見ると、ID が「close」の「a」（リンク）要素は、Content 1 Div で「hide」効果を呼び出すことがわかります。
参照: http://dreamweaverspot.com/jquery-show-and-hide-a-div/
3番目 - 線を引きます
jQuery SVG のプラグインをダウンロード - http://jquery.com/plugins/project/svg
あなたの線を引く
$("#example1").drawLine(0, 0, 220, 45);
参照: http://www.openstudio.fr/Library-for-simple-drawing-with.html
それでおしまい。すべてを組み合わせて、好きなように仕上げてください。
于 2010-02-18T19:11:35.583 に答える
1
Todd は基本的に、アプリケーションの作成を除いて、ここで行う必要があるほとんどすべての概要を説明しています。メモリには 2 つのリストが必要です。コメントの 1 つとタグの 1 つ、および DOM で 2 つを関連付ける方法 (一意の ID)。ウィンドウのスクロール位置に対して要素を移動する方法について、同様の投稿をチェックすることをお勧めします。任意の時点でどのタグが表示されているかを判断する何らかの方法が必要になります。これは、標準の jquery 位置関数の 1 つを使用して行うことができると思います。2 つの要素間に線を引く場合も同じことが必要です。簡単な検索でhttp://api.jquery.com/position/が得られます. どのタグが表示されるかを判断したら、コメント UI 要素に適切なコメントを再入力し、それらの位置を見つけて、タグ付けされた要素からコメント要素まで線を引くことができます。コメントも編集できるようにする必要があり、フォームを送信せずに保存することを期待している場合は、データベースと、編集が完了したらコメントを保持するための ajax 呼び出しが必要になります。
テキスト入力フィールドについて話している場合、それは非常に難しくなり、標準の入力要素を使用して簡単に行うことはできないと思います。この機能の一部 (YUI?) を公開している可能性があるリッチ テキスト エディターの 1 つを調べて、プラグインと組み合わせます。
于 2010-02-21T19:46:03.413 に答える
1
ツールチップのような単純なものが答えになるかもしれません。過去にqtipプラグインを使用したことがあり、探している効果があります。
ウェブサイトを見てみましょう：
http://craigsworks.com/projects/qtip/
qtip を使用すると、情報をドキュメントの上に浮かせておくのに最適です。
ドキュメントのテキストの特定の部分を選択することに関して、Todd には最良の方法があり、私はこの SO の質問も見つけました。
要素内のテキストを選択する (マウスで強調表示するのと同様)
テキストを選択したら、それをスパンでラップしid、qtipヒントを行として使用します (問題のスパンを指します)。ここで説明するように、これはオンザフライでスタイルを設定し、任意のサイズにすることができます。
http://craigsworks.com/projects/qtip/docs/tutorials/#tips
これは qtip プラグインを使用する興味深い方法です。この情報が役に立てば幸いです。
マーカス。
于 2010-02-19T23:36:19.353 に答える
0
線を引くことについて、私は自分の質問と回答からコードを利用できるようにしました
jQuery Field Selection プラグインを使用できる場合、TAG 部分の継ぎ目は十分に簡単です。
それが役に立てば幸い。
于 2010-02-25T16:49:50.963 に答える