Pemalam atribut Pemegang Tempat tersuai dilaksanakan oleh jQuery_jquery

Pemegang tempat atribut baharu bagi kotak teks HTML5 Cina ialah atribut yang sangat berguna, tetapi siri IE sehingga IE9 tidak menyokong atribut ini, yang membuatkan semua orang teragak-agak apabila menggunakan atribut ini. Saya telah menulis banyak kawalan kecil yang serupa, tetapi ia tidak begitu serba boleh Di sini saya berkongsi pemalam jQuery pemegang tempat tersuai yang dipertingkatkan secara berperingkat. Satu perkara ialah ia mudah digunakan, dan semua orang boleh memperbaikinya mengikut keperluan mereka sendiri. Biasanya, terdapat sedikit pemalam jQuery yang ditulis Memandangkan ramai pelajar menggunakan jQuery, saya akan menulisnya di sini dalam bentuk pemalam jQuery.

Berikut ialah pengenalan ringkas kepada idea pelaksanaan.

1. Persembahan adalah sama mungkin dengan pemegang tempat asli html5
2. Peningkatan progresif tidak memproses pelayar yang menyokong pemegang tempat

1. Pertama, terdapat beberapa alat dan kaedah:

1.supportProperty(nodeType, property), dapatkan sama ada penyemak imbas menyokong sifat tertentu bagi kawalan tertentu
2.getPositionInDoc(sasaran, ibu bapa), dapatkan kedudukan objek dalam dokumen
3.$c, kaedah untuk mencipta objek Dom dengan pantas

Alat dan kaedah ini adalah beberapa kaedah biasa dan umum Jika anda mempunyai yang anda sendiri atau lebih sesuai, anda boleh menggantikannya sendiri.

2. Badan utama, objek Pemegang Tempat Tersuai. Objek ini terutamanya mengekalkan maklumat setiap kotak teks, termasuk kedudukannya, maklumat segera yang harus dipaparkan, dsb. Selain itu, ia juga mengandungi kaedah untuk mencipta maklumat dan kedudukan segera, serta peristiwa yang sepadan bagi objek.

Peristiwa diproses terutamanya dalam fungsi initEvents Perhatian khusus harus diberikan di sini kepada pemprosesan peristiwa maklumat segera Apabila maklumat segera diklik, tumpuan harus diletakkan semula ke kotak teks. Kotak teks perlu mengendalikan acara fokus dan kabur.

Salin kod Kod adalah seperti berikut:

$(self.hint).bind( 'klik', fungsi(e){
self.input.focus();
});

$(self.input).bind( 'fokus', fungsi(e){
self.hint.style.display = 'tiada';
});

$(self.input).bind( 'blur', function(e){
if(this.value == ''){
self.hint.style.display = 'sebaris';
}
});

Dua kaedah utama objek CustomPlacehodler ialah createHintLabel(teks, kedudukan) dan kedudukan(). createHintLabel digunakan untuk mencipta objek DOM maklumat segera, mencarinya dan mengembalikan objek ini. Kaedah kedudukan digunakan untuk memaksa mesej gesaan diubah kedudukannya. Terutamanya digunakan apabila saiz halaman berubah. Fungsi dan pelaksanaan kedua-dua kaedah ini agak mudah.

3. Bahagian pelaksanaan fungsi pemalam. Saya tidak akan menerangkan butiran tentang cara melaksanakan pemalam jQuery. Di sini, keupayaan disemak terlebih dahulu, dan jika pemegang tempat disokong secara asli, ia akan dikembalikan secara langsung.

Salin kod Kod adalah seperti berikut:

if(supportProperty('input', 'placeholder')){
kembali;
}

Langkah seterusnya ialah untuk menjana objek CustomPlaceholder yang sepadan berdasarkan objek input yang dipilih, simpan dalam tatasusunan, dapatkan objek DOM maklumat segera setiap objek, tambahkannya pada bekas dan akhir sekali lampirkan bekas ke objek badan.

Salin kod Kod adalah seperti berikut:

var CustomPlaceholders = [];
jika(ini.panjang > 0){
kotak var = $c('div', 'dk_placeholderfixed_box');
for(var i = 0, len = this.length; i < len; i ){
input var = ini[i];
customPlaceholders.push(CustomPlaceholder baharu(kotak, input, pilihan));
}

document.body.appendChild(kotak);
}

