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>

댓글 없음:

댓글 쓰기

블록체인 개요 및 오픈소스 동향

블록체인(block chain) 블록체인은 공공 거래장부이며 가상 화폐로 거래할때 발생할때 발생할 수 있는 해킹을 막는 기술. 분산 데이터베이스의 한 형태로, 지속적으로 성장하는 데이터 기록 리스트로서 분산 노드의 운영자에 의한 임의 조작이 불가...