① 소스 내용
<?xml version="1.0" encoding="EUC-KR" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<title>jQuery UI</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-ko.js"></script>
<script type="text/javascript">
$(function(){
$("#tabs").tabs({
// collapsible : 이벤트가 발생할 경우 내용을 접는다.
// event: "mouseover", collapsible:true
fx: {opacity:'toggle'} // opacity> 투명도
}).find( ".ui-tabs-nav" ).sortable({ axis: "x" });
$("#acco").accordion({
header: "> div > h3"
}).sortable({
axis: "y",
handle: "h3",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});
// '2012년 9월 13일 목요일' 형태로 나타내기
$("#dp").datepicker({dateFormat:"yy'년' m'월' dd'일' DD", showAnim:"bounce"});
$("#notice").dialog({modal:true, autoOpen:false,
buttons:{"확인":function(){
alert("확인을 눌렀구만!");
$(this).dialog('close');
},"취소":function(){
$(this).dialog('close');
}}, position:[100,300]
});
});
function pop() {
$("#notice").dialog('open').dialog({position:[600,100]});
}
</script>
</head>
<body>
<input type="button" value="공지사항" onclick="pop();" />
<div id="notice" title="공지사항">
공지사항이아니무니다!
</div>
<input type="text" id="dp" readonly="readonly"/>
<div id="tabs">
<ul>
<li><a href="#tab1">Matrix</a></li>
<li><a href="#tab2">Matrix Reloaded</a></li>
<li><a href="#tab3">Matrix Revolution</a></li>
</ul>
<div id="tab1">
네오의 각성을 다룬 작품
</div>
<div id="tab2">
스미스요원의 각성, 시온(Zion)의 거지생활
</div>
<div id="tab3">
오라클과 System Administrator의 대립과 갈등,<br />
네오의 희생과 Zion 독립, Smith요원으로 버그 해결(바이러스 퇴치)
</div>
</div>
<div id="acco">
<div>
<h3><a href="#">홍광필</a></h3>
<div>
<p>
털광필로 불리운다.<br />
반장이고, 나이가 제일 많다.<br />
열정이 가득하다.
</p>
</div>
</div>
<div>
<h3><a href="#">송은석</a></h3>
<div>
<p>
태연에 미쳐있다.<br />
안경이 반사체다. 눈을 보기 힘들다.<br />
완샘과 같이 집에 가는 때가 많다.
</p>
</div>
</div>
<div>
<h3><a href="#">송용단</a></h3>
<div>
<p>
몽골출신이다. 몽골마라고도 한다.<br />
말춤을 잘춘다. 노래방에서만(영상도 있다.)<br />
위키용단이라고도 불린다.(상식이 풍부함, 깊이는 책임못짐)
</p>
</div>
</div>
<div>
<h3><a href="#">김은재</a></h3>
<div>
<p>
김까꿍(풉!)이란다.<br />
옆에 앉은 남자들이 설설 긴다.<br />
기분에 따라 눈화장을 바꾼다.(뉴질랜드 출신인지도...)
</p>
</div>
</div>
</div>
</body>
</html>
② 실행 화면
털광필로 불리운다.
태연에 미쳐있다.
몽골출신이다. 몽골마라고도 한다.
김까꿍(풉!)이란다.
네오의 희생과 Zion 독립, Smith요원으로 버그 해결(바이러스 퇴치)
홍광필
반장이고, 나이가 제일 많다.
열정이 가득하다.
송은석
안경이 반사체다. 눈을 보기 힘들다.
완샘과 같이 집에 가는 때가 많다.
송용단
말춤을 잘춘다. 노래방에서만(영상도 있다.)
위키용단이라고도 불린다.(상식이 풍부함, 깊이는 책임못짐)
김은재
옆에 앉은 남자들이 설설 긴다.
기분에 따라 눈화장을 바꾼다.(뉴질랜드 출신인지도...)
'WEB > JQuery' 카테고리의 다른 글
| WEB 5일차 첫번째) JQuery복습 (0) | 2012.09.14 |
|---|---|
| WEB 4일차 세번쨰) JQuery : 동적 생성과 Traversing (0) | 2012.09.13 |
| WEB 4일차 두번쨰) JQuery : 체크박스 전체 선택 및 해제 (0) | 2012.09.13 |
| WEB 4일차 첫번째) JQuery : 이미지에 여러가지 이벤트 부여하기 (0) | 2012.09.13 |
모데스티