<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>
1178
06-22
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
