jquery 预览_jQuery评论预览

jquery 预览

I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I'll use the exact same CSS and HTML as yesterday.

我昨天发布了MooTools评论预览脚本，并收到了许多有关jQuery版本的请求。 问你应接受！ 我将使用与昨天完全相同CSS和HTML。

View Demo 观看演示

XHTML (The XHTML)

<div id="live-preview-form" class="lp-block">
	<p>
		<strong>Your Name:</strong><br />
		<input type="text" name="name" id="name" value="" class="input" /><br /><br />
		<strong>Your Email:</strong><br />
		<input type="text" name="email" id="email" value="" class="input" /><br /><br />
		<strong>Your Website:</strong><br />
		<input type="text" name="website" id="website" value="" class="input" /><br /><br />
		<strong>Your Comment:</strong><br />
		<textarea name="comment" id="comment" class="input" rows="10"></textarea>
	</p>
</div>

<div id="live-preview-display" class="lp-block">
	<div id="lp-avatar"></div>
	<div id="lp-name"></div>
	<div id="lp-comment"></div>
</div>

CSS (The CSS)

.lp-block		{ width:400px; float:left; }
.lp-block input, .lp-block textarea { width:90%; }
#live-preview-display 	{ background:#eee; padding:10px; margin-left:50px; margin-top:20px; }
#lp-name { font-weight:bold; }
#lp-avatar { float:right; margin:0 0 20px 20px; }
#lp-comment { padding-top:10px; font-style:italic; line-height:19px; }

jQuery JavaScript (The jQuery JavaScript)

$(document).ready(function() {
	var commentNode = $('#lp-comment'),
		nameNode = $('#lp-name'),
		name = $('#name'),
		website = $('#website');
	
	//comment...easy
	$('#live-preview-form input, #live-preview-form textarea').bind('blur keyup',function() {
		//comment
		commentNode.text($('#comment').val());
		commentNode.html($('#lp-comment').html().replace(/\n/g,'<br />'));
		
		//name & websites
		if($('#name').val()) {
			if(website.val() && /http:\/\/[A-Za-z0-9\.-]{3,}\.[A-Za-z]{2}/.test(website.val())) {
				nameNode.html('<a href="' + website.val() + '">' + name.val() + '</a> says:');
			}
			else {
				nameNode.text(name.val() + ' says:');
			}
		}
		
		//gravatar
		if($('#email').val() && /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test($('#email').val())) {
				var md5Email = MD5($('#email').val());
				$('#lp-avatar').html('<img src="http://www.gravatar.com/avatar.php?gravatar_id=' + md5Email + '&size=80&rating=G&default=http%3A%2F%2Fdavidwalsh.name%2Fwp-content%2Fthemes%2Fdavid-walsh%2Fgraphics%2Fcom.jpg" alt="' + $('#lp-name').val() + '" />');
		}
	});
});

On the keypress and blur events, we validate and format the commenter's name, avatar, website, and comments as necessary. As with yesterday's MooTools post, the MD5 function can be found here.

在按键和模糊事件上，我们会根据需要验证并设置评论者的姓名，头像，网站和评论的格式。 与昨天的MooTools帖子一样，可以在此处找到MD5功能。

View Demo 观看演示

Too easy!

太容易了！

翻译自: https://davidwalsh.name/jquery-comment-preview

jquery 预览