mootools 获取类名_使用MooTools的AJAX用户名可用性检查器

mootools 获取类名

Another one of my popular, early blog posts has been AJAX Username Availability Checker Using MooTools 1.2. Looking back now, the code is atrocious and very inflexible. I've taken some time to update the post to be more reliable, clean, and speedy.

我的另一篇热门的早期博客文章是使用MooTools 1.2的AJAX用户名可用性检查器 。 现在回想起来，代码是残酷的，而且非常僵化。 我花了一些时间来更新帖子，使其更加可靠，整洁和快捷。

View Demo 观看演示

HTML (The HTML)

<p><strong>Please provide your desired username: &nbsp;&nbsp;&nbsp;</strong>
	<input type="text" name="username" id="username" size="30" class="basis" />
</p>

The foundation of the system is the INPUT element with a specific ID. No other elements are required. The eventual IMG element will be generated by MooTools.

系统的基础是具有特定ID的INPUT元素。 不需要其他元素。 最终的IMG元素将由MooTools生成。

CSS (The CSS)

.basis		{ padding:5px; border:1px solid #ccc; }
.available	{ border:1px solid #008000; background:#90ee90; }
.taken		{ border:1px solid #fc0; background:#fffea1; }

You'll want to create three CSS classes: one that is always applied to the input, another class which represents an available username, and one last class to represent a taken username. Green is always good to use for positive results. As for how you denote a taken username, please don't be a #f00.

您将要创建三个CSS类：一个始终应用于输入CSS类，另一个代表可用用户名的类，最后一个代表采用用户名的类。 绿色总是可以用来产生积极效果的。 至于您表示采用的用户名的方式，请不要使用＃f00 。

MooTools JavaScript (The MooTools JavaScript)

var AvailabilityChecker = new Class({

	//implements
	Implements: [Options,Events],

	//options
	options: {
		trigger: 'keyup',
		offset: { x:0, y:0 },
		minLength: 5,
		availableClass: 'available',
		takenClass: 'taken',
		availableImage: '',
		takenImage: '',
		url: 'ajax-username-check.php'
	},
	
	//initialization
	initialize: function(element,options) {
		//set options
		this.setOptions(options);
		this.element = document.id(element);
		this.lastValue = this.element.value;
		this.cache = {};
		//create the image which will display to the side
		var pos = this.element.getCoordinates();
		this.image = new Element('img',{
			src: '',
			styles: {
				'z-index': 100000,
				position: 'absolute',
				top: pos.top + this.options.offset.y,
				left: pos.left + pos.width + this.options.offset.x
			}
		}).inject(document.body);
		//workers and removers
		this.comparer = function(response) {
			this.cache[this.element.value] = response;
			var state = (response == '1') ? 'available' : 'taken';
			this.element.addClass(this.options[state + 'Class']);
			this.image.set('src',this.options[state + 'Image']);
			return state;
		};
		this.remover = function() {
			this.element.removeClass(this.options.availableClass).removeClass(this.options.takenClass);
		};
		//create the request which will be frequently used
		this.request = new Request({
			url: this.options.url,
			method: 'get',
			link: 'cancel',
			onRequest: this.remover.bind(this),
			onComplete: this.comparer.bind(this)
		});
		//add listener
		this.element.addEvent(this.options.trigger,function() {
			var value = this.element.value;
			if(value.length >= this.options.minLength && value != this.lastValue) {
				this.validate(this.lastValue = value);
			}
		}.bind(this));
	},
	
	//a method that does whatever you want
	validate: function(value) {
		this.fireEvent('check');
		if(this.cache[value] != undefined) {
			return this.comparer(this.cache[value]);
		}
		else {
			return this.request.send('username=' + value + '&ajax=1');
		}
		return this;
	}
	
});

//USAGE!
window.addEvent('domready', function() {
	var validator = new AvailabilityChecker('username',{
		trigger: 'keyup',
		availableImage: 'checkmark.jpg',
		takenImage: 'warning.jpg',
		offset: { x: 4, y: 4 },
		minLength: 4,
		url: '<?php echo $_SERVER["PHP_SELF"]; ?>'
	});
});

The original class featured a host of problems. No element was required, a new Request was being generated every keystroke, results weren't cached. Ugh. Those have all been fixed and I've added event functionality to the class. I've also implemented many new MooTools best practices.

最初的课程有很多问题。 不需要任何元素，每次击键都会生成一个新请求，并且不会缓存结果。 啊。 这些都已修复，并且我在类中添加了事件功能。 我还实现了许多新的MooTools最佳做法。

View Demo 观看演示

I know the class doesn't feature many methods and still isn't ultimately flexible but the truth is that this type of widget can be very specific. What this class aims to accomplish to provide you with a basic class you can build from.

我知道该类没有很多方法，并且最终还是不灵活，但事实是这种小部件可以非常具体。 本课程的目的是为您提供基础课程。

翻译自: https://davidwalsh.name/ajax-checker-mootools

mootools 获取类名