iWorkのコメント機能は、jQueryのを使用して実装することが可能です。この
https://stackoverflow.com/questions/2246874
-
20-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
iWorkのは、テキストをハイライト表示し、そのテキストにコメントをタグ付けする能力を持っています。コメントは、その後強調表示されたテキストの行とリンクされます。
このような何かがjQueryので実装することができれば、私は好奇心が強いです。どのような私は困惑していることです。 線を描画し、ユーザーがテキストを変更したとき、それは更新するようにするにはどのようにA. テキストをハイライト表示し、それが何らかの形でタグ付けされてい方法B.？
Idは、これは正しい方向に私を指すようにjQueryと任意のアイデアやプラグインでも、可能な場合にお考えを聞くのが大好き。
解決
はい、これは達成することは非常に難しいことではありません。
まず - あなたは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.');
});
SEE： http://api.jquery.com/select/する
二 - あなたは
タグを作成する必要があります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');
})
});
$（ドキュメント）.ready（関数は、（）}ページは、その内部のコードを実行する前に操作される準備ができるまで待機する関数である。
次の行を$（ '＃のcontent1'））（非表示にします。;で開始するContent1本部は非表示にします。その中にjQueryとCSSとの関係がどのようにあることに注意してください使用して、IDがこのケースですが、それは括弧内の引数として、まったく同じ方法でクラスを使用することができます。
私たちは、その後、リンクされたテキストをクリックしたときにDIVを「表示」というコードの次のセクションに移動します。 $（A '）.click（関数（）{}）;これは、「クリック」機能を呼び出した後、Content1本部の「ショー」効果を起動されます。
もう一度コードを読んで、あなたは、論理上のグリップを得ることを確認してください。それだけでなく、それのこつを得るために私に少し時間がかかりました!!!
事業部を非表示にします別のテキストリンクがある示し、非表示になっていることを本部内ます。
$('a#close').click(function(){
$('#content1').hide('slow');
})
は、あなたがのIDを持つ「A」（リンク）要素がコンテンツ1本部に「隠す」エフェクトを呼び出す「閉じる」ことがわかります。
SEE： http://dreamweaverspot.com/jquery-show-そして、非表示--DIV / の
サード - あなたの線を引きます。
jQueryのSVG用のプラグインをダウンロードしてください - http://jquery.com/plugins/project/svg
あなたの線を引きます。
$("#example1").drawLine(0, 0, 220, 45);
SEE： http://www.openstudio.fr/Library -for-簡単な描画-with.htmlする
それはそれです。ちょうどあなたがそれをしたいどのようにそれを得るために、すべてのそれを一緒に入れています。
他のヒント
たぶん、ツールチップのような単純なものは、あなたの答えである可能性があります。私は過去に、のQティップのプラグインを使用している、そしてそれはあなたが探している効果を持っています。
のウェブサイトを見てみましょう。
http://craigsworks.com/projects/qtip/する
文書の上に浮いて情報を保持するために完璧に動作しますQティップを使用します。
文書のテキストの特定の部分を選択することに関しては、トッドが最善の方法を持っている、と私はまた、このSO質問を見つけました
要素内のテキストを選択します（マウスを使ってハイライト表示に似）の
私はidとスパンでそれをラップし、ライン（問題のスパンを指す）としてQティップの先端をの使用することになり、選択したテキストを持っていたら。ここで説明するように、これは、その場でスタイルと任意のサイズにすることができます：
http://craigsworks.com/projects/qtip/docs/tutorials/ #tipsする
このは、Qティッププラグインを使用するための興味深い方法ですが、私はこの情報の一部は、あなたを助けている願っています。
マーカスます。
トッドは基本的にあなたがあなたのためのアプリケーションを書くことは別にここで行う必要があり、ほとんどすべてのものを概説しています。あなたは、メモリ内の二つのリストを持っている必要があります。コメントの一つとタグの一つであり、DOM（固有のID）に2を関連付ける方法。私は、ウィンドウのスクロール位置に対して要素を移動する方法についての同様の記事をチェックアウトすることをお勧め。あなたは、任意の時点で表示されているタグを決定するいくつかの方法が必要になるでしょう、と私はあなたが標準のjQueryの位置の機能の一つであることを行うことができます疑います。同じことは、二つの要素の間に線を描画するために必要とされています。単純な検索は http://api.jquery.com/position/ を生み出します。あなたが表示されたタグが決定したら、その後、適切なコメントとコメントのUI要素を再移入自分の位置を見つけ、コメント要素にタグ付けされた要素から線を引くことができます。あなたもコメントを編集できるようにする必要があり、そしてあなたが提出フォームせずに保存するためにそれらを期待している場合、あなたは編集が完了したら、コメントを持続するために、データベース、およびAJAX呼び出しを必要としています。
テキスト入力フィールドについて話している場合は、、そのは難しく、多くのことになるだろうと私はあなたが非常に簡単に、標準入力要素のいずれかでそれを行うことができるとは思いません。私は、この機能の一部を公開（YUI？）とプラグインとそれを組み合わせることができるそこにリッチテキストエディタのいずれかをチェックアウトします。
