팁스토리, Tips

JQuery DIV 가로 세로 순서 이동, sortable ■ CSS #sortWrap { padding: 10px; } #sortWrap div { margin: 10px; padding: 10px 0 10px 20px; background-color: #FFF; border: 1px solid #ddd; cursor: move; } ■ HTML 1 2 3

■ JQuery attr 다중 처리 attr 속성 추가할 때 여러개의 속성값을 추가해야 할 경우가 있음 ■ JQuery attr 추가하는 방법 ‘test_btn’ 클래스명을 가진 버튼 태그에 속성값을 추가한다고 할 때 버튼 단일 처리 시 ‘test_button’ 아이디값 추가 $('test_btn').attr('id', 'test_button'); 다중 처리 시 ‘test_button’ 아이디값 추가, disabled 값 추가 $('test_btn').attr( 'id' : 'test_button' , 'disabled' : 'disabled' );

■ JQuery 숫자 0부터 특정수까지 증가하는 애니메이션 넣기 예를 들어 특정 수 100 이라는 숫자를 나타낼 때 0부터 100까지 숫자가 올라가는 모션을 넣어주고 싶을 때 사용 (따로 라이브러리 js 필요없음) ■ 사용법 ■ 참고 소수점까지 나타내고 싶다면 toFixed() 사용하여 나타내고 싶은 자리수까지 나타낼 수 있음 var num = numberWithCommas(this.val.toFixed(1));

■ JQuery summernote 이미지 붙여넣기 시 이미지 파일 2개 들어가는 현상 onPaste() 이미지 복사 붙여넣기에 대한 콜백함수로 기본값 사용 시 이미지 복사 후 붙여넣기할 경우 base64로 인코딩 된 src 파일과 onImageUpload에서 구현한 url 기반의 파일 총 2개의 이미지가 들어가는 현상(버그) 발생함 ■ 해결 방법 onPaste() 추가 $('#summernote').summernote({ height: 300,// 에디터 높이 minHeight: null,// 최소 높이 maxHeight: null,// 최대 높이 focus: true,// 에디터 로딩후 포커스를 맞출지 여부 lang: "ko-KR",// 한글 설정 placeholder: '최대 2048자까지 쓸 수 ..

■ JQuery summernote 사용법 ■ 라이브러리 ■ 사용법

■ JQuery 현재 스크롤 위치 좌표값(높이) 가져오기 scrollTop() ■ 사용법 $(window).scroll(function () { var height = $(document).scrollTop(); console.log(height);// 스크롤할때마다 해당 스크롤 위치 좌표값(높이) });

■ JQuery 특정 영역 div 새로고침(F5) 모든 페이지가 아닌 div, ul 등 원하는 특정 영역만 새로고침(reload)하고 싶을 때 JQuery 내 load 함수를 사용 ■ 사용법 $('#특정 영역의 id').load(window.location.href+' #특정 영역의 id'); $('#특정 영역의 id').load(location.href+' #특정 영역의 id'); ■ 예제 AAAA BBBB CCCC 새로고침

■ JQuery datepicker 날짜 범위 제한하기 maxDate - jquery datepicker 날짜 선택 시 선택 범위를 제한해야 할 때 사용하는 옵션값 ■ 사용법 input type="text" (datepicker 선언) 특정일자 이후 선택 불가 maxDate: new Date('Y-m-d')

■ JQuery 체크박스 선택, prop("checked") ■ 사용법 체크박스

■ JQuery select option 첫번째 값 가져오기 ■ 사용법 가 나 다 라