'자바스크립트/jQuery'에 해당되는 글 5건

  1. 2014.11.26 jQuery File Upload
  2. 2013.09.07 jQuery를 이용한 테이블 셀병합
  3. 2009.11.06 레이어창을 브라우저 화면 가운데 띄우기
  4. 2009.10.19 jQuery 기반 Library 들 소개
  5. 2009.01.06 jQuery File Tree 예제

jQuery File Upload

자바스크립트/jQuery 2014. 11. 26. 16:54
소스받기 : https://blueimp.github.io/jQuery-File-Upload/
API문서  : https://github.com/blueimp/jQuery-File-Upload/wiki
Demo    : http://blueimp.github.io/jQuery-File-Upload/


저작자표시 비영리 변경금지
:

jQuery를 이용한 테이블 셀병합

자바스크립트/jQuery 2013. 9. 7. 00:09

통계 화면을 구성하던 중 같은 값에 대해서 셀을 병합해야 했는데 서버 스크립트에서 복잡하게 하지 말고

jQuery를 이용해 클라이언트단에서 구현하는 방법을 찾아봤습니다.

이미 같은 문제로 고민해서 구현해 놓은 것 중에 어떤 분 말씀대로 가장 깔끔한 코드를 첨부합니다 ^^

셀이 병합되는 모습을 보기 싫다면 테이블을 감추고 병합 후에 보여주면 될 것 같습니다.

 

문제 화면

유효성 검사버전1.1
데이터 검사버전1.1
데이터 검사버전1.3

 

요구하는 화면

유효성 검사버전1.1
데이터 검사버전1.1
1.3


/*
 *
 * 같은 값이 있는 열을 병합함
 *
 * 사용법 : $('#테이블 ID').rowspan(0);
 *
 */    
$.fn.rowspan = function(colIdx, isStats) {      
    return this.each(function(){     
        var that;    
        $('tr', this).each(function(row) {     
            $('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
                 
                if ($(this).html() == $(that).html()
                    && (!isStats
                            || isStats && $(this).prev().html() == $(that).prev().html()
                            )
                    ) {           
                    rowspan = $(that).attr("rowspan") || 1;
                    rowspan = Number(rowspan)+1;
 
                    $(that).attr("rowspan",rowspan);
                     
                    // do your action for the colspan cell here           
                    $(this).hide();
                     
                    //$(this).remove();
                    // do your action for the old cell here
                     
                } else {           
                    that = this;        
                }         
                 
                // set the that if not already set
                that = (that == null) ? this : that;     
            });    
        });   
    }); 
};
 
 
/*
 *
 * 같은 값이 있는 행을 병합함
 *
 * 사용법 : $('#테이블 ID').colspan (0);
 *
 */  
$.fn.colspan = function(rowIdx) {
    return this.each(function(){
         
        var that;
        $('tr', this).filter(":eq("+rowIdx+")").each(function(row) {
            $(this).find('th').filter(':visible').each(function(col) {
                if ($(this).html() == $(that).html()) {
                    colspan = $(that).attr("colSpan") || 1;
                    colspan = Number(colspan)+1;
                     
                    $(that).attr("colSpan",colspan);
                    $(this).hide(); // .remove();
                } else {
                    that = this;
                }
                 
                // set the that if not already set
                that = (that == null) ? this : that;
                 
            });
        });
    });
}

셀병합 호출
//첫번째 열을 병합한다.
$('#테이블 ID').rowspan(0);


출처 : http://shuiky.tistory.com/entry/jQuery%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%85%80%EB%B3%91%ED%95%A9


저작자표시 비영리 변경금지
:

레이어창을 브라우저 화면 가운데 띄우기

자바스크립트/jQuery 2009. 11. 6. 10:33
<div id="chapter_select"></div> 레이어창을 브라우져 화면가운데 띄우는 자바스크립트 예제입니다. jQuery로 작성하였습니다.
function fnOpenChapter() {
	var obj = $('#chapter_select');
	var iHeight = (document.body.clientHeight / 2) - obj.height() / 2 + document.body.scrollTop;
	var iWidth = (document.body.clientWidth / 2) - obj.width() / 2 + document.body.scrollLeft;

	obj.css({
		position: 'absolute'
		, display:'block'
		, top: iHeight
		, left: iWidth
	});
}

여기서 주의할 것은 document.body.scrollTop 와 document.body.scrollLeft 입니다. 화면에 스크롤이 생겨서 스크롤 위치가 변경될 경우에는 스크롤 값도 레이어 위치에 영향을 주므로 해당 값도 확인해서 레이어 위치값에 반영합니다.
저작자표시 비영리 변경금지
:

jQuery 기반 Library 들 소개

자바스크립트/jQuery 2009. 10. 19. 11:14
jQuery 기반 UI Library

