2011년 8월 10일 수요일

jQuery Mobile - The First Code


jQuery Mobile 선언

HTML Header 절에 다음을 선언
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"
rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

jQuery Body의 기본 구성

<div data-role="page">
<div data-role="header">
<h1>My Site</h1>
</div>
<div data-role="content">
<p>First page!</p>
</div>
<div data-role="footer">
<h1>&copy; Copyright Info or Site URL</h1>
</div>
</div>

First jQuery Page: first.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>

<title>jQuery Mobile test page</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"
rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

</head>

<body>
<div data-role="page">
<div data-role="header">
<h1>My Site</h1>
</div>
<div data-role="content">
<p>First page!</p>
</div>
<div data-role="footer">
<h1>&copy; Copyright Info or Site URL</h1>
</div>
</div>

</body>
</html>

화면이동 first.jsp -> second.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>

<title>jQuery Mobile test page</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"
rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

</head>

<body>
<div data-role="page">
<div data-role="header">
<h1>My Site</h1>
</div>
<div data-role="content">
<p>First page!</p>
<p>
<a href="second.jsp">Go to the second page!</a>
</p>
</div>
<div data-role="footer">
<h1>&copy; Copyright Info or Site URL</h1>
</div>
</div>

</body>
</html>



<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>

<title>jQuery Mobile test page</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"
rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>

<body>
<div data-role="page">
<div data-role="header">
<h1>My Site</h1>
</div>
<div data-role="content">
<p>Second page!</p>
</div>
<div data-role="footer">
<h1>&copy; Copyright Info or Site URL</h1>
</div>
</div>
</body>
</html>

댓글 없음:

댓글 쓰기

ETL 솔루션 환경

ETL 솔루션 환경 하둡은 대용량 데이터를 값싸고 빠르게 분석할 수 있는 길을 만들어줬다. 통계분석 엔진인 “R”역시 하둡 못지 않게 관심을 받고 있다. 빅데이터 역시 데이터라는 점을 볼때 분산처리와 분석 그 이전에 데이터 품질 등 데이...