A habilidade de comentários do iWork é possível implementar usando o jQuery
-
20-09-2019 - |
Pergunta
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.
Solução
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.
Outras dicas
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.
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.
Em relação às linhas de desenho, disponibilizei o código da minha própria pergunta e resposta
A parte da tag se costuma com facilidade o suficiente quando você pode trabalhar plugin de seleção de campo jQuery
espero que ajude.