jqueryui 를 사용하기 위해서는 먼저 이전 글을 통해 ui다운로드 및 세팅을 해주셔야 합니다.
[JAVA 개발] jqueryUI 사용법 및 버튼태그 UI적용 페이지를 참고하세요.
A태그를 이용하여 버튼UI를 적용시켜 버튼 클릭시 모달창을 띄워보도록 하겠습니다.
소스먼저 작성한뒤에 설명하도록 하겠습니다.
<link href="/resources/jqueryui/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/resources/jqueryui/jquery-ui.js"></script>
<script>
$(function(){
//클릭이벤트를 위한 a 태그에 버튼UI 적용
$("#modalbutton").button();
//dialogLayout레이아웃을 다이얼로그라고 정의
$("#dialogLayout").dialog({
//이벤트발생시 open해주기 위하여 false 로 지정
autoOpen: false,
//다이얼로그의 넓이지정
width: 500,
//버튼 설정
buttons: [{
text: "확인",
click: function() {
$(this).dialog("close");
}
},{
text: "취소",
click: function() {
$(this).dialog("close");
}
}]
});
//버튼 클릭시
$("#modalbutton").click(function(e) {
//dialogLayout 레이아웃내에 정의된 내용을 다이얼로그를 이용하여 OPEN
$("#dialogLayout").dialog("open");
e.preventDefault();
});
});
</script>
</head>
<body>
<!--버튼UI적용을 위한 A태그 -->
<p><a href="#" id="modalbutton">모달띄우기</a></p>
<!-- 클릭이벤트 발생시 다이얼로그창에 띄워줄 레이어-->
<div id="dialogLayout" title="이곳은 모달창 상단 제목 부분입니다.(title) ">
<p>디자인이 심플하고 깔끔한 jqueryUI의 레이아웃 팝업창(모달창) 입니다.<br/>
드래그 기능도 지원 됩니다.<br/>
감사합니다.
</p>
</div>
</body>
① 스크립트 소스 : A태그에 버튼 UI를 적용하기 위한 소스
② 스크립트 소스 : modalbutton 클릭시 모달창 UI 적용
③ 스크립트 소스 : A태그 클릭이벤트 발생 및 모달창 스크립트실행
④ HTML 소스 : A태그 생성
⑤ HTML 소스 : 클릭이벤트 발생시 div 안에 모달창으로 띄워줄 내용
실행화면
감사합니다.
'JAVA개발' 카테고리의 다른 글
| [JAVA 개발] jqueryUI 탭기능을 이용한 컨텐츠 나누기 (0) | 2015.07.31 |
|---|---|
| [JAVA 개발] jqueryUI 드래그앤드롭기능 이용 (0) | 2015.07.30 |
| [JAVA 개발] jqueryUI를 이용한 어코디언 만들기 (0) | 2015.07.29 |
| [JAVA 개발] jqueryUI를 이용한 스피너 & 슬라이더 만들기 (0) | 2015.07.28 |
| [JAVA 개발] jqueryUI를 이용한 그룹버튼 & 콤보박스 만들기 (0) | 2015.07.28 |
