Dev/jQuery

[jQuery] 페이지에 HTML추가 하기

쇼크리더 2009. 12. 3. 16:14
반응형

특별한건 없다. 역시 jQuery는 간단하면서 기능 쵝오.
<!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>
    <title></title>
	<link href="Css/cssJMBae.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
		.button
		{
			border-width: 1px; padding: 1px; margin: 1px; border-style: solid; text-align: center; width: 150px;
		}
	</style>
	<script src="Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript">
		$(document).ready(function () {
			$('#letter-a .button').click(function () {
				$('#dictionary').load('Page106Part1.htm');
				$('#dictionary')
				alert('Loaded!');
			});
		});
	</script>
</head>
<body>
	<h2>천사의 사전</h2>
	<h4>앰브로스 비어스 지음</h4>
	<div class="letters">
		<div id="letter-a" class="letter">
			<h3>A</h3>
			<div class="button">
				Load
			</div>
		</div>
		<div id="letter-b" class="letter">
			<h3>B</h3>
			<div class="button">
				Load
			</div>
		</div>
		<div id="letter-c" class="letter">
			<h3>C</h3>
			<div class="button">
				Load
			</div>
		</div>
		<div id="letter-d" class="letter">
			<h3>D</h3>
			<div class="button">
				Load
			</div>
		</div>
	</div>
	<div id="dictionary">
	</div>
</body>
</html>

결과는 역시.. 직접 해보면.. ^^

p.s : cssJMBae.css 와 Page106Part1.htm 파일 첨부함.

cssJMBae.css
Page106Part1.htm


반응형