Akhir sekali, ada satu lagi perkara penting Ikatkan acara ubah saiz pada objek tetingkap Apabila objek tetingkap mencetuskan acara ubah saiz, letakkan semula semua objek Placehoder tersuai.

Salin kod Kod adalah seperti berikut:

$(window).bind( 'resize', function(e){
for(var i = 0, len = customPlaceholders.length; i < len; i ){
var customPlaceholder = customPlaceholders[i];
customPlaceholder.position();
}

});

Pemalam kecil yang ringkas ini selesai di sini.

Kod sumber pemalam:

(function($){

var eles = {
	div: document.createElement('div'),
	ul: document.createElement('ul'),
	li: document.createElement('li'),
	span: document.createElement('span'),
	p: document.createElement('p'),
	a: document.createElement('a'),
	fragment: document.createDocumentFragment(),
	input: document.createElement('input')
}
	
var supportProperty = function(nodeType, property){
	switch(arguments.length){
		case 0:
			return false;
		case 1:
			var property = nodeType, nodeType = 'div';
			property = property.split('.');
			
			if(property.length == 1){
				return typeof eles[nodeType][property[0]] !== 'undefined';
			}else if(property.length == 2){
				return typeof eles[nodeType][property[0]][property[1]] !== 'undefined';
			}
		case 2:
			property = property.split('.');
			
			if(property.length == 1){
				return typeof eles[nodeType][property[0]] !== 'undefined';
			}else if(property.length == 2){
				return typeof eles[nodeType][property[0]][property[1]] !== 'undefined';
			}
			
			return false;
			
			
		default:
			return false;
	}
};

var getPositionInDoc = function(target, parent) {
	if (!target) {
		return null;
	}
	var left = 0,
		top = 0;
	do {
		left += target.offsetLeft || 0;
		top += target.offsetTop || 0;
		target = target.offsetParent;
		if(parent && target == parent){
			break;
		}
	} while (target);
	return {
		left: left,
		top: top
	};
}

var $c = function(tagName, id, className){
	var ele = null;
	if(!eles[tagName]){
		ele = eles[tagName] = document.createElement(tagName);
	}else{
		ele = eles[tagName].cloneNode(true);
	}
	if(id){
		ele.id = id;
	}
	if(className){
		ele.className = className;
	}
	return ele;
};
	
var CustomPlaceholder = function(box, input, option){
	var self = this;
	var position = getPositionInDoc(input);
	self.input = input;
	
	self.option = {xOffset:0, yOffset:0};
	for(var item in option){
		self.option[item] = option[item];
	}
	self.hint = self.createHintLabel(input.getAttribute('placeholder'), position);
	box.appendChild(self.hint);
	
	self.initEvents = function(){
		$(self.hint).bind( 'click', function(e){
			self.input.focus();
		});
		
		$(self.input).bind( 'focus', function(e){
			self.hint.style.display = 'none';
		});
		
		$(self.input).bind( 'blur', function(e){
			if(this.value == ''){
				self.hint.style.display = 'inline';
			}
		});
	};
	
	self.initEvents();
};

CustomPlaceholder.prototype = {
	createHintLabel: function(text, position){
		var hint = $c('label');
		hint.style.cusor = 'text';
		hint.style.position = 'absolute';
		hint.style.left = position.left + this.option.xOffset + 'px';
		hint.style.top = position.top + this.option.yOffset + 'px';
		hint.innerHTML = text;
		hint.style.zIndex = '9999';
		return hint;
	},
	position: function(){
		var position = getPositionInDoc(this.input);
		this.hint.style.left = position.left + this.option.xOffset + 'px';
		this.hint.style.top = position.top + this.option.yOffset + 'px';
	}
};

$.fn.placeholder = function(option){
	if(supportProperty('input', 'placeholder')){
		return;
	}
	var customPlaceholders = [];
	if(this.length > 0){
		var box = $c('div', 'dk_placeholderfixed_box');
		for(var i = 0, len = this.length; i < len; i++){
			var input = this[i];
			if($(input).is(':visible')){
				customPlaceholders.push(new CustomPlaceholder(box, input, option));
			}
		}
		
		document.body.appendChild(box);
	}
	
	$(window).bind( 'resize', function(e){
		for(var i = 0, len = customPlaceholders.length; i < len; i++){
			var customPlaceholder = customPlaceholders[i];
			customPlaceholder.position();
		}
		
	});
};

})(jQuery);