jQuery UI는 jQuery 에서 공식적으로 진행하고 있는 UI  Library입니다. 현재는 기반이 되는 기능과 특수효과, 그리고, 가장 많이 사용할 것으로 여겨지는 Widget 들을 제공하고 있습니다.

그리고, 강력한 테마기능을 갖추고 있습니다. 다른 UI 플러그인 들이 이를 기반으로 작성하면 테마가 같이 적용됩니다. 테마는 이미 등록된 것을 사용할 수도 있구요. Theme Roller 에서 자신만의 테마를 정의할 수도 있는데, 기등록된 테마를 기반으로 할 수도 있습니다. 예제에 보면 동적으로 테마를 바꾸는 기능이 있는데요, Cookie 에 선택한 값을 저장하도록 되어 있어서 개인마다 취향대로 테마를 선택할 수도 있습니다.
  이 Library가 기대가 많이 됩니다. Wiki 쪽에 보면 여러 Widget들이 개발중인 걸 보실 수 있습니다.

  jQuery Grid는 말 그대로 Grid 기능입니다. Grid가 가져야할 기본 기능 외에도 Tree Grid 기능도 있고, Subgrid 기능도 갖추고 있습니다. Tree Grid 는 한 칼럼만 사용하면 그냥 간단한 Tree 처럼 사용할 수도 있습니다.
  이 Grid는 여기서 소개하기에는 너무 많은 기능을 자랑합니다. Grid 자체에서 새 항목을 등록하거나 수정하는 기능을 칼럼에 대한 설정만으로도 가능하게 되어 있습니다. 데모나 문서를 참조해서 보세요.

  jQuery Tools는 jQuery UI에서 지원해 주지 못하는 있었으면 하는 Widget들을 지원해 줍니다. Tab은 UI 쪽에 있긴 하지만요.
이건 백문이 불여일견입니다. 한 번 데모(http://flowplayer.org/tools/demos/index.html)를 보세요.

  jQuery Form은 Form 값을 Ajax로 처리하는 걸 간편하게 해 주는 Library입니다. 처리의 간편함을 위해 사용했습니다. 아쉬운 건 JavaScript Object의 값을 Form의 각 요소에 세팅해 주는 게 있었으면 했는데 없어서 직접 구현했네요.

   jquery keyfilter는 Input 필드나 TextArea에서 Key 입력을 제한해 주는 Library입니다. 보통 keydown 이벤트에 keyCode 값을 읽어 true / false를 돌려 주는 식으로 구현을 많이 하는데 역시 이걸 사용하면 간편해집니다.

  jquery numberformatter 는 숫자 포매팅해 주는 Library 입니다. Locale 을 적용해서 포매팅 해 주는 게 특징이구요. 패턴을 직접 지정해 줄 수도 있습니다.

  UI.Layout 은 BorderLayout을 구현한 건데요. Java에서 AWT, Swing 프로그램이나 델파이 같은 RAD 툴을 써 보신 분은 아실 겁니다. 화면의 영역은 east, west, south, north, center 5가지 영역으로 나누어 놓고, 전체 화면의 크기가 변경될 때 east, west는 지정한 폭을, south, north 는 지정한 높이를 유지시켜 주는 역할을 합니다. 물론 그렇기 때문에 center 영역은 나머지 4개 영역을 제외한 영역으로 꽉 차게 유지가 되는 거죠.
  여기에 동서남북 4개 영역과 center 사이의 경계를 드래그로 조절하게 한다든지 4개 영역을 닫았다 열었다 한다든지 하는 기능들이 들어 있습니다. 웹 프로그램이 Thin Client 역할로 사용되면서 이런 기능들이 요구되고 있는 상황인 거죠.
  이 Layout 이 아쉬운 부분이 jQuery Grid와 연동이 자동으로 안 되고 onresize 이벤트 핸들러를 만들어 처리해 주어야 하는 점이었습니다. 하지만 복합한 코딩을 요구하는 건 아니니까요. 간단히 작성하실 수 있을 겁니다.

  그리고 마지막 뽀너스입니다. ^^
  이번 프로젝트에서 써 보지는 않았는데요. 설마 이런 게 JavaScript로 가능하리라고는 생각지 않아서 검색조차 안 해 봤는데 있더라구요. MaskEdit 가 있었습니다.
:

jQuery File Tree 예제

자바스크립트/jQuery 2009. 1. 6. 14:15

jQuery 를 이용한 File Tree 예제입니다.

라이브데모를 볼 수 있는 곳 : http://abeautifulsite.net/notebook_files/58/demo/

소스에 대한 내용을 볼 수 있는 곳 : http://abeautifulsite.net/notebook.php?article=58

소스 다운로드 : http://abeautifulsite.net/notebook_files/58/jqueryFileTree.zip

현재 버전은 1.01 이며 Ajax 로 구현이 되어 있습니다.

:
◀ PREV : [1] : NEXT ▶

티스토리툴바