iWork Commentaire Capacité, Est-ce possible de mettre en œuvre à l'aide JQUERY

Question

iWork a la capacité de mettre en évidence le texte et marquer ensuite un commentaire à ce texte. Le commentaire est alors lié à une ligne du texte en surbrillance.

Je suis curieux de savoir si quelque chose comme cela pourrait être mis en œuvre JQUERY. Ce qui m'a intrigué est: A. Comment dessiner une ligne et l'avoir mise à jour lorsqu'un utilisateur modifie le texte B. Comment mettre en évidence le texte et l'avoir marqué en quelque sorte?

Id aiment entendre vos réflexions sur si cela est encore possible avec JQUERY et des idées ou des plugins pour me diriger dans la bonne direction.

Answer 1

Oui, ce n'est pas très difficile à accomplir.

D'abord - Vous devez obtenir l'événement select

L'événement select est envoyé à un élément lorsque l'utilisateur effectue une sélection de texte à l'intérieur. Cet événement est limité aux champs et des boîtes.

Par exemple, considérons le code HTML:

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

Le gestionnaire d'événement peut être lié à l'entrée de texte:

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

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

Deuxième - Vous devez créer une balise

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>

Comme vous pouvez le voir, il est un exemple très simple, mais l'utilisation de cela, il à peu près sans limites!

pour le code jQuery qui fait tous les trucs funky. Ce que je vais faire est afficher et masquer l'élément Content1 Div. Pour que j'ai créé le code jQuery ci-dessous, un coup d'oeil alors je vais passer par là.

$(document).ready(function(){

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

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

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

});

Comme je l'ai mentionné plus tôt le $ (document) .ready (function ()} est une fonction qui attend que la page soit prêt à être manipulé avant d'exécuter le code à l'intérieur.

La ligne suivante $ ( '# content1') cacher (). La Content1 Div Hides pour commencer. Remarquez comment il existe une relation entre jQuery et CSS qui est utilise le, ID est ce cas, mais il pourrait utiliser une classe exactement de la même manière que l'argument, entre parenthèses.

Nous passons ensuite à la section suivante du code « montre » la DIV lorsque le texte lié est cliqué. $ ( 'A) .cliquez (function () {}); Ceci est d'appeler la fonction « clic », puis invoquer l'effet « show » sur la Content1 Div.

Lire le code et assurez-vous d'avoir une emprise sur la logique. Il m'a fallu un peu de temps pour obtenir le coup de lui aussi bien !!!

Dans cette division qui est affichée et cachée il y a un autre lien de texte qui cachera la Div.

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

Si vous regardez ce que vous pouvez voir que tout élément « a » (lien) avec un ID de « fermer » appellera l'effet « cacher » sur le contenu 1 Div.

VOIR: http://dreamweaverspot.com/jquery-show- et un cache-div /

Troisième - Dessinez votre ligne

Télécharger Plugin pour jQuery SVG - http://jquery.com/plugins/project/svg

Dessinez votre ligne

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

VOIR: http://www.openstudio.fr/Library -pour-simple dessin-with.html

Voilà. Il suffit de mettre tous ensemble pour obtenir la façon dont vous le voulez.

Answer 2

Peut-être quelque chose d'aussi simple que d'une info-bulle pourrait être votre réponse. Je l'ai utilisé le qtip plugin dans le passé, et il a les effets de votre recherchent.

Jetez un oeil sur le site:

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

En utilisant qtip fonctionnerait parfaitement pour la conservation des informations flottaient au-dessus du document.

En ce qui concerne la sélection de certaines parties du texte des documents, Todd a la meilleure méthode, et je trouve aussi cette question SO:

Sélection de texte dans un élément (semblable à mettre en évidence avec votre souris)

Une fois que vous avez le texte sélectionné, je l'envelopper dans une période avec un id et utilisez la pointe qtip en ligne (indiquant la durée en question). Cela pourrait être appelée à la volée et a fait toute taille, comme décrit ici:

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

Ceci est un moyen intéressant d'utiliser le plugin qtip, j'espère que certaines de ces informations vous ont aidé.

Marcus.

Answer 3

Todd a essentiellement décrit plus tout ce que vous devez faire ici de côté d'écrire l'application pour vous. Vous devez avoir deux listes en mémoire; un des commentaires et l'une des balises, et un moyen d'associer les deux dans les DOM (ids uniques). Je suggère de vérifier les messages similaires sur la façon de déplacer un élément par rapport à la position de défilement de la fenêtre. Vous aurez besoin d'un moyen de déterminer quelles balises sont visibles à tout moment, et je pense que vous pouvez le faire avec l'une des fonctions standard de position jquery; celui-ci est nécessaire pour tracer une ligne entre deux éléments. Une simple recherche donne http://api.jquery.com/position/ . Une fois que vous avez déterminé quelles balises sont visibles, vous pouvez ensuite repeupler l'élément de l'interface utilisateur des commentaires avec les commentaires appropriés, trouver leurs positions, et tracer une ligne de l'élément étiquetée à l'élément de commentaire. Si vous devez être en mesure de modifier aussi les commentaires, et vous les attendez d'enregistrer sans forme soumettre, vous allez avoir besoin d'une base de données et un appel ajax pour conserver les commentaires une fois que vous avez terminé vos modifications.

Si vous parlez d'un champ de saisie de texte, ça va être beaucoup plus difficile et je ne pense pas que vous pourriez le faire avec l'un des éléments d'entrée standard très facilement. Je vérifierais l'un des riches éditeurs de texte là-bas qui peut exposer certaines de ces fonctionnalités (YUI?) Et les combiner avec votre plug-in.

Answer 4

En ce qui concerne les lignes de tirage, je mis à la disposition du code de ma propre question et la réponse

  

Comment dessiner une ligne entre draggable et largable?

Les coutures partie TAG assez facile quand vous pouvez travailler avec plugin jQuery Sélection des champs

elle pourra être utile.