基于mootools的圆角边框扩展代码_Mootools-js教程-PHP中文网

基于mootools的圆角边框扩展代码_Mootools

php中文网

发布： 2016-05-16 18:34:55

原创

1148人浏览过

JQuery下面有个扩展是用纯JS生成的圆角，不过和DIV+CSS拼出来是一样的道理，圆角看上去都比较粗糙。

用背景图片要好看得多，问题是不能拉伸，最简单做法就是用四个角小图片加边框拼出来。不过这样多出N多图片，一堆乱七八糟的代码，相当不爽。

有一个很有技巧的方法，用一张大图片+CSS来做，原理如下。

用一张大的背景图片做圆角，用CSS分别取四个角和边再拼成一个DIV。这样不仅可以解决圆角，还可以生成其它特殊的边框（比如阴影）。
但是每次使用都要加CSS也很不爽，于是用mootools写了一个Element类的扩展。

DolphinPHP

一个基于ThinkPHP5.0开发的开源PHP快速开发框架，秉承极简、极速、极致的开发理念，为开发集成了基于数据-角色的权限管理机制，集成多种灵活快速构建工具，可方便快速扩展的模块、插件、钩子、数据包，统一了模块、插件、钩子、数据包之间的版本和依赖关系，进一步降低了代码和数据的沉余，以方便开发者快速构建自己的应用。

131

查看详情

复制代码代码如下:

 
setBorder 
Element.implement({ 
setBorder: function(pic, len) { 
/// 
/// 设定容器边框（图片）. 
/// 已测div 
/// 
/// 图片地址 
/// 边框宽度 
/// 
var content = this.clone(); 
var width = this.getSize().x + len * 2; 
var height = this.getSize().y + len * 2; 
this.empty().setStyles({ 'width': width, 'height': height }); 
var lt = new Element('div', { 
'styles': { 
'width': len, 
'height': len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat left top' 
} 
}); 
var rt = new Element('div', { 
'styles': { 
'width': width - len, 
'height': len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat right top' 
} 
}); 
var lb = new Element('div', { 
'styles': { 
'width': len, 
'height': height - len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat left bottom' 
} 
}); 
var rb = new Element('div', { 
'styles': { 
'width': width - len, 
'height': height - len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat right bottom' 
} 
}); 
content.inject(rb, 'top'); 
lt.inject(this, 'top'); 
rt.injectBottom(this); 
lb.injectBottom(this); 
rb.injectBottom(this); 
return this; 
} 
}); 

这样在页面上直接调用setBorder方法传个背景图片，边框宽度进去就行了。

HTML代码

复制代码代码如下:

Untitled Page

显显示效果
mootools边框demo http://demo.jb51.net/js/mootools_yj/demo.htm
打包下载

<title>Untitled Page</title>
<script type="text/javascript" src="http://img.jb51.net/jslib/mootools.js"></script><script type="text/javascript"> 
Element.implement({ 
setBorder: function(pic, len) { 
/// <summary> 
/// 设定容器边框（图片）. 
/// 已测div 
///  
/// <param name="pic">图片地址 
/// <param name="len">边框宽度 
/// <returns type="Element" /> 
var content = this.clone(); 
var width = this.getSize().x + len * 2; 
var height = this.getSize().y + len * 2; 
this.empty().setStyles({ 'width': width, 'height': height }); 
var lt = new Element('div', { 
'styles': { 
'width': len, 
'height': len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat left top' 
} 
});

var rt = new Element('div', { 
'styles': { 
'width': width - len, 
'height': len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat right top' 
} 
});

var lb = new Element('div', { 
'styles': { 
'width': len, 
'height': height - len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat left bottom' 
} 
});

var rb = new Element('div', { 
'styles': { 
'width': width - len, 
'height': height - len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat right bottom' 
} 
});

content.inject(rb, 'top');

lt.inject(this, 'top'); 
rt.injectBottom(this); 
lb.injectBottom(this); 
rb.injectBottom(this);

return this; 
} 
});

window.addEvent('domready', function() { 
$('demo').getElements('div').each(function(d) { 
d.setBorder('/upload/2010-2/20100207111018894.png', 8); 
}); 
}); 
</script><div id="demo"> 
<div style="width:150px; height:100px;"> 
<div style="width:100%; height:100%; background-color:Red;"></div> 
</div> 
<div style="width:80px; height:130px;"> 
<div style="width:100%; height:100%; background-color:Green;"></div> 
</div> 
</div> 
需要刷新一下才能加载外部js框架

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

以前用Jquery也写过一个，居然找不着了，不过原理是一样的。