iWork 댓글 능력, jQuery를 사용하여 구현할 수 있습니다.

Question

iWork는 텍스트를 강조 표시 한 다음 해당 텍스트에 주석을 태그 할 수 있습니다. 그런 다음 주석은 강조 표시된 텍스트로 줄과 연결됩니다.

jQuery에서 이와 같은 것이 구현 될 수 있는지 궁금합니다. 내가 당황한 것은 다음과 같습니다.

Id는 jQuery와 올바른 방향으로 나를 가리킬 아이디어 나 플러그인으로 가능하다면 당신의 생각을 듣고 싶어합니다.

Answer 1

예, 이것은 성취하기가 그리 어렵지 않습니다.

먼저 - 선정 이벤트를 받아야합니다

선택 이벤트는 사용자가 그 안에 텍스트를 선택할 때 요소로 전송됩니다. 이 이벤트는 필드와 상자로 제한됩니다.

예를 들어 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 사이에 어떻게 사용되는지에 주목하십시오.

그런 다음 링크 된 텍스트를 클릭 할 때 DIV를 "표시"하는 다음 코드 섹션으로 이동합니다. $ ( 'a) .click (function () {}); 이것은 "클릭"함수를 호출 한 다음 Content1 Div에서 "show"효과를 호출합니다.

코드를 다시 읽고 논리를 잡아야합니다. 그것의 교수형을 얻는 데 약간의 시간이 걸렸습니다 !!!

보여지고 숨겨져있는 Div 내부에는 Div를 숨길 다른 텍스트 링크가 있습니다.

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

이것을 보면 "닫기"의 ID가있는 "a"(링크) 요소가 컨텐츠 1 div에 대한 "숨기기"효과를 호출한다는 것을 알 수 있습니다.

보다: 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

그게 다야. 당신이 원하는 방식으로 그것을 얻기 위해 모든 것을 합치십시오.

Answer 2

어쩌면 툴팁처럼 간단한 것이 당신의 답일 수 있습니다. 나는 그것을 사용했다 QTIP 과거에 플러그인하면 원하는 영향이 있습니다.

웹 사이트를 살펴보십시오.

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

QTIP를 사용하면 정보를 문서 위에 묶어 두는 데 완벽하게 작동합니다.

문서 텍스트의 특정 부분을 선택하는 것과 관련하여 Todd는 최상의 방법을 가지고 있으며 이에 대한 질문도 발견했습니다.

요소에서 텍스트 선택 (마우스로 강조 표시하는 것과 유사함)

텍스트를 선택하면 id, QTIP를 사용하십시오 팁 라인으로 (문제의 범위를 가리키는). 여기에 설명 된대로 이것은 즉시 스타일로 만들어 질 수 있습니다.

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

이것은 QTIP 플러그인을 사용하는 흥미로운 방법입니다.이 정보 중 일부가 도움이 되었기를 바랍니다.

마커스.

Answer 3

Todd는 기본적으로 신청서 작성을 제외하고 여기서해야 할 대부분의 모든 것을 설명했습니다. 메모리에 두 개의 목록이 있어야합니다. 주석 중 하나와 태그 중 하나, DOM에서 두 가지를 연결하는 방법 (고유 ID). Window 스크롤 위치에 대한 요소를 이동하는 방법에 대한 유사한 게시물을 확인하는 것이 좋습니다. 주어진 시간에 어떤 태그가 보이는지 결정하는 방법이 필요하며 표준 jQuery 위치 함수 중 하나로 그렇게 할 수 있다고 생각합니다. 두 요소 사이에 선을 그리는 데 동일합니다. 간단한 검색이 생성됩니다 http://api.jquery.com/position/. 어떤 태그가 보이는지 결정한 후에는 적절한 주석으로 주석 UI 요소를 다시 채울 수 있고 위치를 찾은 다음 태그 된 요소에서 주석 요소로 줄을 그릴 수 있습니다. 댓글을 편집 할 수 있어야하고 양식 제출없이 저장할 것으로 예상되는 경우 데이터베이스가 필요하며 편집이 완료되면 댓글을 지속하려면 AJAX 호출이 필요합니다.

텍스트 입력 필드에 대해 이야기하고 있다면 훨씬 어려울 것이며 표준 입력 요소를 매우 쉽게 할 수 있다고 생각하지 않습니다. 이 기능 중 일부 (YUI?)를 노출시킬 수있는 풍부한 텍스트 편집기 중 하나를 확인하고 플러그인과 결합합니다.

Answer 4

Draw Lines와 관련하여, 나는 내 자신의 질문과 답변에서 코드를 사용할 수있게했습니다.

드래그 가능한 것과 드롭 가능한 사이에 선을 그리는 방법?

태그 부분은 작업 할 수있을 때 충분히 쉽게 이음새를 jQuery 필드 선택 플러그인

도움이되기를 바랍니다.