mootools 选择器_使用MooTools或jQuery AJAX记录文本选择-CSDN博客

mootools 选择器

One technique I'm seeing more and more these days (CNNSI.com, for example) is AJAX recording of selected text. It makes sense -- if you detect users selecting the terms over and over again, you can probably assume your visitors are searching that term on Google, Yahoo, etc. I've duplicated this functionality using my favorite JavaScript library, MooTools, and another JavaScript library, jQuery.

这些天来，我越来越见到的一种技术(例如CNNSI.com)是AJAX录制所选文本。这是有道理的-如果您检测到用户一遍又一遍地选择术语，则可能会假设您的访问者正在Google，Yahoo等上搜索该术语。我已经使用我最喜欢JavaScript库MooTools和另一个复制了此功能JavaScript库，jQuery。

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

MooTools JavaScript (The MooTools JavaScript)


window.addEvent('domready',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;
	};
	//event to listen
	var selectRequest = new Request({
		url: 'ajax-selection-copy.php',
		method: 'post'
	});
	$('content-area').addEvent('mouseup',function(e) {
		var selection = getSelection();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			selectRequest.send('selection=' + encodeURI(selection));
		}
	});
});

The first step is attempting to grab the selected text during the mouseup within our designated container. If we find a text selection we fire an AJAX request to a PHP script which will save the text selection.

第一步是尝试在鼠标移至我们指定容器内的过程中获取所选文本。如果找到文本选择，则将AJAX请求发送到PHP脚本，该脚本将保存文本选择。

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() {
	$('#content-area').mouseup(function() {
		var selection = getSelected();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			$.ajax({
				type: 'post',
				url: 'ajax-selection-copy.php',
				data: 'selection=' + encodeURI(selection)
			});
		}
	});
});

The MooTools code translated to jQuery.

MooTools代码已翻译为jQuery。

PHP (The PHP)


if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' && $selection = trim($_POST['selection'])) {
	mysql_query('INSERT INTO text_selections (selection,date_selected) VALUES(\''.mysql_escape_string(stripslashes($selection)).'\',NOW())');
}

The above PHP code is very primitive. Depending on the setup of your system (PHP Framework, security settings, etc.) you will want to implement additional measures to prevent attacks on this script.

上面PHP代码非常原始。根据您的系统设置(PHP框架，安全设置等)，您将希望实施其他措施来防止对该脚本的攻击。

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

Recording text selections is a great way to discover what topics and/or terms your audience is interested in. You may also want to provide more information on these terms within posts.

记录文本选择是发现受众感兴趣的主题和/或术语的好方法。您可能还想在帖子中提供有关这些术语的更多信息。

What are your thoughts on this? Do you think this is too much like Spyjax? Perfectly OK?

您对此有何想法？您认为这太像Spyjax吗？完全可以吗？