当前位置：文江博客话题详情

iWork评论能力，是否可以使用JQUERY实现

发布于 2024-08-21 09:03:46 字数 270 浏览 9 评论 0原文

iWork 能够突出显示文本，然后为该文本添加注释。然后，注释将通过一条线链接到突出显示的文本。

alt text

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

我很想听听您对 JQUERY 是否可以做到这一点的想法以及任何可以为我指明正确方向的想法或插件。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷离° 2024-08-28 09:03:46

是的，这并不是很难实现。

首先 - 您需要获取 select 事件

当用户在元素内部进行文本选择时， 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.');
});

SEE: 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”函数，然后调用“show”。 ” 对 Content1 Div 的影响

阅读代码并确保您掌握了逻辑。我也花了一些时间才掌握它的窍门！

再次另一个将隐藏 Div 的文本链接

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

如果您查看此内容，您会发现任何 ID 为“close”的“a”（链接）元素都会调用 Content 1 Div 上的“隐藏”效果

： href="http://dreamweaverspot.com/jquery-show-and-hide-a-div/" rel="nofollow noreferrer">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

就是这样。只需将它们放在一起即可获得您想要的效果。

Yes, this is not very difficult to accomplish.

First - You need to get the select event

The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes.

For example, consider the HTML:

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

The event handler can be bound to the text input:

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

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

Second - You need to create a 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>

As you can see it is a very simple example, but the use of this it just about limitless!

Now for the jQuery code that does all the funky stuff. What I am going to do is Show and Hide the Content1 Div element. For that I created the jQuery code below, have a look then I will go through it.

$(document).ready(function(){

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

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

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

});

As I mentioned earlier the $(document).ready(function()} is a function that waits until the page is ready to be manipulated before executing the code inside it.

The next line $('#content1').hide(); Hides the Content1 Div to start with. Notice how there is a relationship between jQuery and CSS in that is uses the, ID is this case, but it could use a class in exactly the same manner, as the argument inside the parenthesis.

We then move onto the next section of code that “Shows” the DIV when the linked text is clicked. $('a).click(function(){}); This is calling the “click” function and then invoking the “show” effect on the Content1 Div.

Read the code again and make sure you get a grip on the logic. It took me a little while to get the hang of it as well !!!

Inside that Div that is being Shown and Hidden there is another text link that will Hide the Div.

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

If you look at this you can see that any “a” (link) element with an ID of “close” will invoke the “hide” Effect on the Content 1 Div.

SEE: http://dreamweaverspot.com/jquery-show-and-hide-a-div/

Third - Draw your line

Download Plugin for jQuery SVG - http://jquery.com/plugins/project/svg

Draw your line

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

SEE: http://www.openstudio.fr/Library-for-simple-drawing-with.html

That's it. Just put it all together to get it how you want it.

回复收藏 0 原文

绅刃 2024-08-28 09:03:46

也许像工具提示这样简单的东西就是您的答案。我过去使用过qtip插件，它具有您正在寻找的效果。

看一下网站：

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

使用 qtip非常适合将信息浮动在文档上方。

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

在元素中选择文本（类似于用鼠标突出显示）

一旦选择了文本，我会将其包裹在一个跨度中id，并使用 qtip tip 作为一行（指向有问题的跨度）。这可以动态设计样式并设为任意大小，如下所述：

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

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

马库斯.

回复收藏 0 原文

沉鱼一梦 2024-08-28 09:03:46

除了为您编写申请之外，托德基本上概述了您需要做的大部分事情。内存中需要有两个列表；注释之一和标签之一，以及在 DOM 中关联两者的方法（唯一 ID）。我建议查看有关如何相对于窗口滚动位置移动元素的类似帖子。您需要某种方法来确定哪些标签在任何给定时间都可见，我怀疑您可以使用标准 jquery 位置函数之一来做到这一点；在两个元素之间画一条线也需要同样的方法。简单的搜索会产生 http://api.jquery.com/position/。确定哪些标签可见后，您可以使用适当的评论重新填充评论 UI 元素，找到它们的位置，并从标记元素到评论元素绘制一条线。如果您还需要能够编辑评论，并且希望它们在不提交表单的情况下保存，那么您将需要一个数据库，以及一个 ajax 调用来在完成编辑后保留评论。

如果您谈论的是文本输入字段，那么它会困难得多，并且我认为您无法轻松地使用任何标准输入元素来完成此操作。我会检查其中一个富文本编辑器，它可能会公开一些此功能（YUI？）并将其与您的插件结合起来。

回复收藏 0 原文