<%@ page contentType="text/html; charset=UTF-8"%>
<%@page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%String cp = request.getContextPath();%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="<%=cp %>/data/css/jquery-ui-1.10.2.custom.min.css" type="text/css"/>
<script type="text/javascript" src="<%=cp %>/data/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=cp %>/data/js/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="<%=cp %>/data/js/jquery.ui.datepicker-ko.js"></script>
<script type="text/javascript">
$(function(){
$("#d1").hide();
$("#d2").hide();
$("#s1").click(function(){
$("#d1").dialog({
width:200,
height:200,
modal:true // modal을 true로 주면 dialog외에 모든 클릭을 막는다.
});
});
$("#s2").click(function(){
$("#d2").dialog({
});
});
$("#s3").click(function(){
$("#d3").dialog({
open:function(){
$(this).load("ex.jsp"); //AJAX로 불러오는거임
//타이틀 없애기
$(this).parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
},
width:400,
height:400,
title:"용수대박",
modal:true
});
});
//동적인거 처리할 때 on써서 처리한다.
$(function(){
$("body").on("click","#bb1",function(){
//$("#d3").dialog("destory");
$("#d3").dialog("close");
});
});
$("body").on("click","#bb1",function(){
$("#d3").dialog("close");
});
//$("#dp").datepicker(); // textbox클릭하면 달력출력
$("#dp").datepicker({ // 이미지를 클릭하면 달력출력
showOn:"button",
buttonImage:"<%=cp%>/data/images/calendar.gif",
buttonImageOnly:true,
defaultDate:"", // 기본선택된 날짜
minDate:"2013-08-01", //최소 선택할 수 있는 날짜
maxDate:"+1M+10D", // 최대 선택할 수 있는 날짜
/*minDate:0,maxDate:"_10D"*/
});
});
$(function(){
$("#ct").tabs();
});
</script>
</head>
<body style="font-size:9pt;">
<span id="s1">나는 최고</span><br/>
<span id="s2">나도 최고</span><br/>
<span id="s3">zz</span>
<div id="d1">
<p>안녕 방가</p><br/>
</div>
<div id="d2">
<p>너무 덥다..</p><br/>
</div>
<div id="d3" style="display: none;"></div><br/>
<input type="text" id="dp">
<div id="ct">
<ul>
<li><a href="t1.jsp">처음</a></li>
<li><a href="t2.jsp">두번째</a></li>
<li><a href="t3.jsp">세번째</a></li>
</ul>
</div>
</body>
</html>
'jquery' 카테고리의 다른 글
| 커서 손가락 바꾸기 (0) | 2013.09.09 |
|---|---|
| jquery & ajax 이해하는 간단한 예제 (2) | 2013.08.07 |
| jquery + ajax (0) | 2013.08.07 |
| jquery 기본예제(동적으로 추가된 이벤트 처리할때 on) (0) | 2013.08.07 |
| jquery 예제 (0) | 2013.08.07 |