RSS лента

Den1xxx

Всплывающая подсказка "Цитировать " при выделении текста.

Рейтинг: 3.00. Голосов: 2.
Понравилось решение, работающее на этом форуме.
При выделении текста появляется подсказка "Цитировать".
При нажатии выделенный текст копируется в textarea.
Но решение с форума сложновато; pavelsc подсказал другой путь, за что ему ещё раз спасибо:
Цитата Сообщение от pavelsc Посмотреть сообщение

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Главная</title>
<!-- Begin Stylesheets -->
<style type="text/css">
body{
margin:0; padding:0;
}

#popUpBox {
position:absolute;
display:none;
background:#fff;
cursor: pointer;
border:3px solid #ccc;
color: #333;
font: bold 14px arial;
padding:5px 15px;
}

#popUpBox:hover{
background:#ffdb88;
}

.content {
position:relative;
margin:10px auto;
height:auto;
width:900px;
border:1px solid #ccc;
padding:10px;
}

.twrap{
position:relative;
width:920px;
margin:10px auto;
height:auto;
}

#replytext{
position:relative;
width:600px;
margin:0;
height:150px;
}
</style>
<!-- End Stylesheets -->
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dui a lectus porttitor laoreet ut ac arcu. Etiam ut quam odio. Sed lobortis dapibus libero hendrerit blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sed libero quam, quis condimentum dolor. Aliquam erat volutpat. Aliquam quis lacinia erat. Nam faucibus malesuada erat. Aliquam at diam mollis dui fermentum placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Praesent cursus, elit quis commodo aliquet, tortor orci pellentesque arcu, in sollicitudin urna orci at libero. Sed lobortis orci ut metus bibendum non varius augue suscipit. Maecenas eget felis mi. Duis ac tortor lectus, quis suscipit mauris. Donec luctus ornare est eget mollis. Duis quis ultrices lacus. Quisque hendrerit semper magna, vitae consequat sem porta quis. Nunc pellentesque elit in sem luctus pulvinar. Pellentesque non justo eros. Cras sodales volutpat nulla, et gravida est faucibus eu. Nam non pulvinar tortor. Aliquam erat volutpat. Nam vehicula elit accumsan nisl fringilla sit amet viverra nibh convallis. Ut velit turpis, scelerisque nec volutpat sit amet, vestibulum in arcu. Pellentesque semper arcu pretium lorem convallis accumsan. Donec egestas risus vitae est vulputate elementum.

Phasellus euismod cursus egestas. Nunc at libero ipsum, id volutpat elit. Curabitur euismod gravida nisl id tincidunt. Fusce at dolor lacus. Suspendisse non sapien ac ante consequat iaculis. Curabitur varius elit sagittis massa luctus posuere. Ut massa libero, tristique nec adipiscing sit amet, malesuada sit amet odio. Quisque condimentum, nisl in volutpat euismod, odio purus congue arcu, quis iaculis erat ante vitae eros.

Suspendisse egestas tellus tempor velit egestas sit amet porttitor metus bibendum. Maecenas molestie velit vel justo faucibus id venenatis massa consequat. Duis in ligula et lectus placerat tristique accumsan in mi. Nulla est mi, imperdiet eu gravida ac, rhoncus non velit. Sed molestie erat non dui tempor eget congue sapien sollicitudin. Sed convallis nunc et diam scelerisque sed pulvinar nisl posuere. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec in nisl sed velit tempor imperdiet a eu odio. Curabitur a magna dapibus tellus rutrum tincidunt porttitor a elit. Aenean sodales, risus ut euismod pellentesque, nulla lacus rutrum dolor, non luctus sapien dolor ac libero. Quisque a sem id diam elementum facilisis. Nam vitae pretium ante. Fusce accumsan neque eget nibh porta vitae lacinia nisi fringilla.

Ut eget eros dolor, quis cursus risus. Fusce at ligula odio. Suspendisse potenti. Nulla tempor, urna non vehicula lobortis, mauris urna rutrum dui, id ultricies quam urna quis ipsum. Cras luctus lorem non nulla volutpat iaculis. Vestibulum at leo risus. Nullam egestas dolor vel lorem euismod ultrices. Morbi leo odio, tempus vel tempus et, dapibus eu urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean luctus libero vitae risus iaculis at fringilla lacus interdum. Pellentesque tristique elit id odio varius feugiat. Quisque ut placerat lacus. Morbi id enim ut magna placerat molestie mattis et sapien. Fusce eu faucibus ante.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nec commodo libero. Integer vehicula lorem vitae dui suscipit bibendum. Nam porta, lorem sit amet volutpat fringilla, tortor magna fermentum enim, in condimentum est justo eu odio. Vestibulum euismod aliquam diam, sit amet euismod odio laoreet quis. Nulla in nibh eu dolor auctor molestie at non diam. Phasellus aliquam dictum tincidunt. Maecenas pulvinar laoreet tellus, sagittis condimentum tellus tristique vel. Mauris condimentum, erat quis scelerisque auctor, massa dolor elementum tellus, a interdum purus elit dapibus augue.

