jquery 高亮插件写法

Aaron5

浏览: 425100 次
性别:
来自: 上海

最近访客更多访客>>

c332030

zhf1206

hcy973747509

xxx111111

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>test-plugin</title>
	<meta name="author" content="v.wupingteng">
	<script src="jquery/jquery-1.6.2.min.js"></script>
	<script src="jquery/external/jquery.metadata.js"></script>
	<script >		
		(function($) {  
		  // hilight插件的定义  
		  $.fn.hilight = function(options) { 
		  	//插件的默认配置
		  	var defaults = {
		  		foreground: 'red',  
		    	background: 'yellow' 
		  	};
		    var opts = $.extend({}, defaults, options);  
			
			//遍历每个元素
		    return this.each(function() {  
		      $this = $(this);  
		      var o = $.metadata ? $.extend({}, opts, $this.metadata()) : opts;  
		      $this.css({  
		        backgroundColor: o.background,  
		        color: o.foreground  
		      });  
		      var markup = $this.html();  
		      markup = $.fn.hilight.format(markup);  
		      $this.html(markup);  
		    });  
		  };  
		  
		  // 私有函数：debugging  
		  function debug(msg) {  
		    if (window.console && window.console.log)  
		      window.console.log(msg);  
		  };  
		  
		  // 暴露format函数  
		  $.fn.hilight.format = function(txt) {  
		    return '<strong>' + txt + '</strong>';  
		  };  
		  
		})(jQuery);   
 		
 		//当DOM完全加载完成时执行初始化
		(function($){
			$(function(){
				$('.hilight').hilight();   
			});
		})(jQuery);
	</script>
</head>
<body>
	<div class="hilight { background: 'red', foreground: 'white' }">    
	  背景红色，文字白色   
	</div>    
	<div class="hilight { foreground: 'orange' }">    
	  背景默认颜色 ，文字橙色
	</div>    
	<div class="hilight { background: 'green' }">    
	  背景绿色，文字默认颜色     
	</div>
	
	<li class="someclass" data="{some:'random', json: 'data'}">...</li>  
</body>
</html>