jqeury ui 의 dialog 메서드를 사용하면 알림창에 제목과 내용을 표시하여 사용자에 어떤 작업을 했는지 인지시킬 수 있다. 자바스크립트의 alert 함수는 알림창의 제목을 설정할 수 없기에 jqeury ui 를 사용하여 알림창을 만들어 사용할 수 있다. jqeury ui 는 jquery 라이브러리 기반의 ui 컴포넌트이다.
자바스립트 알림창 제목 표시하기
알림창 타이틀 문자열 지정 jquery ui 사용
홈페이지에서 메세지를 표현할 때 알림창의 제목을 변경할 일이 생겼다.
단순히 alert 창으로 꾸며도 되지만 뭔가 아쉽다. alert 창에서 제목을 변경하면 좋겠지만 그런 기능은 찾아봐도 존재하지 않았다. 있을 것 같았는데 없다. 자바스크립트의 alert 함수를 오버라이딩하여 사용할 수도 있지만 으음~ 딱히 비추천이다.
혹시나 있을 것 같아 찾아보았지만 단순히 alert 창으로는 해결할 수 없기에 일반적인 방법인 jquery 를 사용하기로 하였다.
jquery ui 와 jquery 라이브러리를 사용하면 되기 때문에 딱히 어려운 점은 없다.
라이브러리 추가하기
jqeury 를 사용하여 alert 함수를 대신하고자 하려면 2가지 라이브러리가 필요하다.
jquery 와 jquery ui 이다.
jqeury 는 누구나 다 알듯이 자바스크립트를 좀 더 편하게 사용하게 해 주는 라이브러리이다.
jquery ui 는 jqeury 기반의 ui 컴포넌트이다.
여러가지가 있으며 기능도 다채롭기 떄문에 한번쯤 경험해 두는 것도 좋다.
지금은 라이브러리들이 너무 많기 때문에 선택장애가 오기도 하지만 가장 보편적인 것 하나쯤은 익혀두는 것이 좋다.
아래는 jquery 라이브러리를 가져오는 코드이다.
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>jqeury 라이브러리에 대한 자세한 내용은 공식 홈페이지에서 확인 가능하다.
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
클릭 버튼 만들고 연결하기
라이브러리를 불러왔으니 html 에 버튼을 생성하고 이벤트를 연결하도록 하자.
버튼을 클릭하면 jqeury ui 메세지창이 나오도록 할 것이며 제목과 내용이 출력하도록 할 것이다.
먼저 코드를 보도록 하자.
<body>
<input type="button" id="btn" value="클릭">
<div id="dialog" title="제목을 변경한 부분">
<p>
어쩌구저쩌구<br/>
쫑알쫑알 메세지 알림창입니다.<br/>
모달창을 사용하는 방법도 있습니다만<br/>
다음으로 미룹니다.<br/>
우측 상단의 X 버튼 클릭하면 사라집니다.
</p>
</div>
</body>
<script>
$(document).ready( function() { /* Load Comp. without resources */ });
$(window).on('load', function() { /* Load Comp. with resources */
$( "#dialog" ).dialog({
autoOpen: false
});
$( "#btn" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>html 과 scirpt 영역 2가지 있다.
div 영역을 dialog 알림창으로 만들고 있으며 title 속성에 알림창의 제목을 표현하고 있다.
javascript 가 실행되면 dialog 영역을 초기화하고 버튼이 클릭하면 dialog 창이 나타나도록 이벤트를 연결하였다.
jquery 의 dialog 메서드는 알림창이 나타나거나 닫도록 하는 역할을 한다.
참고로 autoOpen 속성은 jquery ui 의 알림창이 자동으로 실행되어 화면에 나타나는 것을 막는 역할을 한다.
전체 코드 및 결과
전체 코드를 보자.
jqeury 와 jqeury ui 라이브러리 를 불러오고 html 태그로 알림창을 만들어 주었다.
jquery 를 사용하여 알림창을 초기화 해 주었으며 이벤트를 연결하여 버튼이 눌렸을 때 알림창이 나타나도록 하였다.
<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- 반응형 meta 명시 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jquery cdn -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<input type="button" id="btn" value="클릭">
<div id="dialog" title="제목을 변경한 부분">
<p>
어쩌구저쩌구<br/>
쫑알쫑알 메세지 알림창입니다.<br/>
모달창을 사용하는 방법도 있습니다만<br/>
다음으로 미룹니다.<br/>
우측 상단의 X 버튼 클릭하면 사라집니다.
</p>
</div>
</body>
<script>
$(document).ready( function() { /* Load Comp. without resources */ });
$(window).on('load', function() {
/* Load Comp. with resources */
$( "#dialog" ).dialog({
autoOpen: false
});
$( "#btn" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</html>결과화면을 보자.
클릭버튼을 누르면 알림창이 잘 나타나고 있다.
생김새는 예쁘지 않지만 이정도면 쓸만하다.
'programming > javascript' 카테고리의 다른 글
| 자바 스프링 데이터 전송값 모두 확인하는 방법 (0) | 2023.01.06 |
|---|---|
| 자바스크립트 라디오 버튼 값 가져오기 Get value of selected radio button (0) | 2022.12.25 |
| 자바스크립트 알림창 여러 줄 표시하기 javascript alert multi line (0) | 2022.12.22 |
| 자바스크립트 confirm 함수 예 아니오 선택하기 (0) | 2022.12.20 |
| 자바스크립트 fetch 함수 사용법 api 파일 이미지 등 데이터 요청하기 (0) | 2022.12.17 |
댓글