A habilidade de comentários do iWork é possível implementar usando o jQuery

Question

O iWork tem a capacidade de destacar o texto e depois marcar um comentário para esse texto. O comentário está vinculado a uma linha para o texto destacado.

Estou curioso para saber se algo assim pode ser implementado no jQuery. O que eu me intrigou é: A. Como desenhar uma linha e atualizar quando um usuário altera o texto B. Como destacar o texto e marcar de alguma forma?

Eu adoraria ouvir seus pensamentos se isso é possível com o jQuery e quaisquer idéias ou plugins para me apontar na direção certa.

Answer 1

Sim, isso não é muito difícil de realizar.

Primeiro - você precisa obter o evento selecionado

O evento selecionado é enviado para um elemento quando o usuário faz uma seleção de texto dentro dele. Este evento é limitado a campos e caixas.

Por exemplo, considere o HTML:

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

O manipulador de eventos pode estar vinculado à entrada de texto:

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

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

Segundo - você precisa criar uma 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>

Como você pode ver, é um exemplo muito simples, mas o uso disso praticamente ilimitado!

Agora, para o código jQuery que faz todas as coisas descoladas. O que vou fazer é mostrar e ocultar o elemento Div Content1. Para isso, criei o código jQuery abaixo, dê uma olhada, então vou passar por ele.

$(document).ready(function(){

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

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

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

});

Como mencionei anteriormente, o $ (documento) .ready (function ()} é uma função que aguarda até que a página esteja pronta para ser manipulada antes de executar o código dentro dela.

A próxima linha $ ('#content1'). Hide (); Esconde o content1 div para começar. Observe como há uma relação entre jQuery e CSS que usa o ID é esse, mas pode usar uma classe exatamente da mesma maneira, como o argumento dentro dos parênteses.

Em seguida, passamos para a próxima seção do código que "mostra" a div quando o texto vinculado é clicado. $ ('a) .Click (function () {}); Isso está chamando a função "clique" e, em seguida, invocando o efeito "show" no content1 div.

Leia o código novamente e certifique -se de controlar a lógica. Levei um tempo para pegar o jeito também !!!

Dentro daquela div que está sendo mostrada e oculta, há outro link de texto que ocultará a div.

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

Se você olhar para isso, poderá ver que qualquer elemento "A" (link) com um ID de "Fechar" invocará o efeito "ocultar" no conteúdo 1 div.

VEJO: http://dreamweaverspot.com/jqueryshow-and-hide-div/

Terceiro - desenhe sua linha

Baixe o plug -in para jQuery SVG - http://jquery.com/plugins/project/svg

Desenhe sua linha

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

VEJO: http://www.openstudio.fr/library-for-simple-drawing-with.html

É isso. Basta juntar tudo para entender como você deseja.

Answer 2

Talvez algo tão simples como uma dica de ferramenta pode ser sua resposta. Eu usei o Qtip Plugin no passado e tem os efeitos que você está procurando.

Dê uma olhada no site:

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

O uso do QTIP funcionaria perfeitamente para manter as informações flutuadas acima do documento.

No que diz respeito à seleção de certas partes do texto dos documentos, Todd tem o melhor método lá, e eu também encontrei isso, então pergunta:

Selecionando o texto em um elemento (semelhante a destacar com o mouse)

Depois de selecionar o texto, eu o envolveria em um período com um id, e use o QTIP gorjeta como uma linha (apontando para o período em questão). Isso pode ser estilizado em tempo real e fez qualquer tamanho, conforme descrito aqui:

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

Esta é uma maneira interessante de usar o plug -in QTIP, espero que algumas dessas informações tenham ajudado você.

Marcus.

Answer 3

Todd delineou basicamente quase tudo o que você precisa fazer aqui, além de escrever o aplicativo para você. Você precisa ter duas listas na memória; Um dos comentários e um dos tags e uma maneira de associar os dois no DOM (IDs exclusivos). Eu sugeriria verificar postagens semelhantes sobre como mover um elemento em relação à posição de rolagem da janela. Você precisará de alguma maneira de determinar quais tags são visíveis a qualquer momento, e suspeito que você possa fazer isso com uma das funções padrão de posição do jQuery; O mesmo é necessário para desenhar uma linha entre dois elementos. Uma pesquisa simples produz http://api.jquery.com/position/. Depois de determinar quais tags estão visíveis, você pode re-cair novamente o elemento de interface do usuário de comentários com os comentários apropriados, encontrar suas posições e desenhar uma linha do elemento marcado para o elemento de comentário. Se você precisar editar também os comentários e espera que eles economizem sem um envio de formulário, precisará de um banco de dados e uma chamada de Ajax para persistir os comentários quando terminar a edição.

Se você está falando sobre um campo de entrada de texto, será muito mais difícil e acho que você não poderá fazê -lo com nenhum dos elementos de entrada padrão com muita facilidade. Eu confira um dos editores de texto ricos por aí que podem expor parte dessa funcionalidade (yui?) E combiná -la com o seu plug -in.

Answer 4

Em relação às linhas de desenho, disponibilizei o código da minha própria pergunta e resposta

Como desenhar uma linha entre draggable e droppable?

A parte da tag se costuma com facilidade o suficiente quando você pode trabalhar plugin de seleção de campo jQuery

espero que ajude.