jquery

jQuery UI 사용해서 IE, Edge에서 <div> resize(textarea처럼) 되게 하기

핑계/ editor

  • 0 comments
  • 1,187 views
  • 2017년 9월 1일

jQuery UI 사용해서 IE, Edge에서 <div> 요소 textarea처럼 resize 될수 있게 해보아요 ~

1. <div> resize 되게 하기


 

<div>를 textarea 처럼 사이즈 조절 가능하게 하려면 아래처럼 2개의 CSS 속성을 추가로 써주면 됩니다.

div {
  resize: both;
  overflow: auto;
}

resize 필수구문은 아래처럼 5가지 입니다.

resize: none;       // resize 안함
resize: both;       // 가로, 세로 방향으로 resize 가능
resize: horizontal; // 가로 방향으로만 resize 가능
resize: vertical;   // 세로 방향으로만 resize 가능
resize: inherit;    // 상위객체의 값을 그대로 물려받음

 

Markup

안녕하세요 html5around.com tutorials을 봐주셔서 감사합니다. 궁금한 사항이 있으면 많이 질문해주세요.

CSS

div {
  width: 300px;
  height: 200px;
  border: 2px solid #000;
  resize: both;     // resize
  overflow: auto;   // resize
}

HTML5AROUND on html5around.com

다른 브라우저에서는 아래 그림처럼 <div> 우측하단에 잡아다닐 수 있는 이미지가 생기는데 IE와 Edge에서는 아무것도 생기지 않습니다.

resize 브라우저 지원사항 입니다. 보면 IE, Edge 만 지원하지 않는걸 볼 수 있습니다.

 

 

2. JQuery UI resizable 사용해서 IE에서도 resize 되게 하기


 

https://jqueryui.com/resizable/ 내용 참고했습니다.

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<link rel=”stylesheet” href=”/resources/demos/style.css”>

jQuery ui 를 적용하기 위한 외부 CSS링크파일입니다. head 안에 붙여넣기 해주세요.

<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

jQuery ui를 사용해야 하기 때문에 jQuery와 jQuery ui CDN 을 head 안에 붙여넣기 해줍니다.

<!DOCTYPE html> 
<html>
<head>
  
   HTML5AROUND 
   
                              
                      
                 
</head>
</html> 

Markup

– <div>나 resize하고 싶은 웹요소에 id=”resizable” class=”ui-widget-content” 이라고 써줍니다.
    CSS가 이미 만들어져있기 때문에 resize 하고 싶은 태그에 id=”resizable” class=”ui-widget-content” 이라고 써주면 자동적으로 textarea 같은 스타일이 생성됩니다.

안녕하세요 html5around.com tutorials을 봐주셔서 감사합니다. 궁금한 사항이 있으면 많이 질문해주세요.

CSS

– jQuery ui 를 사용하기 때문에 resize, overflow 는 안써줘도 됩니다.
    원하는 width값, height값과 선 스타일을 써주세요.

#resizable {
  width: 300px;
  height: 200px;
  border: 2px solid #000;
}

Jquery

– <div> 요소에 ‘resizable()’ api 를 붙여주세요. 그러면 이제 IE에서도 <div>를 textarea 처럼 resize 할 수 있습니다.

$(function() {
    $("#resizable").resizable();
});

HTML5AROUND on html5around.com

 

 

3. 마치며


 

IE, Edge 브라우저 에서는 안되는게 참 많은거 같습니다.
브라우저마다 일일이 CSS가 잘 작동하는지 확인해야 하는게 참 귀찮기도 하고 그러네요~
많이 사용하는 기능은 아니지만 그래도 유용한거 같아서 글을 써 보았습니다.
이 예제가 많은 분들께 도움이 되었으면 좋겠습니다.
궁금한 사항이 있으면 많이 질문해주세요.

수고하셨습니다.

핑계

댓글 먹고 살아요~

Leave a Reply

avatar