iWork Kommentar Fähigkeit, dies möglich zu implementieren JQUERY mit

Question

iWork hat die Fähigkeit, Text markieren und dann einen Kommentar zu diesem Text zu markieren. Der Kommentar dann mit einer Linie mit dem markierten Text verknüpft.

Ich bin gespannt, ob so etwas in JQUERY umgesetzt werden könnte. Was hat mich verwirrt ist: A. Wie eine Linie zeichnen und ihn aktualisieren, wenn ein Benutzer den Text ändert B. Wie Text markieren und haben es irgendwie markiert?

Id Liebe Ihre Gedanken zu hören, wenn dies ist sogar möglich, mit JQUERY und alle Ideen oder Plugins mich in die richtige Richtung zu zeigen.

Answer 1

Ja, das ist nicht sehr schwer zu erreichen.

Erste - Sie müssen das select-Ereignis erhalten

Das select-Ereignis wird ein Element gesendet, wenn der Benutzer eine Textauswahl in er macht. Dieses Ereignis ist auf Felder und Boxen.

Betrachten wir zum Beispiel die HTML:

<form>
  <input id="target" type="text" value="Hello there" />
</form>
<div id="other">
  Trigger the handler
</div>

Der Event-Handler an die Texteingabe gebunden werden kann:

$('#target').select(function() {
  alert('Handler for .select() called.');
});

SEE: http://api.jquery.com/select/

Second - Sie benötigen einen Tag erstellen

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>

Wie Sie sehen können, ist es ein sehr einfaches Beispiel, aber die Verwendung dieser es fast keine Grenzen gesetzt!

Jetzt für die jQuery-Code, macht alle funky stuff. Was ich zu tun ist, anzeigen und ausblenden die Content1 Div-Element. Dafür habe ich die jQuery-Code unten erstellt, einen Blick haben, dann werde ich durch sie gehen.

$(document).ready(function(){

$('#content1').hide();

$('a').click(function(){
$('#content1').show('slow');
});

$('a#close').click(function(){
$('#content1').hide('slow');
})

});

erwähnt Wie ich bereits die $ (document) .ready (function ()} ist eine Funktion, die wartet, bis die Seite fertig ist, bevor die Ausführung des Codes im Innern manipuliert werden.

Die nächste Zeile $ ( '# content1') hide (). Blendet die Content1 Div zu beginnen. Beachten Sie, wie es eine Beziehung zwischen jQuery und CSS in dem heißt verwendet die ID dieser Fall ist, aber es könnte eine Klasse auf genau die gleiche Art und Weise, wie das Argument in der Klammer verwenden.

Wir haben dann auf den nächsten Abschnitt des Codes bewegen, dass „Shows“ die DIV, wenn der verknüpften Text angeklickt wird. $ ( 'A) .click (function () {}); Dies ruft die „Klick“ Funktion und dann die „Show“ Effekt auf die Content1 Div aufgerufen wird.

Lesen Sie den Code erneut ein und stellen Sie sicher, dass Sie einen Griff auf die Logik zu bekommen. Es dauerte eine Weile, die hängen davon sowie zu bekommen !!!

Innerhalb der Div, die angezeigt wird, und versteckte es gibt einen anderen Text-Link, der die Div verbergen wird.

$('a#close').click(function(){
$('#content1').hide('slow');
})

Wenn Sie auf diese können Sie sehen, dass jedes „a“ (Link) Element mit der ID „close“ wird aufrufen, um die „verstecken“ Auswirkung auf den Inhalt 1 Div.

SEE: http://dreamweaverspot.com/jquery-show- und-hide-a-div /

Third - Zeichnen Sie Ihre Linie

Download Plugin für jQuery SVG - http://jquery.com/plugins/project/svg

Zeichnen Sie Ihre Zeile

$("#example1").drawLine(0, 0, 220, 45);

SEE: http://www.openstudio.fr/Library -für-simple-Zeichnung-with.html

Das ist es. Setzen Sie sich einfach alle zusammen, um es zu bekommen, wie Sie es wollen.

Answer 2

Vielleicht etwas so einfach wie ein Tooltip könnte Ihre Antwort sein. Ich verwendet habe, die qtip Plugin in der Vergangenheit, und es hat die Auswirkungen Ihres suchen.

Werfen Sie einen Blick auf die Website:

http://craigsworks.com/projects/qtip/

qtip Mit perfekt Informationen für die Aufbewahrung funktionieren würde über dem Dokument schwebte.

Im Hinblick auf die Auswahl bestimmter Teile der Dokumente Text, Todd hat die beste Methode gibt, und ich fand auch diese Frage SO:

Auswählen von Text in einem Element (ähnlich mit der Maus zu markieren)

Sobald Sie den Text habe ich es in einer Spannweite mit einem id wickeln würde, und verwenden Sie die qtip Spitze als eine Linie (auf die Spanne in Frage zeigt). Dies könnte im Fluge gestylt werden und jede Größe, wie hier beschrieben:

http://craigsworks.com/projects/qtip/docs/tutorials/ #Tips

Dies ist eine interessante Art und Weise die qtip Plugin zu nutzen, ich hoffe, einige dieser Informationen hat Ihnen geholfen.

Marcus.

Answer 3

Todd hat im Grunde fast alles skizzierte Sie brauchen hier beiseite zu tun, vom Schreiben der Anwendung für Sie. Sie müssen zwei Listen im Speicher haben; einer von Kommentaren und einer von Tags und eine Möglichkeit, die zwei in der DOM (eindeutige IDs) zu verknüpfen. Ich würde vorschlagen, Ähnliche Beiträge auf der Überprüfung, wie ein Element relativ zum Fenster Bildlaufposition zu bewegen. Sie werden einen Weg zu bestimmen müssen, welche Tags zu einem bestimmten Zeitpunkt sichtbar sind, und ich vermute, dass Position Funktionen mit einem der Standard-jquery tun können; Das gleiche gilt für eine Linie zwischen zwei Elementen benötigt. Eine einfache Suche liefert http://api.jquery.com/position/ . Sobald Sie festgestellt haben, welche Tags sichtbar sind, können Sie dann wieder bevölkern die Kommentare UI-Element mit den entsprechenden Kommentaren, ihre Positionen finden, und eine Linie von dem markierten Element mit dem Kommentar Element ziehen. Wenn Sie in der Lage sein müssen, um auch die Kommentare zu bearbeiten, und Sie erwarten, sie ohne ein Formular speichern einreichen, Sie gehen auf eine Datenbank benötigen, und einen Ajax-Aufruf die Kommentare, wenn Sie fertig sind Bearbeitung bestehen bleiben.

Wenn Sie über ein Texteingabefeld sprechen, geht seine viel schwieriger zu sein, und ich glaube nicht, dass Sie es mit einem der Standard-Eingabeelementen sehr leicht tun könnten. Ich würde eine der Rich-Text-Editoren überprüfen gibt, die einen Teil dieser Funktionalität (YUI?) Aussetzen können und kombinieren Sie es mit Ihrem Plugin.

Answer 4

In Bezug auf den Abzugsleitungen, machte ich den Code aus meiner Frage und Antwort zur Verfügung

  

Wie eine Linie zwischen ziehbar und abwerfbaren ziehen?

Der leicht genug, um Nähte TAG Teil, wenn Sie mit jQuery Feldauswahl-Plugin

hoffe, es hilft.