'javascript'에 해당되는 글 3건
2008/07/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 입니다.
이올린에 북마크하기
이올린에 추천하기'개발 > ::WEB™::' 카테고리의 다른 글
| [Javascript] Dragtable - Table정렬 스크립트.. (0) | 2008/07/16 |
|---|---|
| [JavaScript] Giva Labs이 만든 콤보박스 (0) | 2008/07/09 |
| 투명한 iFrame 만들기 (0) | 2007/04/04 |
Trackback Address :: http://nalnari.tistory.com/trackback/60
2008/03/28 17:42
이제는 정리좀 하면서 살자..ㅜㅜ;
숫자형식에서 1000단위로 ,로 구분하는 스크립트
function commify( n )
{
var reg = /(^[+-]?\d+)(\d{3})/; // 정규식
n += ''; // 숫자를 문자열로 변환
{
var reg = /(^[+-]?\d+)(\d{3})/; // 정규식
n += ''; // 숫자를 문자열로 변환
while( reg.test( n ) )
n = n.replace( reg, '$1' + ',' + '$2' );
return n;
}
하나씩 정리하면서 문서화 하기 연습!!!
'개발 > ::JAVA™::' 카테고리의 다른 글
| [JAVA] 동적으로 class load (0) | 2008/08/12 |
|---|---|
| [JAVA] ANT 빌드 및 배포 (0) | 2008/07/29 |
| [JAVA] 두 날짜를 입력받아 날짜의 차이를 구하기 (0) | 2008/07/14 |
| [JAVA] 톰켓 스텍 사이즈 조절.. (0) | 2008/07/02 |
| [JAVA] Java 기반 RIA 플랫폼으로서의 Swing++? (0) | 2008/06/24 |
| [JAVA Script] 숫자 1000 단위로 ,찍기 (0) | 2008/03/28 |
Trackback Address :: http://nalnari.tistory.com/trackback/46
2008/02/20 18:54
아래 글을 atbloger.kr 에서 스크랩한 내용입니다.
- 글 내용을 출력해 주는 부분에 아래 태그 삽입
: 예) <div class="article"> </div> tag 사이에 아래 스크립트 코드를 삽입
위 스크립트는 TC를 기준으로 설명 드린것입니다. 다른 블로그를 사용하시는 분은 해당 블로그의 도움말 등을 확인하시고 해당하는 부분에 삽입해 주시기 바랍니다.
스크립트 삽입시 글 내용을 출력해주는 부분 아래쪽에 스크립트 코드를 삽입하셔야 자신의 글이 정상적으로 Relation 서버에 등록이 되니 이점 유의해 주시기 바랍니다.
스크립트 상에서 보시면 articleNum 부분에 은 해당하는 글의 글 번호를 가져오기 위한 부분입니다. 이 부분은 자신의 블로그에 맞게 해당하는 글의 링크 URL을 가져올 수 있는 내용으로 수정해 주시기 바랍니다.
JavaScritp 버전 공개합니다.
Blog RelationShip의 TC용 플로그인과는 별개로 TC를 사용하지 않는 사용자들을 위해 자바스크립트 버전을 공개합니다.
자바스크립트 버전은 크로스 도메인과 같은 문제로 인해 jQuery를 사용한 jSon방식을 사용하고 있습니다.
jQuery 사용으로 인해 기존에 jQuery를 사용하시는 분들은 적용시 jQuery버전등을 확인해 주시기 바랍니다.
1. 적용 방법
- 자신의 블로그 스킨에 <head>와 </head>테그 사이에 아래 테그를 삽입
자바스크립트 버전은 크로스 도메인과 같은 문제로 인해 jQuery를 사용한 jSon방식을 사용하고 있습니다.
jQuery 사용으로 인해 기존에 jQuery를 사용하시는 분들은 적용시 jQuery버전등을 확인해 주시기 바랍니다.
1. 적용 방법
- 자신의 블로그 스킨에 <head>와 </head>테그 사이에 아래 테그를 삽입
<script src="http://www.atbloger.kr/blogerScript/jquery/jquery-1.2.1.js" type="text/javascript"></script>
<script src="http://www.atbloger.kr/blogerScript/atbloger_jQuery.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://www.atbloger.kr/blogerScript/css/atbloger.css" />
<script src="http://www.atbloger.kr/blogerScript/atbloger_jQuery.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://www.atbloger.kr/blogerScript/css/atbloger.css" />
- 글 내용을 출력해 주는 부분에 아래 태그 삽입
: 예) <div class="article"> </div> tag 사이에 아래 스크립트 코드를 삽입
<!---- Relation Script Start ----->
<script language="javascript">
// gray, red, green, blue, violet 중 선택.
var articleNum = '';
articleNum = articleNum.substring( articleNum.lastIndexOf( "/" ) ); // TC 용
// articleNum, color, excludeDomain, listCount
// 제외 도메인을 ';'를 기준으로 입력
// 출력될 리스트 개수
atBlog_relationQuery( articleNum, 'red', '', 5 ); // jQuery 용
// atBlog_relationQuery( '', 'red' ); // prototype 용
</script>
<!---- Relation Script End ----->
<script language="javascript">
// gray, red, green, blue, violet 중 선택.
var articleNum = '';
articleNum = articleNum.substring( articleNum.lastIndexOf( "/" ) ); // TC 용
// articleNum, color, excludeDomain, listCount
// 제외 도메인을 ';'를 기준으로 입력
// 출력될 리스트 개수
atBlog_relationQuery( articleNum, 'red', '', 5 ); // jQuery 용
// atBlog_relationQuery( '', 'red' ); // prototype 용
</script>
<!---- Relation Script End ----->
위 스크립트는 TC를 기준으로 설명 드린것입니다. 다른 블로그를 사용하시는 분은 해당 블로그의 도움말 등을 확인하시고 해당하는 부분에 삽입해 주시기 바랍니다.
스크립트 삽입시 글 내용을 출력해주는 부분 아래쪽에 스크립트 코드를 삽입하셔야 자신의 글이 정상적으로 Relation 서버에 등록이 되니 이점 유의해 주시기 바랍니다.
스크립트 상에서 보시면 articleNum 부분에 은 해당하는 글의 글 번호를 가져오기 위한 부분입니다. 이 부분은 자신의 블로그에 맞게 해당하는 글의 링크 URL을 가져올 수 있는 내용으로 수정해 주시기 바랍니다.
'자료 > ::Atbloger™::' 카테고리의 다른 글
| Atbloger javascript버전 적용 방법입니다. (0) | 2008/02/20 |
|---|---|
| metablog를 안통하고 블로그들간의 관계를 맺어 주는 서비스 - 소셜네트워크 (0) | 2008/02/20 |
Trackback Address :: http://nalnari.tistory.com/trackback/44
