Capacità di commento di iWork, è possibile implementarla utilizzando JQUERY

Question

iWork ha la capacità di evidenziare il testo e quindi taggare un commento a quel testo.Il commento viene poi collegato con una riga al testo evidenziato.

Sono curioso di sapere se qualcosa di simile potrebbe essere implementato in JQUERY.Ciò che mi lascia perplesso è:UN.Come disegnare una riga e farla aggiornare quando un utente cambia il testo B.Come evidenziare il testo e taggarlo in qualche modo?

Mi piacerebbe sentire le tue opinioni se questo è possibile anche con JQUERY e qualsiasi idea o plugin che mi indichi la giusta direzione.

Answer 1

Sì, questo non è molto difficile da realizzare.

In primo luogo - È necessario per ottenere l'evento select

L'evento select viene inviato ad un elemento quando l'utente effettua una selezione di testo al suo interno. Questo evento è limitata a campi e nelle caselle.

Per esempio, si consideri il codice HTML:

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

Il gestore di eventi può essere legato al metodo di scrittura:

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

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

In secondo luogo - è necessario creare un tag

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>

Come si può vedere si tratta di un esempio molto semplice, ma l'uso di questo quasi senza limiti!

Ora, per il codice jQuery che fa tutte le cose funky. Quello che sto per fare è mostrare e nascondere l'elemento Content1 Div. Per questo ho creato il codice jQuery sotto, date un'occhiata poi mi passerà attraverso di essa.

$(document).ready(function(){

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

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

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

});

Come ho detto prima il $ (document) .ready (function ()} è una funzione che attende fino a quando la pagina è pronta per essere manipolato prima di eseguire il codice all'interno di esso.

La riga successiva $ ( '# content1') nascondere ().; Nasconde il Content1 Div per cominciare. Si noti come ci sia una relazione tra jQuery e CSS nel cioè utilizza il, ID è questo caso, ma potrebbe utilizzare una classe esattamente nello stesso modo, come l'argomento all'interno della parentesi.

Si passa poi sopra la prossima sezione di codice che “mostra” la DIV quando il testo collegato viene cliccato. $ ( 'A) .Cliccate (function () {}); Questo chiama la funzione “click” e poi invocare l'effetto “show” sulla Content1 Div.

Leggi di nuovo il codice e assicuratevi di avere una presa sulla logica. Mi c'è voluto un po 'per ottenere il blocco di esso pure !!!

All'interno che Div che viene mostrato e nascosto c'è un altro link di testo che verrà nascondere la Div.

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

Se si guarda a questo si può vedere che ogni elemento “a” (link) con un ID di “chiudere” richiamerà l'effetto “nascondere” il Contenuto 1 Div.

vedi: http://dreamweaverspot.com/jquery-show- e-nascondere-a-div /

In terzo luogo - Disegna la tua linea

Scarica Plugin per jQuery SVG - http://jquery.com/plugins/project/svg

Disegna la linea

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

vedi: http://www.openstudio.fr/Library -per-semplici-disegno-with.html

Questo è tutto. Basta mettere tutto insieme per farlo come si desidera.

Answer 2

Forse qualcosa di semplice come un suggerimento potrebbe essere la vostra risposta. Ho usato il qtip plug-in passato, e ha gli effetti che state cercando.

Date un'occhiata al sito web:

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

Utilizzando qtip avrebbe funzionato perfettamente per mantenere le informazioni galleggiare sopra il documento.

Per quanto riguarda la selezione di alcune parti del testo documenti, Todd ha il metodo migliore lì, e ho anche trovato questa domanda SO:

Selezione del testo in un elemento (simile ad evidenziare con il mouse)

Una volta che avete il testo selezionato avrei avvolgerlo in un arco con una id, e usare la punta qtip come una linea (indicando la durata in questione). Questo potrebbe essere in stile al volo e ha fatto tutto il formato, come descritto qui:

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

Questo è un modo interessante per usare il plugin qtip, spero che alcune di queste informazioni ti ha aiutato.

Marcus.

Answer 3

Todd ha sostanzialmente delineato più tutto quello che dovete fare qui a parte scrivere l'applicazione per voi. È necessario disporre di due liste in memoria; uno dei commenti e uno dei tag, e un modo per associare i due nel DOM (ID univoci). Vorrei suggerire di verificare i messaggi simili su come spostare un elemento relativamente alla posizione della finestra di scorrimento. Avrete bisogno di un certo modo di determinare quali tag sono visibili in un dato momento, e ho il sospetto che si può fare con una delle funzioni di posizione jquery standard; lo stesso è necessario per tracciare una linea tra due elementi. Una semplice ricerca produce http://api.jquery.com/position/ . Una volta stabilito quali tag sono visibili, si può quindi ripopolare l'elemento commenti UI con i commenti appropriati, trovare le loro posizioni, e tracciare una linea dall'elemento tag all'elemento commento. Se avete bisogno di essere in grado di modificare anche i commenti, e ci si aspetta loro di risparmiare senza un modulo di presentare, si sta andando ad avere bisogno di un database, e una chiamata AJAX a persistere i commenti che una volta che hai finito di modificare.

Se si sta parlando di un campo di testo, la sua intenzione di essere molto più difficile e non credo che si possa fare con uno qualsiasi degli elementi di ingresso standard molto facilmente. Vorrei controllare uno dei ricchi editor di testo là fuori che può esporre alcune di queste funzionalità (YUI?) E combinarlo con il plugin.

Answer 4

Per quanto riguarda le linee disegnate, ho reso disponibile il codice dalla mia domanda e risposta

Come tracciare una linea tra trascinabile e rilasciabile?

La parte TAG sembra abbastanza semplice quando puoi lavorarci Plug-in di selezione campo jQuery

spero che sia d'aiuto.