iWork Comentario Capacidad, Es posible implementar con JQUERY

Question

iWork tiene la capacidad para resaltar el texto y, a continuación, la etiqueta en un comentario a este texto.El comentario, a continuación, se enlaza con una línea para el texto resaltado.

Tengo curiosidad por si algo como esto podría ser implementado en JQUERY.Lo que me tiene intrigado es:A.Cómo dibujar una línea y tener a actualizar cuando un usuario cambia el texto B.Cómo resaltar texto y lo han etiquetado de alguna manera?

Id encantaría escuchar sus pensamientos sobre si esto es posible incluso con JQUERY y cualquier idea o plugins que me apunte en la dirección correcta.

Answer 1

Sí, esto no es muy difícil de lograr.

En primer lugar - Usted necesita para obtener el evento de selección de

Seleccione el evento se envía a un elemento cuando el usuario hace una selección de texto en su interior.Este evento está limitado a los campos y cuadros.

Por ejemplo, considere el HTML:

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

El controlador de eventos puede ser enlazado a la entrada de texto:

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

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

Segundo - que Usted necesita para crear una etiqueta

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>

Como se puede ver es un ejemplo muy simple, pero el uso de este casi ilimitadas!

Ahora, para el código jQuery que hace todas las cosas graciosas.Lo que voy a hacer es Mostrar y Ocultar la Content1 elemento Div.Para eso he creado el código jQuery a continuación, echar un vistazo a continuación, voy a ir a través de él.

$(document).ready(function(){

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

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

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

});

Como he mencionado anteriormente el $(document).ready(function()} es una función que espera hasta que la página está listo para ser manipulado antes de ejecutar el código dentro de él.

La siguiente línea $('#content1').hide();Oculta el Content1 Div para empezar.Observa cómo existe una relación entre jQuery y CSS en que se utiliza el ID es este caso, pero podría ser una clase en exactamente la misma manera, como argumento dentro de los paréntesis.

A continuación, pasar a la siguiente sección de código que "Muestra" el DIV cuando el texto vinculado se hace clic.$('a).click(function(){});Esta es llamada la "haga clic en" función y, a continuación, invocando el "espectáculo" efecto sobre la Content1 Div.

Leer el código de nuevo y asegúrese de obtener un control sobre la lógica.Me tomó un poco de tiempo para conseguir la caída de ella también !!!

Dentro de ese Div que se Muestra y Oculta hay otro enlace de texto que se va a Ocultar el Div.

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

Si nos fijamos en este se puede ver que cualquier "a" (enlace) elemento con un ID de "cerrar" que se va a invocar la "ocultar" Efecto sobre el Contenido de la 1 Div.

VER: http://dreamweaverspot.com/jquery-show-and-hide-a-div/

Tercera - Dibujar la línea

Descargar Plugin para jQuery SVG - http://jquery.com/plugins/project/svg

Dibujar la línea

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

VER: http://www.openstudio.fr/Library-for-simple-drawing-with.html

Eso es todo.Acaba de poner a todos juntos para conseguir la forma que quieres.

Answer 2

Tal vez algo tan simple como un texto de ayuda podría ser su respuesta. He utilizado el qtip plug-in en el pasado, y no tiene los efectos que su busca.

Tome un vistazo a la página web:

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

El uso de qtip funcionaría perfectamente para mantener la información flotaba sobre el documento.

Con respecto a la selección de ciertas partes del texto documentos, Todd tiene el mejor método allí, y también encontré esta cuestión de forma:

Selección de texto en un elemento (similar a resaltar con el ratón)

Una vez que haya seleccionado el texto me envuelve en un lapso con un id, y utilizar el qtip tip como una línea (señalando el lapso en cuestión). Esto podría ser de estilo sobre la marcha y hacer cualquier tamaño, tal como se describe aquí:

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

Esta es una forma interesante de usar el plugin qtip, espero que parte de esta información le ha ayudado a salir.

Marcus.

Answer 3

Todd ha descrito básicamente casi todo lo que hay que hacer aquí aparte de escribir la aplicación para usted. Es necesario tener dos listas en la memoria; uno de los comentarios y una de las etiquetas, y una forma de asociar los dos en el DOM (identificadores únicos). Yo sugeriría revisar mensajes similares sobre cómo mover un elemento con respecto a la posición de la ventana de desplazamiento. Usted necesita alguna manera de determinar qué etiquetas son visibles en un momento dado, y sospecha que puede hacer eso con una de las funciones de posición jQuery estándar; la misma se necesita para trazar una línea entre dos elementos. Una simple búsqueda produce http://api.jquery.com/position/ . Una vez que haya determinado qué etiquetas son visibles, a continuación, puede volver a poblar el elemento de comentarios de interfaz de usuario con los comentarios correspondientes, encontrar sus posiciones, y trazar una línea desde el elemento etiquetado con el elemento comentario. Si tiene que ser capaz de editar también los comentarios, y que los está esperando para salvar sin presentar una forma, vas a necesitar una base de datos, y una llamada AJAX para persistir los comentarios una vez que haya terminado de editar.

Si usted está hablando de un campo de entrada de texto, que va a ser mucho más difícil y no creo que podría hacerlo con cualquiera de los elementos de entrada estándar muy fácilmente. Me echa un vistazo a uno de los editores de texto ricos por ahí que pueda exponer algunas de esta funcionalidad (YUI?) Y combinarlo con su plugin.

Answer 4

Con respecto a dibujar líneas, me hizo disponible el código de mi propia pregunta y respuesta

Cómo dibujar una línea entre los que se pueden arrastrar y drop?

La ETIQUETA de la parte costuras bastante fácil cuando se puede trabajar con jQuery plugin de Selección de Campo

espero que ayude.