iWork 能够突出显示文本，然后为该文本添加注释。注释然后通过一行链接到突出显示的文本。
我很好奇这样的事情是否可以在 JQUERY 中实现。让我感到困惑的是：A.当用户更改文本时如何绘制一条线并更新它 B.如何突出显示文本并以某种方式对其进行标记？
我很想听听您对 JQUERY 和任何想法或插件是否可以实现这一点的想法，这些想法或插件可以为我指明正确的方向。
问问题
573 次
4 回答
4
是的，这不是很难实现。
首先 - 您需要获取 select 事件
当用户在其中进行文本选择时，选择事件会发送到元素。此事件仅限于字段和框。
例如，考虑 HTML：
<form>
<input id="target" type="text" value="Hello there" />
</form>
<div id="other">
Trigger the handler
</div>
事件处理程序可以绑定到文本输入：
$('#target').select(function() {
alert('Handler for .select() called.');
});
参见：http ://api.jquery.com/select/
第二 - 您需要创建一个标签
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>
如您所见，这是一个非常简单的示例，但它的使用几乎是无限的！
现在是 jQuery 代码，它可以做所有时髦的事情。我要做的是显示和隐藏 Content1 Div 元素。为此，我创建了下面的 jQuery 代码，看看然后我将通过它。
$(document).ready(function(){
$('#content1').hide();
$('a').click(function(){
$('#content1').show('slow');
});
$('a#close').click(function(){
$('#content1').hide('slow');
})
});
正如我之前提到的，$(document).ready(function()} 是一个等待页面准备好进行操作的函数，然后再执行其中的代码。
下一行 $('#content1').hide(); 隐藏 Content1 div 以开始。请注意 jQuery 和 CSS 之间的关系是如何使用 ID 的，但它可以以完全相同的方式使用类，作为括号内的参数。
然后我们进入下一段代码，当点击链接文本时“显示”DIV。$('a).click(function(){}); 这是调用“click”函数，然后在 Content1 Div 上调用“show”效果。
再次阅读代码并确保您掌握了逻辑。我也花了一点时间来掌握它！
在显示和隐藏的 Div 中，有另一个文本链接将隐藏 Div。
$('a#close').click(function(){
$('#content1').hide('slow');
})
如果你看这个，你可以看到任何 ID 为“close”的“a”（链接）元素都会在 Content 1 Div 上调用“hide”效果。
参见：http ://dreamweaverspot.com/jquery-show-and-hide-a-div/
第三 - 画线
下载 jQuery SVG 插件 - http://jquery.com/plugins/project/svg
画出你的线
$("#example1").drawLine(0, 0, 220, 45);
参见：http ://www.openstudio.fr/Library-for-simple-drawing-with.html
就是这样。只需将它们放在一起，即可获得您想要的效果。
于 2010-02-18T19:11:35.583 回答
1
也许像工具提示这样简单的东西可能就是您的答案。我过去使用过qtip插件，它具有您正在寻找的效果。
看看网站：
http://craigsworks.com/projects/qtip/
使用 qtip 可以完美地将信息保持在文档上方。
关于选择文档文本的某些部分，Todd 有最好的方法，我也发现了这个 SO question：
一旦你选择了文本，我会用 将它包装在一个跨度中id，并使用 qtip提示作为一条线（指向有问题的跨度）。这可以动态设置样式并制作任何尺寸，如下所述：
http://craigsworks.com/projects/qtip/docs/tutorials/#tips
这是使用 qtip 插件的一种有趣方式，希望这些信息对您有所帮助。
马库斯。
于 2010-02-19T23:36:19.353 回答
1
除了为您编写应用程序之外，Todd 基本上已经概述了您在这里需要做的大部分事情。您需要在内存中有两个列表；一个评论和一个标签，以及一种在 DOM 中关联这两者的方法（唯一 ID）。我建议查看有关如何相对于窗口滚动位置移动元素的类似帖子。您需要某种方法来确定在任何给定时间哪些标签可见，我怀疑您可以使用标准 jquery 位置函数之一来做到这一点；在两个元素之间画一条线也是如此。一个简单的搜索产生http://api.jquery.com/position/. 一旦您确定了哪些标签是可见的，您就可以使用适当的评论重新填充评论 UI 元素，找到它们的位置，并从标记元素到评论元素画一条线。如果您还需要能够编辑评论，并且您希望它们在没有表单提交的情况下保存，那么您将需要一个数据库和一个 ajax 调用来在您完成编辑后保存评论。
如果您谈论的是文本输入字段，那么它会变得更加困难，而且我认为您不能很容易地使用任何标准输入元素来做到这一点。我会检查其中一个富文本编辑器，它可能会公开一些此功能（YUI？）并将其与您的插件结合使用。
于 2010-02-21T19:46:03.413 回答
0
于 2010-02-25T16:49:50.963 回答