x-yuri,
Да, я в первом сообщении не упомянул (и хорошо), что вряд ли код (функция выделения фрагмента) будет где-то еще использоваться. Функция будет является частью небольшого скрипта и действовать только в его рамках. Цитата:
Цитата:
И "простоту" я упомянул зря - она не только не однозначна, но как оказалось, ситуативна :yes: . |
Цитата:
Цитата:
function getSel(){ if( window.getSelection ) return window.getSelection(); else return document.selection.createRange().text; } Цитата:
<a id="quote-link" href="#">Цитировать</a> <script type="text/javascript">new QuoteLink('#quote-link')</script> и вижу, что при щелчке по этой ссылке происходит копирование выделенного текста (так как не было указано куда, соответственно компонент не доделан). Т.е. я вижу, что происходит, но не вижу как это реализовано. Если мне нужно узнать, как это реализовано я смотрю исходник компонента function QuoteLink( el ){ this._el = $(el); $("body").mouseup( this._onMouseUp_body.bind(this) ); this._el.click( this._onClick.bind(this) ); } QuoteLink.prototype._onMouseUp_body = function(){ this._text = $Range.stringify($Selection.getRange()); } QuoteLink.prototype._onClick = function(){ alert(this._text); } и вижу, что назначаются два обработчика, что происходит в обработчиках, но не вижу реализацию назначения обработчиков, как находится выделение. Т.е. на каждом уровне у меня есть минимум необходимых деталей. В общем-то я не знаю вашей задачи, поэтому какие-то действия могут быть лишними или может быть лучший вариант организации кода, но вынесение библиотечного кода в любом случае не помешает Кроме того, в моем случае нету никаких необоснованно глобальных переменных. Вообще можно было еще всякие детали поубирать, вот только jQuery не предоставляет такие возможности. Хотя по задумке и не должна. Все должно быть максимально просто. Просто пишем код и пишем, и никаких дополнительных движений не делаем. Зачем разбивать код на вменяемые части? Ведь это дополнительные движения, сложно. Зачем повторное использование? Лучше мы в каждом плагине напишем то же самое. Зачем нам компоненты, если можно общаться с объектами через одну функцию ($(foo).dialog('open'))? Цитата:
|
Цитата:
, но пока работает не совсем так, и делает еще не все, что я задумал. Цитата:
Цитата:
Цитата:
Цитата:
Сам скрипт (условно назвал "просто вставить цитату" - видел на некоторых форумах, вот пытаюсь сделать что-то подобное) // Задаем необходимые переменные var qPanel = $('<div id="past" style="position:absolute; display:none;"><a href="" id="link">Вставить цитату в поле<a></div>'); var textarea = $('textarea'); function getSel() { // Функция возвращает текстовое выделение if (window.getSelection) // !IE, используем метод getSelection return window.getSelection().toString(); else // IE, используем объект selection return document.selection.createRange().text; } qPanel.click(function () { // Обработчик события textarea.val(textarea.val() + '<blockquote>' + getSel() + '</blockquote>\r\n').focus(); $(this).hide(); return false; }); qPanel.appendTo('body'); $('body').mouseup(function(event){ var widthqPanel = qPanel.outerWidth(); if (getSel()) { qPanel .css({ top: event.pageY - 40, left: event.pageX - widthqPanel/3, display: 'block', opacity: 0 }) .animate({ top: '-=' + 10 + 'px', opacity: 1 }, 250); } }); $('body').click(function () { if (!getSel()) qPanel.hide(); }); |
Цитата:
Цитата:
я бы сделал как-то так (ошибки не исправлял, может даже новые добавил) var QuotePanel = new Class({ initialize: function( textarea ){ this._el = textarea; this._panel = new Element('div', {'html': '<a href="#">Вставить цитату в поле</a>'}); document.body.addEvents({ 'mouseup': this._onMouseUp_body.of(this), 'click': this._onClick_body.of(this) }); this._panel.addEvent( 'click', this._onClick_panel.of(this) ); this._panel.inject( document.body ); }, _onMouseUp_body: function( e ){ if( ! Selection.get() ) return; var panelWidth = this._panel.getStyle('width').parseInt(); var top = e.page.y - 40; var left = e.page.x - panelWidth/3; this._panel .setStyles({ 'top': top, 'left': left, 'display': 'block', 'opacity': 0 }) .morph({ 'opacity': 1, 'top': top-10 }); }, _onClick_body: function( e ){ if( ! Selection.get() ) this._panel.setStyle('display', ''); }, _onClick_panel: function( e ){ this._el.value += this._el.value+'<blockquote>'+Selection.get()+'</blockquote>\r\n'; this._el.focus(); this._panel.setStyle('display', ''); e.preventDefault(); } }); |
x-yuri,
Ловко вы перешли на MooTools! :) Там, где скрипт будет использоваться есть только jQuery, так что придется остаться на нем. Возник вопрос - (e) это сокращенная форма записи (event)? И еще один - долго ломал над ним голову и так и не придумал ничего путного. Хочу на панельку, всплывающую после выделения мышкой, повесить таймер - если, допустим, 3 секунды ничего не происходит (нет клика на ней и вне ее), панель исчезает. Если до истечения этих 3 секунд был клик вне панели, панель тут же исчезает (если был клик на панели, цитата вставляется в поле ответа). Может подскажите как это реализовать? |
Цитата:
Цитата:
|
Цитата:
|
Цитата:
function Class( methods ){ var r = function(){ if( this.initialize ) this.initialize(); }; $.extend( r.prototype, methods ); return r; } String.prototype.parseInt = function(){ return parseInt(this); }; Function.prototype.of = function( o ){ var self = this; return function(){ return self.apply(o, arguments); } }; var QuotePanel = new Class({ initialize: function( textarea ){ this._el = $(textarea); this._panel = $('<div><a href="#">Вставить цитату в поле</a></div>'); document.body.mouseup( this._onMouseUp_body.of(this) ); document.body.click( this._onClick_body.of(this) ); this._panel.click( this._onClick_panel.of(this) ); this._panel.appendTo( $('body') ); }, _onMouseUp_body: function( e ){ if( ! Selection.get() ) return; var panelWidth = this._panel.css('width').parseInt(); this._panel .css({ 'top': e.pageY - 40, 'left': e.pageX - panelWidth/3, 'display': 'block', 'opacity': 0 }) .animate({ 'opacity': 1, 'top': '-='+10+'px' }); }, _onClick_body: function( e ){ if( ! Selection.get() ) this._panel.css('display', ''); }, _onClick_panel: function( e ){ this._el.value += this._el.value+'<blockquote>'+Selection.get()+'</blockquote>\r\n'; this._el.focus(); this._panel.css('display', ''); e.preventDefault(); } }); да, я, кстати, подразумевал, что лишний css, который не изменяется я бы поместил в отдельный файл. Это несколько усложняет использование, но упрощает код Цитата:
var QuotePanel = new Class({ _onMouseUp_body: function( e ){ ... this._panel ... .animate( { ... }, { 'complete': function(){ setTimeout( function(){ this._hidePanel(); }.of(this), 3000 ); }.of(this) }); }, _onClick_body: function( e ){ ... this._hidePanel(); }, _hidePanel: function(){ this._panel.css('display', ''); } }); вот только зачем ее автоматически убирать? Пользователь ее и так убрать сможет, кликнув на пустом месте. Главное, чтобы она не перекрывала выделение. А вы еще говорите, что все должно быть максимально просто ;) |
замена алерта ... как раз висит 3 секунды и удаляется по клику ...
замечания принимаются ))) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script language="JavaScript" type="text/javascript"> function position(b) { b = typeof b == "string" ? document.getElementById(b) : b; var a = document.documentElement, c = document.body, e = self.pageXOffset || a && a.scrollLeft || c && c.scrollLeft || 0; t = self.pageYOffset || a && a.scrollTop || c && c.scrollTop || 0; var f = b.offsetHeight, g = b.offsetWidth, d = document.compatMode == "CSS1Compat" && !window.opera ? a.clientWidth : c.clientWidth; a = document.compatMode == "CSS1Compat" && !window.opera ? a.clientHeight : c.clientHeight; if (document.compatMode == "CSS1Compat" && window.opera) { d = window.innerWidth; a = window.innerHeight } b.style.left = Math.floor(e + (d - g) / 2) + "px"; b.style.top = Math.floor(t + (a - f) / 2) + "px" }; window.alert = function (b) { b = b.replace(/\n/gim, "<br />"); var a = document.createElement("div"); a.style.position = "absolute"; a.style.color = "#0000FF"; a.style.backgroundColor = "#FFFACD"; a.style.border = "1px solid #000"; a.style.padding = "0px 4px"; a.innerHTML = b; document.onmousedown = function () { a && document.body.removeChild(a); c && window.clearTimeout(c); document.onmousedown = null }; document.body.appendChild(a); position(a); var c = window.setTimeout(function () {a && document.body.removeChild(a);document.onmousedown = null}, 3E3) }; </script> </head> <body> <a href="#" onclick="alert('замена алерта'); return 0">кликни</a> </body> </html> |
Однобуквенные переменные
![]() |
Часовой пояс GMT +3, время: 20:43. |