iWork注释功能，这是否可以使用JQUERY实现

iWork能够突出显示文本，然后标记该文本的注释。然后，注释用一行链接到高亮显示的文本

我很好奇这样的东西是否可以在JQUERY中实现。令我困惑的是： A.如何在用户更改文本时绘制一条线并使其更新 B.如何突出显示文本并以某种方式对其进行标记

---

我很想听听您对JQUERY和任何想法或插件是否有可能为我指明正确方向的想法。

是的，这并不难实现

首先-您需要获取select事件

当用户在元素内部进行文本选择时，选择事件将被发送到元素。此事件仅限于字段和框

例如，考虑HTML:< /P>

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

见：

第二，您需要创建一个标记

CSS

正如我前面提到的，$document.readyfunction}是一个函数，它在执行页面中的代码之前，会等待页面准备好进行操作

下一行$'content1'。隐藏；隐藏要以开头的Content1 Div。请注意jQuery和CSS之间的关系，即使用ID，但它可以使用与括号内的参数完全相同的方式使用类

然后，我们进入下一段代码，在单击链接文本时“显示”DIV。$'a、 单击函数{}；这是调用“click”函数，然后在content1div上调用“show”效果

再次阅读代码，确保掌握了逻辑。我也花了一点时间才掌握窍门

在显示和隐藏的Div中，有另一个文本链接将隐藏该Div

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

如果你看这个，你会发现任何ID为“close”的“a”link元素都会在content1div上调用“hide”效果

见：

第三，划清界限

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

下载jQuery SVG插件-

划清界限

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

见：

---

就这样。只要把它们放在一起，就可以得到你想要的结果。

也许简单的工具提示就是你的答案。我过去使用过qtip插件，它具有您想要的效果

请浏览以下网站：

使用qtip可以完美地保持信息在文档上方浮动

关于选择文件文本的某些部分，Todd有最好的方法，我也发现了这个问题：

一旦您选择了文本，我会将其包装在一个带有id的跨度中，并使用qtip提示作为指向相关跨度的线。这可以在运行中进行样式设计，并制作任意尺寸，如下所述：

这是一种使用qtip插件的有趣方式，我希望其中的一些信息对您有所帮助

---

马库斯。

托德基本上概述了除了为您编写应用程序之外，您在这里需要做的大部分事情。你需要在内存中有两个列表；一个注释和一个标记，以及在DOM唯一ID中关联这两个的方法。我建议查看类似的帖子，了解如何相对于窗口滚动位置移动元素。您将需要某种方法来确定在任何给定时间哪些标记是可见的，我想您可以使用一个标准jquery position函数来实现这一点；在两个元素之间画一条线也需要同样的方法。一个简单的搜索结果。一旦确定了哪些标记是可见的，就可以用适当的注释重新填充comments UI元素，找到它们的位置，并从标记的元素到comment元素画一条线。如果您还需要编辑注释，并且希望在不提交表单的情况下保存注释，那么您需要一个数据库，以及一个ajax调用，以便在编辑完成后保留注释

---

如果你说的是一个文本输入字段，它将变得更加困难，我认为你不可能用任何标准的输入元素很容易地做到这一点。我想看看其中一个富文本编辑器，它可能会公开一些这方面的功能YUI？并将其与您的插件结合。

关于绘制线，我提供了我自己的问题和答案中的代码

当您可以使用时，标记零件接缝非常容易

---

希望能有帮助。

嗨，托德，我想我没有充分解释我想做什么。给定一个文本块，我希望能够标记文本中的一个句子或位置，并将其与左侧的注释框关联。我希望左边的评论框被锚定到文本上，这样当你上下滚动时，它会随着文本浮动，就像Yelp地图一样。。。我还需要一行，将注释连接到文本中的位置。有什么想法吗？最难的部分是HTML顶部的行。请参见下文。是否要在HTML元素顶部画一条线？

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

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