mootools 기반 원 각 테두리 확장 코드

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 패키지 다운로드Untitled Page 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; } }); window.addEvent('domready', function() { $('demo').getElements('div').each(function(d) { d.setBorder('/upload/2010-2/20100207111018894.png', 8); }); });
새로 고침 을 해 야 외부 js 프레임 워 크 를 불 러 올 수 있 습 니 다.[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]예전 에 Jquery 로 도 하나 썼 는데 찾 을 수 없 었 습 니 다.원 리 는 같 습 니 다.

좋은 웹페이지 즐겨찾기