Возможность комментирования iWork, возможно ли это реализовать с помощью JQUERY

Question

У iWork есть возможность выделить текст, а затем пометить комментарий к этому тексту.Затем комментарий связывается строкой с выделенным текстом.

Мне любопытно, можно ли что-то подобное реализовать в JQUERY.Что меня озадачило, так это:A.Как нарисовать линию и обновить ее, когда пользователь изменяет текст B.Как выделить текст и каким-то образом пометить его?

Я хотел бы услышать ваши мысли о том, возможно ли это вообще с помощью 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').скрыть();Скрывает Content1 Div для начала.Обратите внимание, как существует связь между jQuery и CSS в том, что в данном случае используется идентификатор, но он мог бы использовать класс точно таким же образом, как аргумент внутри круглой скобки.

Затем мы переходим к следующему разделу кода, который “Показывает” DIV при нажатии на связанный текст.$('a).щелкните(функция(){});Это вызывает функцию “click”, а затем вызывает эффект “show” для содержимого 1 Div.

Прочтите код еще раз и убедитесь, что вы уловили логику.Мне тоже потребовалось некоторое время , чтобы освоиться с этим !!!

Внутри этого Div, который отображается и скрывается, есть еще одна текстовая ссылка, которая скроет Div.

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

Если вы посмотрите на это, вы можете увидеть, что любой элемент “a” (ссылка) с идентификатором “close” вызовет эффект “скрыть” для содержимого 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 идеально подходило бы для сохранения информации, размещенной над документом.

Что касается выбора определенных частей текста документов, у Тодда там лучший метод, и я также нашел этот вопрос SO:

Выделение текста в элементе (аналогично выделению с помощью мыши)

Как только вы выделите текст, я бы заключил его в промежуток с id, и используйте qtip совет в виде строки (указывающей на рассматриваемый интервал).Это может быть сделано "на лету" и любого размера, как описано здесь:

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

Это интересный способ использования плагина qtip, я надеюсь, что часть этой информации помогла вам.

Маркус.

Answer 3

Тодд в основном описал почти все, что вам нужно сделать здесь, помимо написания заявки для вас.Вам нужно иметь в памяти два списка;один из комментариев и один из тегов, а также способ связать их в DOM (уникальные идентификаторы).Я бы посоветовал ознакомиться с похожими сообщениями о том, как переместить элемент относительно положения прокрутки окна.Вам понадобится какой-то способ определить, какие теги видны в любой момент времени, и я подозреваю, что вы можете сделать это с помощью одной из стандартных функций позиционирования jquery;то же самое необходимо для проведения линии между двумя элементами.Простой поиск дает http://api.jquery.com/position/.После того как вы определили, какие теги видны, вы можете повторно заполнить элемент пользовательского интерфейса comments соответствующими комментариями, найти их расположение и провести линию от помеченного элемента к элементу comment.Если вам также нужна возможность редактировать комментарии и вы ожидаете, что они будут сохранены без отправки формы, вам понадобится база данных и вызов ajax для сохранения комментариев после завершения редактирования.

Если вы говорите о поле ввода текста, это будет намного сложнее, и я не думаю, что вы могли бы сделать это с любым из стандартных элементов ввода очень легко.Я бы проверил один из существующих текстовых редакторов, который может предоставить некоторые из этих функций (YUI?) и объединить его с вашим плагином.

Answer 4

Что касается линий рисования, я предоставил доступ к коду из моего собственного вопроса и ответа

Как провести грань между перетаскиваемым и сбрасываемым?

Деталь с БИРКОЙ шьется достаточно легко, когда вы можете работать с Плагин выбора поля jQuery

надеюсь, это поможет.