공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

jquery UI를 사용한 resizable 실무

serpiko 2016. 4. 1. 16:43


   jquery ui를 사용한 resizable



NMS솔루션을 만든 프로젝트가 있는데 aside에 resizable기능을 추가하고싶었다 






바로 좌측의 LNB부분.



제이쿼리ui 라이브러리에서 resizable (https://jqueryui.com/resizable/)을 제공한다.


그전에 검색을 통하여 비슷하게 동작하는 colResizable (http://www.bacubacu.com/colresizable/) 라이브러리도 찾아냈지만


이 colResizable은 table의 기반의 th,td 를 움직이기 때문에 이 라이브러리를 가지고 div엘리먼트의 사이즈를 


확장한다던지 변형해서 사용하려 하다가 애꿎은 시간만 허비했다. 



물론 colResizable 라이브러리의 완성도가 낮다는게 아니라 div와 table column에서 동작하는 용도가 다르다는 점을 알려둔다.



div요소를 확장하기 위해서는 먼저 아래와 같은 필수 인클루드 소스가 필요하다. 준비물은 다음과 같다.



* 필수. 제이쿼리와 제이쿼리UI를 먼저 include한다.


<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>



1. 기본사용법.


&( "#resizable" ).resizable();



2. 현재 지금 내가 필요한(사이트 메뉴) resizable을 하기위한 옵션들.


&( "#resizable" ).resizable({

minWidth: 100,    //최소 100px 까지 축소.

maxWidth: 600,   //최대 600px 까지 확장.

handles: "e",    //리사이즈 되는 모서리는 오른쪽(east)으로 고정시켰다.

});




   aside와 section을 이용한 메뉴와 본문 2단 구성



아래와 같이 왼쪽편에는 메뉴, 오른쪽에는 본문이 위치한 HTML과 css를 만든다.


나는 작은 의미의 엘리먼트 요소보다는 큰 개념에 영역을 부여하는 스타일이라서


사이드 메뉴의 경우 거의 aside를, 본문 콘텐츠에는 section엘리먼트를 사용했다. 


단, 이 방법은 서비스 타겟이 일반 사용자들을 대상으로 하고 크로스 브라우징(특히 구형 익스플로러버전)을 위한 방법에는


좋지않다는 점을 알고있어야 한다.



화면보기)



소스보기)


<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable - Snap to grid</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<style>
		*{
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
		}

		aside#resizable { width: 100px; height: 200px; padding: 0.5em; float:left;}
		aside#resizable h3 { text-align: center; margin: 0; }

		section#content{width:calc(100% - 110px);height:200px; margin-left: 5px; border:1px solid gray; vertical-align: top; float:left; padding: 0.5em;}
		section#content:after{content:"";display:block;clear:both;}
	</style>
</head>
<body>
	<div id="wrap">
		<aside id="resizable" class="ui-widget-content">
		  <h3 class="ui-widget-header">aside</h3>
		  <ul>
			<li>메뉴1</li>
			<li>메뉴2</li>
			<li>메뉴3</li>
			<li>메뉴4</li>
		  </ul>
		</aside>

		<section id='content'><h3>Content</h3></section>
	</div>
</body>
</html>


소스설명)



11: box-sizing 을 정의해서 패딩고려한 박스모델 설계를 없앤다.


16: aside 왼쪽으로 쌓고,


19: section 도 왼쪽으로 쌓는다.


20: section까지만 float되고 그 이후부터는 float를 해제 해야하기 때문에 가상 선택자인 after를 이용해서

    빈공백의 콘텐츠를 만들고 clear:both를 해준다. 여러~~ 방법이 있는데 

    지금 20번 라인과 같은 방법이 가장 진보된 방법.




   aside를 resizable반영



소스보기)

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable - Snap to grid</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<style>
		*{
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
		}

		aside#resizable { width: 100px; height: 200px; padding: 0.5em; float:left;}
		aside#resizable h3 { text-align: center; margin: 0; }

		section#content{width:calc(100% - 110px);height:200px; margin-left: 5px; border:1px solid gray; vertical-align: top; float:left; padding: 0.5em;}
		section#content:after{content:"";display:block;clear:both;}

		/* jquery UI override */
		.ui-resizable-e:hover, .ui-resizable-e:active{background-color:#aaaaab; cursor:col-resize;}
	</style>
</head>
<body>
	<div id="wrap">
		<aside id="resizable" class="ui-widget-content">
		  <h3 class="ui-widget-header">aside</h3>
		  <ul>
			<li>메뉴1</li>
			<li>메뉴2</li>
			<li>메뉴3</li>
			<li>메뉴4</li>
		  </ul>
		</aside>

		<section id='content'><h3>Content</h3></section>
	</div>

	<script>
	$(function() {
		$( "#resizable" ).resizable({
			minWidth: 100,
			maxWidth: 600,
			handles: "e",
			resize: function( e, ui){
				var currentWidth = ui.size.width;
				var gap = 10;
				currentWidth += gap;
				$("#content").css("width", "calc(100% - "+ currentWidth +"px)");
			}
		});
	});
	</script>
</body>
</html>

 

소스 설명)



23 : 원래 이 클래스는 내가 정의하는것이 아니라 제이쿼리ui에서 자동으로 생성되는 div에서 class를 오버라이딩 한것이다.


    마우스를 오버하거나 클릭했을때 cursor스타일을 col-resize로 지정했다. e-resize 와 고민하는 정도로 선택의 폭이 좁다.


42~54: DOM이 렌더링 되면 aside인 #resizable 엘리먼트를 위에서 썼던 방식처럼 옵션 지정을 해준다.

    

        여기에서 눈여겨 볼 점은 resize 함수인데, 이 함수는 start -> resize -> stop 의 단계 중 mousemove와 같이 요소를 현재


        이동중일때 호출되는 콜백함수이며 제이쿼리의 on메서드를 사용하여 다음과 같이 따로 이벤트 리스너로 지정 할 수있다.


        $( ".selector" ).on( "resize", function( event, ui ) {} );


   메뉴를 resize하였을때 우리가 신경써야 할 부분은 content인 section 부분이며, 섹션이 유동적으로 폭을 유지한채 같이 


   너비를 반영시켜야 한다는 점이다.


   "본문 너비 = 100% - 현재 사이드 메뉴px" 정도로 간단한 공식을 세워서 해결 할 수 있으며, 프로그램으로 표현하면


    resize: function( e, ui){

var currentWidth = ui.size.width;

var gap = 10;

currentWidth += gap;

$("#content").css("width", "calc(100% - "+ currentWidth +"px)");

}

 



   결과물


aside의 오른쪽 모서리를 잡고 드래그하면 리사이징이 가능해졌다.










저작자표시 비영리 동일조건

'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

jquery context 라이브러리에서 메뉴 분기처리하여 보이고 추가하고 삭제하기..  (0) 2016.08.25
자바스크립트 TypeError: (intermediate value)(intermediate value)(...) is not a function 에러  (2) 2016.08.05
accordion menu tutorial (css3 + jquery )  (0) 2015.07.06
룰렛 자바스크립트(원판 회전) - jQueryRotate.js  (8) 2015.06.18
How to export HTML table data to excel sheet using Jquery  (1) 2015.03.05
댓글