iWork評論功能，這可以實現使用JQUERY

iWork能夠突出顯示文本，然後標記註釋到該文本。然後該評論與高亮文本的一行關聯。iWork評論功能，這可以實現使用JQUERY

alt text

我很好奇，如果這樣的事情可能在jQuery中實現。我感到困惑的是： A.如何繪製線條並在用戶更改文本時更新 B.如何突出顯示文本並以某種方式標記文本？

編號喜歡聽到的，如果這是即使有jQuery和任何意見或插件可以點我在正確的方向你的看法。

來源

2010-02-11 AnApprentice

任何想法的人？ – AnApprentice 2010-02-12 05:08:42

你想在HTML元素上畫一條線嗎？ – 2010-02-25 17:21:05

是的，這並不是很難完成。

首先 - 你需要得到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'); 
}) 

});

正如我前面提到的$（文件）。就緒（函數（）}是等待，直到頁面已經準備好執行它裏面的代碼之前被操縱的功能。

下一行$（'＃content1'）。hide（）;隱藏Content1 Div開始。注意jQuery和CSS之間的關係是如何使用的，ID是這種情況，但它可以使用類同樣的方式，作爲圓括號內的參數

然後，我們進入代碼的下一部分，當單擊鏈接文本時「顯示」DIV。$（'a）.click（funct離子（）{}）;這是調用「click」函數，然後調用Content1 Div上的「顯示」效果。

再次閱讀代碼，並確保您掌握了邏輯。我花了一點時間來獲得它的竅門！

在那個正在顯示和隱藏的div中，有另一個文本鏈接會隱藏該div。

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

如果你看看這個，你可以看到，任何「一」（鏈接）與一個ID元素「關閉」將調用的內容1事業部「隱藏」的影響。

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

三 - 畫出你行

下載的jQuery插件SVG - http://jquery.com/plugins/project/svg

畫出你行

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

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

這它。把它放在一起，以得到它你想要的。

來源

2010-02-18 19:11:35

嗨託德，我不認爲我解釋了我想要做的很好。給定一段文字，我希望能夠在文本中標記句子或位置，並將其與左邊的評論框相關聯。我希望左側的評論框固定在文本上，以便當您向上和向下滾動時，文本隨着文本一起移動，就像Yelp Map一樣......我還想要一條將評論連接到位置的線在文中。對此有何想法？ – AnApprentice 2010-02-19 20:03:10

最難的部分是HTML之上的一行。（見下文。） – 2010-02-25 16:32:32

也許像簡單的工具提示可能是你的答案。我過去使用過插件qtip，它具有您正在尋找的效果。

看看網站：

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

使用qtip將工作完美保持文檔上方飄來的信息。

關於選擇文檔中的文本的某些部分，託德有最好的方法那裏，我還發現這太問題：

Selecting text in an element (akin to highlighting with your mouse)

一旦文本選擇我會敷在與id跨度，並使用qtip 提示作爲一條線（指向問題的跨度）。這可以在運行中的風格，並取得任意大小，如下所述：

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

這是使用qtip插件一種有趣的方式，我希望一些這方面的信息，幫助你。

Marcus。

來源

2010-02-19 23:36:19

託德已經基本列出了大部分你需要做的事情，除了爲你編寫應用程序。你需要在內存中有兩個列表;其中一個評論和一個標籤，以及一種將DOM與這兩者關聯的方法（唯一標識符）。我建議檢查出如何相對於窗口滾動位置移動元素的類似帖子。您需要一些方法來確定哪些標籤在任何給定時間都是可見的，我懷疑您可以使用標準jQuery位置函數之一來執行此操作;在兩個元素之間畫一條線也是一樣。簡單的搜索產生http://api.jquery.com/position/。一旦確定了哪些標籤可見，就可以使用適當的註釋重新填充評論UI元素，找到它們的位置，並從標籤元素向註釋元素繪製一條線。如果您還需要編輯註釋，並且希望它們在沒有提交表單的情況下進行保存，那麼您需要一個數據庫和一次ajax調用來在編輯完成後保留註釋。

如果你正在談論文本輸入領域，它會變得更加困難，我認爲你不可能很容易地使用任何標準輸入元素。我會檢查一下那些可能會暴露這些功能（YUI？）的富文本編輯器，並將其與您的插件結合使用。

來源

2010-02-21 19:46:03 Josh

關於畫線，我提供的代碼從我自己的問題，並回答

How to draw a line between draggable and droppable?

標籤部分接縫處很容易，當你可以用jQuery Field Selection plugin

希望它的工作幫助。

來源

2010-02-25 16:49:50 balexandre

iWork評論功能，這可以實現使用JQUERY

回答

相關問題