3. 고급 스타일링 3.1 ajax 터치 추가 ajax( a synchronous j avascript a nd x ml )
DESCRIPTION
3. 고급 스타일링 3.1 Ajax 터치 추가 Ajax( A synchronous J avaScript a nd X ML ) 자바스크립트와 XML 을 사용하는 것과 연관된 웹 개발 방법 웹 서버와 비동기적으로 통신할 수 있게 해 주는 하나의 자바스크립트 객체 Ajax 로 인해 자바스크립트를 사용해 서버와 통신이 비동기적으로 이루어 진다 . 따라서 다른 작업을 방해하지 않고 백그리운드에서 통신이 이루어진다 . Ajax 가이드 Ajax 는 항상 서버와의 통신과 관련이 있다 . - PowerPoint PPT PresentationTRANSCRIPT
Web App. 1
3. 고급 스타일링
3.1 Ajax 터치 추가 Ajax(Asynchronous JavaScript and XML)
자바스크립트와 XML 을 사용하는 것과 연관된 웹 개발 방법 웹 서버와 비동기적으로 통신할 수 있게 해 주는 하나의 자바스크립트
객체 Ajax 로 인해 자바스크립트를 사용해 서버와 통신이 비동기적으로 이루어
진다 . 따라서 다른 작업을 방해하지 않고 백그리운드에서 통신이 이루어진다 .
Ajax 가이드 Ajax 는 항상 서버와의 통신과 관련이 있다 . 리프레시 / 리로드 없이 페이지를 갱신할 수 있다 . 비동기적 통신이 가능하다 .
장점 페이지 이동 없이 고속으로 화면을 전환할 수 있다 . 서버 처리를 기다리지 않고 , 비동기 요청이 가능하다 . 수신하는 데이터 양을 줄일 수 있고 , 클라이언트에게 처리를 위임할 수도
있다 .
Web App. 2
3.2 교통 정리해 주는 android,html 작성 android.html
android.html 래퍼 페이지를 위한 HTML
<html>
<head>
<title>Jonathan Stark</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" href="android.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="android.js"></script>
</head>
<body>
<div id="header"><h1>Jonathan Stark</h1></div>
<div id="container"></div>
</body>
</html>
Web App. 3
body { background-color: #ddd; color: #222; font-family: Helvetica; font-size: 14px; margin: 0; padding: 0;}#header { background-color: #ccc; background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#99
9)); border-color: #666; border-style: solid; border-width: 0 0 1px 0;}#header h1 { color: #222; font-size: 20px; font-weight: bold; margin: 0 auto; padding: 10px 0; text-align: center; text-shadow: 0px 1px 1px #fff; max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}ul { list-style: none; margin: 10px; padding: 0;}
android.css
Web App. 4
ul li a { background-color: #FFF; border: 1px solid #999; color: #222; display: block; font-size: 17px; font-weight: bold; margin-bottom: -1px; padding: 12px 10px; text-decoration: none;}ul li:first-child a { -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px;}ul li:last-child a { -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px;}ul li a:active, ul li a:hover { background-color: blue; color: white;}#content { padding: 10px; text-shadow: 0px 1px 1px #fff;}#content a { color: blue;}#progress { -webkit-border-radius: 10px; background-color: rgba(0,0,0,.7); color: white; font-size: 18px;
Web App. 5
font-weight: bold; height: 80px; left: 60px; line-height: 80px; margin: 0 auto; position: absolute; text-align: center; top: 120px; width: 200px;}#header div.leftButton { font-weight: bold; text-align: center; line-height: 28px; color: white; text-shadow: 0px -1px 1px rgba(0,0,0,0.6); position: absolute; top: 7px; left: 6px; max-width: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-width: 0 8px 0 14px; -webkit-border-image: url(images/back_button.png) 0 8 0 14; -webkit-tap-highlight-color: rgba(0,0,0,0);}#header div.leftButton.clicked { -webkit-border-image: url(images/back_button_clicked.png) 0 8 0 14;}
Web App. 6
var hist = []; var startUrl = 'index.html'; $(document).ready(function(){ loadPage(startUrl);});function loadPage(url) { $('body').append('<div id="progress">Loading...</div>'); scrollTo(0,0); if (url == startUrl) { var element = ' #header ul'; } else { var element = ' #content'; } $('#container').load(url + element, function(){ var title = $('h2').html() || 'Hello!'; $('h1').html(title); $('h2').remove(); $('.leftButton').remove(); hist.unshift({'url':url, 'title':title}); if (hist.length > 1) { $('#header').append('<div class="leftButton">'+hist[1].title+'</div>'); $('#header .leftButton').click(function(e){ $(e.target).addClass('clicked'); var thisPage = hist.shift(); var previousPage = hist.shift(); loadPage(previousPage.url); }); } $('#container a').click(function(e){ var url = e.target.href; if (url.match(/jonathanstark.com/)) { e.preventDefault(); loadPage(url); } }); $('#progress').remove(); });}
android.js
Web App. 7
페이지 링크를 Ajax 요청으로 변환하는 android.js 내의 자바스크립트
$(document).ready(function(){
loadPage();
});
function loadPage(url) {
if (url == undefined) {
$('#container').load('index.html #header ul', hijackLinks);
} else {
$('#container').load(url + ' #content', hijackLinks);
}
}
function hijackLinks() {
$('#container a').click(function(e){
e.preventDefault();
loadPage(e.target.href);
});
}
loadPage() 함수로부터 전달된 url 로부터 #content 요소를 받아 , 현재 페이지의 #container
요소 안에 넣는다 .이 부분이 완료되면 hijackLinks()
함수를 실행한다 .
Web App. 8
Jquery 의 shift, unshift 메서드의 예<html> <body> <script type="text/javascript"> var exforsys = new Array(4) exforsys[0] = "Welcome" exforsys[1] = "To" exforsys[2] = "Exforsys" exforsys[3] = "Training" document.write(exforsys + "<br />") document.write(exforsys.shift() + "<br />") document.write(exforsys) </script> </body></html>
<html> <body> <script type="text/javascript"> var exforsys = new Array(4) exforsys[0] = "Welcome" exforsys[1] = "To" exforsys[2] = "Exforsys" exforsys[3] = "Training" document.write(exforsys+"<br />") document.write(exforsys.unshift("Welcome Message")+"<br />") document.write(exforsys) </script> </body></html>
Web App. 9
작업할 때 필요한 콘텐츠 설정하기 자바스크립트는 index.html 문서를 로드
<html> <head> <title>Jonathan Stark</title> <meta name="viewport" content="user-scalable=no, width=device-width" /> <link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 480px)" /> <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="explorer.css" media="all" /> <![endif]--> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript" src="android.js"></script> </head> <body> <div id="container"> <div id="header"> <h1><a href="./">Jonathan Stark</a></h1> <div id="utility"> <ul> <li><a href="about.html">About</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div id="nav"> <ul> <li><a href="consulting-clinic.html">Consulting Clinic</a></li> <li><a href="on-call.html">On Call</a></li> <li><a href="development.html">Development</a></li> <li><a href="http://www.oreilly.com">O'Reilly Media, Inc.</a></li> </ul> </div> </div>
Web App. 10
<div id="content"> <h2>About</h2> <p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p> </div> <div id="sidebar"> <img alt="Manga Portrait of Jonathan Stark" src="jonathanstark-manga-small.png"> <p>Jonathan Stark is a mobile and web application developer who the Wall Street Journal has called an expert on publishing desktop data to the web.</p> </div> <div id="footer"> <ul> <li><a href="services.html">Services</a></li> <li><a href="about.html">About</a></li> <li><a href="blog.html">Blog</a></li> </ul> <p class="subtle">Jonathan Stark Consulting, Inc.</p> </div> </div> </body></html>
<div id="content"> <h2>About</h2> <p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p> </div>
<div id="content"> <h2>Blog</h2> <p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p> </div>
Web App. 11
<div id="content"> <h2>Consulting Clinic</h2> <p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p> </div>
<div id="content"> <h2>Development</h2> <p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p> </div>
실행 결과 클릭