<!DOCTYPE html>
<!--
声明：练习素材来自于jquery基础教程
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Developing Plugins</title>
<link rel="stylesheet" href="../../css/08.css" type="text/css" />
<link rel="stylesheet" href="../../ui-themes/smoothness/jquery-ui-1.10.0.custom.min.css" type="text/css" />
<script src="../../lib/jquery.js"></script>
<script src="../../lib/jquery-ui-1.10.0.custom.min.js"></script>
<script>
/*提供灵活的方法参数*/
//我们看到了一些通过调整参数来使插件满足自己需求的例子。那些巧妙构思的插件通过定义恰当
//的默认值，并允许我们覆盖这些默认值提供了极大的灵活性，在轮到我们编写的时候，也要为用户
//考虑到
(function($){
$.fn.shadow = function(){
return this.each(function(){
var $originalElement = $(this);
for(var i=0;i<5;i++){
$originalElement.clone().css({
position:'absolute',
left:$originalElement.offset().left+i,
top:$originalElement.offset().top+i,
margin:0,
zIndex:-1,
opacity:0.1
}).appendTo('body');
}
});
}
})(jQuery);
// $(document).ready(function(){
// $('h1').shadow();
// });
/*参数对象*/
//作为一种向插件用户公开选项的方式，对象要比刚刚使用的参数列表更加友
//好。 对象会为每个参数提供一个有意义的标签，同时也会让参数次序变得无关紧要
(function($){
$.fn.shadowUtils = function(options){
return this.each(function(){
var $originalElement = $(this);
for(var i=0;i<options.copies;i++){
$originalElement.clone().css({
position:'absolute',
left:$originalElement.offset().left+i,
top:$originalElement.offset().top+i,
margin:0,
zIndex:-1,
opacity:options.opacity
}).appendTo('body');
}
});
}
})(jQuery);
//TEST
// $(document).ready(function(){
// var options = {copies:6,opacity:0.1};
// $('h1').shadowUtils(options);
// });
/*默认参数值*/
/*
随着方法的参数逐渐增多，始终指定每个参数并不是必须的。此时，一组合理的默认值可以
增强插件接口的易用性。所幸的是，以对象作为参数可以帮我们很好地达成这一目标，它可以为
用户未指定的参数自动传入默认值
* */
(function($){
$.fn.shadowUtilsDefault = function(opts){
return this.each(function(){
var $originalElement = $(this);
var defaultOpts = {copies:5,opacity:0.1};
var options = $.extend(defaultOpts,opts);
for(var i=0;i<options.copies;i++){
$originalElement.clone().css({
position:'absolute',
left:$originalElement.offset().left+i,
top:$originalElement.offset().top+i,
margin:0,
zIndex:-1,
opacity:options.opacity
}).appendTo('body');
}
});
}
})(jQuery);
// $(document).ready(function(){
// $('h1').shadowUtilsDefault({copies:6,margin:1});
// });
/*回调函数*/
//当然，方法参数也可能不是一个简单的数字值，可能会更复杂。在各种jQuery API中经常可
//以看到另一种参数类型，即回调函数
(function($){
$.fn.shadowUtilsCallback = function(opts){
var defaults = {
copies:5,
opacity:0.1,
copyOffset:function(index){
return {x:index,y:index};
}
};
var options = $.extend(defaults,opts);
return this.each(function(){
var $originalElement = $(this);
for(var i=0;i<options.copies;i++){
var offset = options.copyOffset(i);
$originalElement.clone().css({
position:'absolute',
left:$originalElement.offset().left+offset.x,
top:$originalElement.offset().top+offset.y,
margin:0,
zIndex:-1,
opacity:options.opacity
}).appendTo('body');
}
})
}
})(jQuery);
//Test
// $(function(){
$('h1').shadowUtilsCallback();
// //修改参数
// $('h1').shadowUtilsCallback({
// copyOffset:function(index){
// return {x:-index,y:-index};
// }
// });
// });
/*可定制的默认值*/
//要支持默认值的可定制，需要把它们从方法定义中移出，然后放到外部代码可以访问的地方
(function($){
$.fn.shadowCustomParamsMethod = function(opts){
$.fn.shadowCustomParamsMethod.default = {
copies:5,
opacity:0.1,
copyOffset:function(index){
return {x:index,y:index};
}
};
var options = $.extend({},$.fn.shadowCustomParamsMethod.default,opts);
return this.each(function(){
var $originalElement = $(this);
for(var i=0;i<options.copies;i++){
var offset = options.copyOffset(i);
$originalElement.clone().css({
position:'absolute',
left:$originalElement.offset().left+offset.x,
top:$originalElement.offset().top+offset.y,
margin:0,
zIndex:-1,
opacity:options.opacity
}).appendTo('body');
}
});
}
})(jQuery);
//Test
$(function(){
$.fn.shadowCustomParamsMethod.default = {
copies:10,
opacity:0.1
}
$('h1').shadowCustomParamsMethod({copies:8});
});
</script>
</head>
<body>
<div id="container">
<h1>Inventory</h1>
<table id="inventory">
<thead>
<tr class="one">
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr class="two" id="sum">
<td>Total</td>
<td></td>
<td></td>
</tr>
<tr id="average">
<td>Average</td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>
<td>4</td>
<td>2.50</td>
</tr>
<tr>
<td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a></td>
<td>12</td>
<td>4.32</td>
</tr>
<tr>
<td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a></td>
<td>14</td>
<td>7.89</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
