Rev. 2.73

계속해서 미루어 오다가 이제서야 소개합니다. Transcorners는 대상 엘리먼트의 모서리에 라운드(또는 대각선) 효과를 부여하는 자바스크립트 효과입니다. 가볍기로 잘 알려진 mootools 자바스크립트 프레임웍을 기반으로 만들어 졌으며, 모든 브라우저에서 사용할 수 있도록 제작되었습니다. 아래는 Transcorners 사용해서 직접 그려본 라운드 효과와 예제입니다.

보시다시피 실시간에 가까운 라운딩이 가능하며 이미지로 디자인한 라운드에 버금가는 디테일을 보여줍니다. 무엇보다도 이미지의 로드를 줄여 한결 가벼운 웹사이트를 구축할 수 있다는 것이 가장 큰 장점이라 하겠습니다. 매우 탐나는 확장기능이라 Prototype.js에서 사용할 수 있도록 컨버전하였으며, 손 댄 김에 기능을 조금 확장했습니다. 1픽셀 이상인 보더의 처리가 가능하도록 하였으며(예제2와 같은 결과), 투명한 라운드를 사용할 수 있도록 했고, 어설픈 그림자 효과도 만들어 보았습니다. 잘 응용하면 드래그앤 드롭이 가능한 멋진 다이얼로그 윈도우도 만들수도 있겠습니다. 참고로, 위에서 실행 된 예제는 Prototype.js기반으로 돌린 것 입니다.

윈도우 테스트

※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.
※ 라이브러리 이름이 Transcorners에서 Roundable로 변경되었습니다.

Comments

8995856424_1.jpg

Prototype.js의 구석구석을 파해쳐 풀이한 도서가 4월에 출간될 예정이다. 영광스럽게도 본 도서의 베타리뷰를 맡아 진행하면서 느낀점을 간략하게 리뷰해 본다.

김영보 저자의 "Ajax Prototype.js - 프로토타입 완전분석"은 Prototype.js 프레임웍을 이해하는 것에 초점을 맞추고 있다. 코드 한줄 한줄을 낱낱히 분석하고 이해하는 과정을 적나라하게 담았다.(심지어는 정규식의 풀이과정까지) 이러한 분석은 자바스크립트의 기초를 다지고 나아가서는 개개의 작동방식을 이해함으로써 유기적으로 연결되어있는 큰 흐름을 볼수있게 한다. Prototype.js 프레임웍을 선호하거나 처음 시작하려는 이들에게 좋은 참고서이자 길잡이가 될 것이다.

Comments

Dan Webb에서 만든 자바스크립트 코드 하이라이터입니다. 아래에 보시는 것처럼 멋드러지게 드로잉합니다. HTML, 자바스크립트, 스타일시트 그리고 루비의 코드를 기본으로 지원하며, 확장 가능한 형태로 구축되어 있고, 썩 쓸만한 성능을 보여주고 있습니다. 이제 코드 색상입히기 노가다는 끝이군요. (이상하게도 IE의 주석처리에 문제가 있습니다.) 코드(code)태그에는 br태가그 필요치 않군요. IE는 br태그가 입력되면 더이상 진행되지 않습니다.

자바스크립트 예제

/*
This script detects external links in a page
and attaches a behaviour to them so they open
in a external window.
*/

function initialiseLinks() {
    if (document.getElementsByTagName) {
        var links = document.getElementsByTagName("A");
        for (var i = 0; i < links.length; i++) {
            if (links[i].href.indexOf("http:")==0) {
                // if the links URL starts with http: then we assume it's an external link
                links[i].onclick = function() {
                    window.open(this.href);
                    return false; // stop normal link behaviour
                }
            }
        }
    }
}

window.onload = initialiseLinks();

스타일시트 예제

.javascript  .comment {
	color : green; /* ffbgffg */
}
.javascript  .string {
	color : maroon;
}
.javascript  .keywords {
	font-weight : bold;
}
.javascript  .global {
	color : blue;
	font-weight: bolder;
}
.javascript  .brackets {
	color : Gray;
}
.javascript  .thing {
	font-size : 10px;
	background : url(ghgfhfg gh f.rtjhf);
}

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>CodeHighlighter example</title>
		<!-- This is all you need to do to get CodeHighlighter working -->
		<script type="text/javascript" src="CodeHighlighter.js"> </script>
		<script type="text/javascript" src="html.js"> </script>
	</head>
	<body>
		<p>Put your pre tags here!</p>
	</body>
</html>

Comments


예제1
//모든 코너에 반지름(radius) 30
new Transcorner( 'example1', { radius: 30 });
//background:#fee; border:1px solid #a00; 스타일 속성을 지님


예제2
//모든 코너에 반지름 10 (기본값)
new Roundable( 'example2');
//background:#4ff; border:2px solid #4bb; 스타일 속성을 지님

예제3
//상단 왼쪽 코너에만 반지름 20
new Roundable( 'example3', 'top left', { radius: 20 });

예제4
//상단 코너에만 반지름 10
new Roundable( 'example4', 'top');

예제5
//상단, 하단 오른쪽에 코너에 반지름 10 라인(cornerslinear transition)
new Roundable( 'example5', 'top, bottom right', { transition: Effect.Transitions.linear});