脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → Mootools → mootools 圆角边框

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

 更新时间：2010年02月07日 11:10:20   作者：  
做圆角边框一般有两种方法，背景图片或者DIV+CSS拼出来。
JQuery下面有个扩展是用纯JS生成的圆角，不过和DIV+CSS拼出来是一样的道理，圆角看上去都比较粗糙。

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

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

setBorder
Element.implement({
setBorder: function(pic, len) {
/// <summary>
/// 设定容器边框（图片）.
/// 已测div
/// </summary>
/// <param name="pic">图片地址</param>
/// <param name="len">边框宽度</param>
/// <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;
}
});



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

HTML代码
复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
Element.implement({
setBorder: function(pic, len) {
/// <summary>
/// 设定容器边框（图片）.
/// 已测div
/// </summary>
/// <param name="pic">图片地址</param>
/// <param name="len">边框宽度</param>
/// <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('border.png', 8);
});
});
</script>
</head>
<body>
<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>
</body>
</html>

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

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

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

相关文章

  • Mootools 1.2 手风琴（Accordion）教程

    Mootools 1.2 手风琴（Accordion）教程

    继续我们的“更多”（More）库里面的插件教程，今天我们来学习一下可能是最流行最受欢迎的插件——手风琴。
    2009-09-09
  • Mootools 1.2教程 输入过滤第二部分（字符串）

    Mootools 1.2教程 输入过滤第二部分（字符串）

    今天我们来看一看MooTools给我们提供的额外的一些处理字符函数。这只是MooTools字符串处理中的一部分，并不包含一些神秘的函数（比如toCamelCase()）和使用正则表达式处理字符串的函数。
    2009-09-09
  • 用Mootools获得操作索引的两种方法分享

    用Mootools获得操作索引的两种方法分享

    用Mootools获得操作索引的两种方法分享，需要的朋友可以参考下。
    2011-12-12
  • Mootools 1.2教程 滑动效果（Slide）

    Mootools 1.2教程 滑动效果（Slide）

    今天继续我们的Mootools 1.2教程的第23课，我们今天来讲一下Fx插件中的Fx.Slide。通过该插件，可以让你把内容以滑动的方式显示出来。它使用起来非常简单，是你UI工具箱中一个很好的工具。
    2009-09-09
  • 背景图跟随鼠标移动的Mootools插件实现代码

    背景图跟随鼠标移动的Mootools插件实现代码

    背景图跟随鼠标移动的Mootools插件实现代码，学习mootools的朋友可以参考下。
    2011-12-12
  • Mootools 1.2教程 滚动条（Slider）

    Mootools 1.2教程 滚动条（Slider）

    到现在为止，初始化这些MooTools插件对象就会开始变得越来越熟悉。滚动条（Slider）没有任何不同，你要创建一个新的滚动条，定义滚动条和滑块相关的元素，然后设置你的选项，再创建一些回调事件的控制函数。
    2009-09-09
  • 基于mootools插件实现遮罩层新手引导

    基于mootools插件实现遮罩层新手引导

    公司项目有这个需求，刚好这段时间在学习了mootools，于是把功能写成了mootools插件，个人感觉mootools在这方面比jquery强多了
    2012-05-05
  • Mootools 1.2教程 排序类和方法简介

    Mootools 1.2教程 排序类和方法简介

    从今天开始，我们将开始讲解“更多”（more）库里面的更多插件。Sortables是一个非常强大的插件，能够真正地扩大你的用户界面设计的选择面。
    2009-09-09
  • MooTools 1.2介绍

    MooTools 1.2介绍

    有人最近要求我们写一个关于MooTools 1.2的30天的教程，这似乎也是个很不错的主意，于是我们决定现在就开始。在这些教程中，我们假设用户没有任何MooTools或者是JavaScript经验，但是至少有基本的HTML和CSS知识。
    2009-09-09
  • 通过Mootools 1.2来操纵HTML DOM元素

    通过Mootools 1.2来操纵HTML DOM元素

    今天我们来深入地学习一下如果操纵HTML元素。通过MooTools 1.2，你可以添加新元素到一个HTML页面中，也可以删除元素，以及改变任何样式或者元素参数，这些都非常容易。
    2009-09-09

最新评论