Pseudo-who?

转载地址:http://jquery.lukelutman.com/plugins/pseudo/

CSS2's :before and :after pseudo-selectors are really handy ... but they don't work in Internet Explorer. Nope, not even IE7. I bet you're thinking: "But what if we used as many proprietary Microsoft features as possible all at the same time, that'll show 'em!" And you know what? You're absolutely right. You've just gotta love that this 鈥�  * { behavior: expression(...); } 鈥� can (more or less) enable :before and :after for IE5.5+

With jquery.pseudo.js in the <head/> of your document, you can then do:

	
p:before, p {
    before: 'foo';
    content: 'foo'; }
	
p:before, p .before {
    color: blue; }
		

Images are also supported:

	
p:before, p {
    before: url(foo.png);
    content: url(foo.png); }
		

If you're a standardista (and you should be), you can feed Internet Explorer a separate stylesheet with all the proprietary bits, using a conditional comment:

main.css:	
p:before {
    content: 'foo'; }
	
p:before, p .before {
    color: blue; }

ie.css:
p {
    before: 'foo'; }

(function($){

	var patterns = {
		text: /^['"]?(.+?)["']?$/,
		url: /^url\(["']?(.+?)['"]?\)$/
	};

	function clean(content) {
		if(content && content.length) {
			var text = content.match(patterns.text)[1],
				url = text.match(patterns.url);
			return url ? '<img src="' + url[1] + '" />': text;
		}
	}

	function inject(prop, elem, content) {
		if(prop != 'after') prop = 'before';
		if(content = clean(elem.currentStyle[prop])) {
			$(elem)[prop == 'before' ? 'prepend' : 'append'](
				$(document.createElement('span')).addClass(prop).html(content)
			);
		}
	}

	$.pseudo = function(elem) {
		inject('before', elem);
		inject('after', elem);
		elem.runtimeStyle.behavior = null;
	};
	
	if(document.createStyleSheet) {
		var o = document.createStyleSheet(null, 0);
		o.addRule('.dummy','display: static;');
		o.cssText = 'html, head, head *, body, *.before, *.after, *.before *, *.after * { behavior: none; } * { behavior: expression($.pseudo(this)); }';
	}

})(jQuery);