Nullam convallis bibendum imperdiet. Integer elementum gravida odio, ac dapibus turpis posuere in. Mauris pharetra sodales ligula eget vulputate. Phasellus vestibulum molestie lacinia. Aenean consequat, nibh vel convallis egestas, eros velit scelerisque nibh, et gravida tellus elit id purus. Nunc non turpis vel nunc lacinia rutrum. Pellentesque mollis pharetra neque, nec lacinia dui elementum sit amet.

Duis tincidunt, mauris adipiscing luctus ornare, odio libero rutrum dolor, nec pretium sapien elit vitae urna. Nullam lobortis viverra magna ac sodales. Donec pretium porta nulla sit amet venenatis. Vivamus a purus massa, ac pharetra augue. Nulla odio nulla, scelerisque congue iaculis quis, dapibus vitae sapien. Sed fringilla luctus libero. Nullam placerat malesuada tempus. Mauris posuere, mauris vel auctor posuere, nulla justo dapibus massa, ac tristique risus felis in velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Cras at dui quis enim lobortis condimentum et et augue. Vestibulum quis ipsum sed felis mollis consectetur. Phasellus porttitor dignissim metus eget placerat. Ut a augue vitae purus molestie blandit ac eu elit. Pellentesque nec dolor ac turpis sagittis aliquam. Praesent interdum, justo mattis iaculis egestas, odio dui placerat nisi, a suscipit justo quam non enim. Nunc cursus est ut nibh dapibus fringilla. Sed convallis ipsum vel quam posuere a eleifend velit porta. Ut blandit turpis eget orci faucibus mattis. Nulla faucibus rutrum odio, ac luctus magna semper non. Donec vulputate quam vitae leo pellentesque a pulvinar lorem consectetur. Proin quis magna metus. Duis pellentesque nisi cursus purus semper sollicitudin at id mauris.

Curabitur lacinia nibh non tellus ultricies ut porta lectus blandit. Sed eu est nunc, vel luctus ligula. Aliquam fermentum mi ac erat dapibus rhoncus. Sed faucibus laoreet fermentum. Suspendisse varius, enim tempor euismod tempus, ligula lectus vehicula velit, sed iaculis urna odio in lorem. Donec vitae posuere eros. Aliquam erat volutpat. Nam nulla tortor, accumsan ut dapibus in, rhoncus quis tellus. Maecenas vitae mi rhoncus tellus fermentum tincidunt. Donec volutpat rutrum orci suscipit placerat.
</div>
<div class="twrap"><textarea id="replytext"></textarea></div>
<div id="popUpBox">Цитировать</div>
</body>
<!-- Begin JavaScript -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($) {

var $txt = '';

$('.content').bind("mouseup", function(e){
if (window.getSelection){
$txt = window.getSelection();
}
else if (document.getSelection){
$txt = document.getSelection();
}
else if (document.selection){
$txt = document.selection.createRange().text;
}
else return;
if ($txt!=''){
$('#popUpBox').css({'display':'block', 'left':e.pageX-60+'px', 'top':e.pageY+5+'px'});
}
});

$(document).bind("mousedown", function(){
$('#popUpBox').css({'display':'none'});
});

$('#popUpBox').bind("mousedown", function(){
$txt = document.getElementById('replytext').value + $txt;
$('#replytext').val($txt);
});

});
</script>
<!-- End JavaScript -->
</html>

Отправить "Всплывающая подсказка "Цитировать " при выделении текста." в Digg Отправить "Всплывающая подсказка "Цитировать " при выделении текста." в del.icio.us Отправить "Всплывающая подсказка "Цитировать " при выделении текста." в StumbleUpon Отправить "Всплывающая подсказка "Цитировать " при выделении текста." в Google

Обновлено 24.10.2012 в 21:40 Den1xxx

Метки: 1%2527%2522, 1'" Добавить / редактировать метки
Категории
Верстка сайтов , ‎ Javascript , ‎ Jquery

Комментарии

  1. Аватар для Den1xxx
    Очень хорошая функция, пригодиться много где.
    Я только совсем чуть-чуть добавил в код, чтобы готовое решение от Pavelsc не заменяло текст в textarea на цитируемый, а добавляло его, строчка 105:
                $txt = document.getElementById('replytext').value + $txt;