'html'에 해당되는 글 2건
2008. 7. 16. 09:28
Dan Vanderkam 라는 분이 새로은 컴포넌트인 dragtable을 발표했다고 하네요.
아주 간단하게 스크립트와 CSS만으로 Html table을 정렬하고 드래그 엔 드롭할 수 있는 컴포넌트 입니다.
아래는 해당 포트스의 글을 스크랩한 내용입니다.
테스트 페이지를 가보니 단순하게 table에 class만 명시해주면 다른건 해줄거 없이 바로 적용이 가능하더라구요!
나중에 함 사용해 봐야 할꺼 같습니다.
테스트 URL 과 open source project 입니다.
아주 간단하게 스크립트와 CSS만으로 Html table을 정렬하고 드래그 엔 드롭할 수 있는 컴포넌트 입니다.
아래는 해당 포트스의 글을 스크랩한 내용입니다.
지난 몇년간, Stuart Langridge씨의 sorttable 자바스크립트 라이브러리가 널리 사용되었습니다. 이유를 알기는 쉽습니다. 테이블 태그에 class=sortable를 추가하기만 하면 컬럼 헤더가 자동으로 정렬을 지원하도록 클릭할 수 있었기 때문입니다. 아주 쉽죠.
하지만 때때로 정렬 기능이 충분하지 않을 수 있습니다. 만약 테이블에서 한개나 두개의 컬럼에 포커스를 주고 싶을때는요? 클라이언트측 응용프로그램에서는 다룰 컬럼을 드래그해서 다음 칼럼으로 가져다 놓으면 됩니다. 왜 웹 응용프로그램에서는 안될까요?
dragtable로 들어가면. sorttable과 같이, 단순한 class 속성을 통해서도 HTML 테이블이 새 기술을 가지게 할 수 있습니다
하지만 때때로 정렬 기능이 충분하지 않을 수 있습니다. 만약 테이블에서 한개나 두개의 컬럼에 포커스를 주고 싶을때는요? 클라이언트측 응용프로그램에서는 다룰 컬럼을 드래그해서 다음 칼럼으로 가져다 놓으면 됩니다. 왜 웹 응용프로그램에서는 안될까요?
dragtable로 들어가면. sorttable과 같이, 단순한 class 속성을 통해서도 HTML 테이블이 새 기술을 가지게 할 수 있습니다
테스트 페이지를 가보니 단순하게 table에 class만 명시해주면 다른건 해줄거 없이 바로 적용이 가능하더라구요!
나중에 함 사용해 봐야 할꺼 같습니다.
테스트 URL 과 open source project 입니다.
'ººº::Development™:: > ::WEB™::' 카테고리의 다른 글
| [Javascript] 실수 소수점 처리 - 반올림, 버림 (0) | 2009.10.01 |
|---|---|
| [PHP] 내림 / 올림 / 반올림 함수 (0) | 2009.07.09 |
| [CSS] 메뉴를 손쉽게 꾸며보자 (0) | 2008.09.23 |
| [JavaScript] Giva Labs이 만든 콤보박스 (0) | 2008.07.09 |
| 투명한 iFrame 만들기 (0) | 2007.04.04 |
2007. 4. 4. 13:11
투명한 iFrame 만들기
iFrame을 사용해 웹 페이지 중간에 다른 페이지의 내용을 넣을 경우가 있다.
하지만 웹 페이지의 백그라운드 부분에 다른 이미지가 있는 상태에서 iFrame을 넣을 경우 백 그리운드 이미지와 매칭되지 않는 경우가 있는데 이럴 때 투명한 iFrame을 사용하면 된다.
iFrame을 삽입할 페이지에 위와 같이 주고
iFrame에 삽입될 패이지의 body 부분의 스타일을 위와 같이 주면 된다.
또한 iFrame을 투명하게만 주는것이 아니라 반투명 효과를 줄수고 있는데 이는 iFrame의 style을 적용해 주면 된다.
위와 같이 Alpha값의 Opacity값을 변경해 주면 도니다. Opacity값이 낮을수록 투명도가 증가한다.
iFrame을 사용해 웹 페이지 중간에 다른 페이지의 내용을 넣을 경우가 있다.
하지만 웹 페이지의 백그라운드 부분에 다른 이미지가 있는 상태에서 iFrame을 넣을 경우 백 그리운드 이미지와 매칭되지 않는 경우가 있는데 이럴 때 투명한 iFrame을 사용하면 된다.
<iFrame src="웹페이지 주소" allowTransparency="true" width="가로크기" height="세로크기>
iFrame을 삽입할 페이지에 위와 같이 주고
<body style="background:transparent">
iFrame에 삽입될 패이지의 body 부분의 스타일을 위와 같이 주면 된다.
또한 iFrame을 투명하게만 주는것이 아니라 반투명 효과를 줄수고 있는데 이는 iFrame의 style을 적용해 주면 된다.
<iFrame src="" style="filter:Alpha( Opacity=65 );">
위와 같이 Alpha값의 Opacity값을 변경해 주면 도니다. Opacity값이 낮을수록 투명도가 증가한다.
'ººº::Development™:: > ::WEB™::' 카테고리의 다른 글
| [Javascript] 실수 소수점 처리 - 반올림, 버림 (0) | 2009.10.01 |
|---|---|
| [PHP] 내림 / 올림 / 반올림 함수 (0) | 2009.07.09 |
| [CSS] 메뉴를 손쉽게 꾸며보자 (0) | 2008.09.23 |
| [Javascript] Dragtable - Table정렬 스크립트.. (0) | 2008.07.16 |
| [JavaScript] Giva Labs이 만든 콤보박스 (0) | 2008.07.09 |
