mootools 选择器_使用MooTools或jQuery的纽约时报样式文本选择小部件

mootools 选择器

Aaron Newton made a great request to me last week: why not make my MooTools Documentation Bookmarklet function more like the New York Time's text selection widget. NYT's text selection widget listens for text selection and presents the user with a "search" icon they may click on to learn more about that term. I've tried to answer that challenge -- not in bookmarklet form but in website widget form.

上周，亚伦·牛顿(Aaron Newton)向我提出了一个很好的要求：为什么不让我的MooTools文档书签功能更像《纽约时报》的文本选择小部件。 NYT的文本选择小部件会侦听文本选择，并向用户显示一个“搜索”图标，用户可以单击该图标以了解有关该术语的更多信息。 我试图回答这个挑战-不是以小书签的形式，而是以网站小部件的形式。

View MooTools Demo 查看MooTools演示 View jQuery Demo 查看jQuery演示

样本HTML (The Sample HTML)

<div id="content-area">
	.htaccess AJAX Apache / Server APIs Blog Bookmarking / Social Books Browsers CSS / Design Google Guest Blogger Hosting / Domain JavaScript jQuery
	link() Microsoft MooTools MySQL Optimization PHP Poll rand() Security Shell Theory / Ideas Usability / Accessibility XML / XHTML
	This blog is targeted toward all levels of web designers and developers. All web topics are discussed, including CSS, JavaScript (MooTools and jQuery), PHP, and more.
</div>

The above code is next to meaningless per the widget -- I simply want to illustrate the area I'd like it to work in has an ID of content-area.

上面的代码对每个小部件来说几乎没有意义-我只想说明我希望其工作的区域，其ID为content-area 。

MooTools JavaScript (The MooTools JavaScript)

window.addEvent('domready',function(){
	(function($) {
		//gets the selected text
		var getSelection = function() {
			return $try(
				function() { return window.getSelection(); },
				function() { return document.getSelection(); },
				function() { 
			        var selection = document.selection && document.selection.createRange();
					if(selection.text) { return selection.text; }
					return false;
			      }
			) || false;
		};
		//vars 
		var url = 'https://davidwalsh.name/?s={term}', selectionImage;
		//event to listen
		$('content-area').addEvent('mouseup',function(e) {
			var selection = getSelection();
			if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
				//ajax here { https://davidwalsh.name/text-selection-ajax }
				if(!selectionImage) {
					selectionImage = new Element('a',{
						href: url,
						opacity:0,
						id: 'selection-image',
						title: 'Click here to learn more about this term',
						target: '_blank'
					}).inject(document.body,'top');
				}
				//handle the every-time event
				//alert(selection);
				selectionImage.set('href',url.replace('{term}',encodeURI(selection))).setStyles({
					top: e.page.y - 30,	//offsets
					left: e.page.x - 13 //offsets
				}).tween('opacity',0);
			}
		});
		
		$(document.body).addEvent('mousedown',function() {
			//hider
			if(selectionImage) { selectionImage.tween('opacity',1); }
		});
		
	})(document.id);
});

During the mouseup event within the selected container (content-area), we determine if any text has been highlighted. If so, we:

在选定容器( content-area )内的mouseup事件中，我们确定是否突出显示了任何文本。 如果是这样，我们：

1. Insert the A element if it has not yet been injected into the body.

   如果尚未将A元素插入体内，则将其插入。

2. Change the A element's URL to accommodate for the new search term.

   更改A元素的URL以适应新的搜索词。

3. Position the element to at an offset position above where the mouse goes up.
   将元素定位到鼠标向上移动的偏移位置。

During every mousedown event we hide the A element.

在每次mousedown事件中，我们都会隐藏A元素。

jQuery JavaScript (The jQuery JavaScript)

/* attempt to find a text selection */
function getSelected() {
	if(window.getSelection) { return window.getSelection(); }
	else if(document.getSelection) { return document.getSelection(); }
	else {
		var selection = document.selection && document.selection.createRange();
		if(selection.text) { return selection.text; }
		return false;
	}
	return false;
}
/* create sniffer */
$(document).ready(function() {
	var url = 'https://davidwalsh.name/?s={term}', selectionImage;
	$('#content-area').mouseup(function(e) {
		var selection = getSelected();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			//ajax here { https://davidwalsh.name/text-selection-ajax }
			if(!selectionImage) {
				selectionImage = $('<a>').attr({
					href: url, 
					title: 'Click here to learn more about this term',
					target: '_blank',
					id: 'selection-image'
				}).hide();
				$(document.body).append(selectionImage);
			}
			selectionImage.attr('href',url.replace('{term}',encodeURI(selection))).css({
				top: e.pageY - 30,	//offsets
				left: e.pageX - 13 //offsets
			}).fadeIn();
		}
	});
	$(document.body).mousedown(function() {
		if(selectionImage) { selectionImage.fadeOut(); }
	});
});

Follows the same principal as above.

遵循与上述相同的原则。

View MooTools Demo 查看MooTools演示 View jQuery Demo 查看jQuery演示

想法与改进 (Ideas & Enhancements)

• Depending on your philosophy, you may want to implement a minimum character check as well:

  根据您的哲学，您可能还希望实施最小字符检查：

  
  if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,'')) && selection.length > 4) { //5 char min
  

• You may want to also fidget with adding/modifying text selection with keyboard keys as well. I've chosen to pass on that.
  您可能还想通过键盘按键添加/修改文本选择来烦躁。 我选择继续。

• Saving the selection content via AJAX for analytical reasons may not be a bad idea either.

  出于分析原因， 通过AJAX保存选择内容也可能不是一个坏主意。

Have any other ideas for improvement? Would you have any use for this on your website(s)?

还有其他需要改进的想法吗？ 您在网站上对此有什么用？

翻译自: https://davidwalsh.name/text-select-widget

mootools 选择器