Да, это не очень сложно сделать.
Первый - вам нужно получить событие выбора
Событие 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.');
});
СМ.: 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 при нажатии на связанный текст. $ ( 'А) .click (функция () {}); Это вызывает функцию «щелчка», а затем вызывает эффект «показа» на Content1 Div.
Прочитайте код еще раз и убедитесь, что вы овладели логикой. Мне потребовалось немного времени, чтобы освоить это тоже !!!
Внутри этого Div, который показывается и скрывается, есть еще одна текстовая ссылка, которая будет скрывать Div.
$('a#close').click(function(){
$('#content1').hide('slow');
})
Если вы посмотрите на это, то увидите, что любой элемент «a» (ссылка) с идентификатором «close» вызовет эффект «hide» для содержимого 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
Вот и все. Просто сложите все вместе, чтобы получить, как вы хотите.