Rev. 2.73

581915.gif

Shaun Inman씨는 깔끔한 파일 타입 인풋을 자바스크립트와 CSS 그리고 DOM을 이용해 만드는 과정을 소개했다. 우선 데모를 확인하기 바란다. 뭔가 허전하지 않은가? 텍스트 영역과 업로드 버튼이 사라지고 없다. "Choose file..."을 클릭하여 파일을 선택하면 자바스크립트에 의해 자동으로 파일의 업로드가 진행되어 조금 더 사용성이 좋은 파일 업로드 환경을 제공할 수 있다.

label 태그의 class에는 "cabinet"을 그리고 input태그의 class에 "file"을 정의했다. 충돌을 막기위해 부모 엘리먼트가 필요하며, 부모 엘리먼트의 class는 "SI-FILES-STYLIZED"로 가정하자.

마크업 하기

<label class="cabinet"> 
    <input type="file" class="file" />
</label>

스타일시트

.SI-FILES-STYLIZED label.cabinet {
    width: 79px;
    height: 22px;
    background: url(btn-choose-file.gif) 0 0 no-repeat;

    display: block;
    overflow: hidden;
    cursor: pointer;
}

.SI-FILES-STYLIZED label.cabinet input.file {
    position: relative;
    height: 100%;
    width: auto;
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

첫 번째 프로퍼티는 포장될 엘리먼트의 스타일이다. 버튼의 이미지까지 들고 있다. 두번째 프로퍼티는 인풋의 스타일이다. 완전히 투명한 알파값을 지니고 있다. 그리고 정확하게 두 엘리먼트가 포개지는 구성을 가지고 있다는 것을 알 수 있다. 허상으로 나타는 input 버튼이 작동하게 하기 위한 트릭이라는 것을 알 수 있다.

자바스크립트

<script type="text/javascript" src="/path/to/si.files.js"></script>

자바스크립트 파일을 인클루드하고 onload 이벤트에 SI.Files.stylizeAll();를 선언하면 완료된다. IE 5.5+, 파이어폭스 1.5+, 사파리 2+ 에서 작동되며, 라이브러리와 예제는 이곳에서 다운로드 할 수 있다. 딱 한가지 단점이라면 자바스크립트가 작동하지 않는 환경에서는 업로드가 정상적으로 작동하지 않는 것이다.

Comments

Sprinkle.gif

sprinkle은 클라이언트 사이드 인클루드(CSI)를 자바스크립트로 구현한 것이다. div 엘리먼트에 iframe 처럼 src속성을 부여해 원하는 파일을 인클루드할 수 있게 한다. src에 할당된 파일을 불러오는 방법으로 Ajax가 사용되고 있다. 표준을 따르는 방법은 아니지만, 마크업이 매우 간결하다. IE6, 7, 파이어폭스2, 사파리3 에서 태스트 되었고, Prototype 기반 사이트에서 사용할 수 있도록 컨버전한 라이브러리도 있다.

Comments

lazierload.gif

lazierLoad는 보다 빠른 웹페이지 로딩을 위해 만들어진 자바스크립트 라이브러리이다. 웹페이지의 HTML이 완성되는 시점에 이벤트(oncontentloaded)가 발생하고 현재 스크롤 위치와 창크기를 분석하여 방문객이 실제로 보고 있는 영역에 속한 이미지만을 로드하여 마치 브라우저의 페이지 읽기 속도가 향상된 것처럼 속이는 기발한 이미지 로더이다. 위아래로 긴 페이지에 이미지가 즐비하거나, 사진 위주의 블로그에는 더없이 좋은 솔루션이다. 더불어 미스클릭 또는 엉뚱한 검색으로 연결된 타게팅 되지 않은 방문객들(스크롤 하지않고 바로 떠나는)에게 이미지 트래픽을 더이상 낭비하지 않아도 된다.(잘못된 내용입니다.)

화면에 표시되지 않은 나머지 이미지들은 로딩 인디케이터(Indicator)와 blink 이미지로 대체되며, 스크롤이 해당영역으로 이동했을 때 원본 이미지를 로드하고 할당된 이벤트를 파괴한다. lazierLoad는 Prototype기반 사이트에서 자바스크립트 파일을 추가하는 것 만으로 손쉽게 적용할 수 있다.

<script type="text/javascript" src="js/bramus/lazierLoad.js"></script>

Comments