테이블 manipulation 예제
A main menu as images in a table
이제 테이블에 여러 이미지를 넣고 그 이미지를 클릭하면 Text 가 나오고 그 Text를 클릭하면 해당 홈페이지로 가게 할 겁니다.
(아래 첨부파일은 본문의 예제소스와 약간 다릅니다. 첨부파일도 꼭 확인해 주세요.)
Main menu as images
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
<style type=text/css>
.ui-grid-b img {
width : 80px;
margin : 5px;
}
</style>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<h3> A main menu as images </h3>
<div class=ui-grid-b>
<div class=ui-block-a>
<a href=#jquery><img src=images/jquery.jpg /></a>
</div>
<div class=ui-block-b>
<a href=#html><img src=images/html.jpg /></a>
</div>
<div class=ui-block-c>
<a href=#j2ee><img src=images/j2ee.jpg /></a>
</div>
<div class=ui-block-a>
<a href=#rails><img src=images/rails.jpg /></a>
</div>
<div class=ui-block-b>
<a href=#mobile_web><img src=images/mobile_web.jpg /></a>
</div>
<div class=ui-block-c>
<a href=#phonegap><img src=images/phonegap.jpg /></a>
</div>
</div>
</div>
</div>
<div data-role=page id=jquery data-add-back-btn=true>
<div data-role=header>
<h1>jQuery</h1>
</div>
<div data-role=content>
<h3> jQuery content</h3>
</div>
</div>
<div data-role=page id=html data-add-back-btn=true>
<div data-role=header>
<h1>HTML & CSS</h1>
</div>
<div data-role=content>
<h3> HTML & CSS content</h3>
</div>
</div>
<div data-role=page id=j2ee data-add-back-btn=true>
<div data-role=header>
<h1>J2EE</h1>
</div>
<div data-role=content>
<h3> J2EE content </h3>
</div>
</div>
<div data-role=page id=rails data-add-back-btn=true>
<div data-role=header>
<h1>Ruby on Rails</h1>
</div>
<div data-role=content>
<h3> Ruby on Rails content </h3>
</div>
</div>
<div data-role=page id=mobile_web data-add-back-btn=true>
<div data-role=header>
<h1>Mobile web</h1>
</div>
<div data-role=content>
<h3> Mobile web content </h3>
</div>
</div>
<div data-role=page id=phonegap data-add-back-btn=true>
<div data-role=header>
<h1>PhoneGap</h1>
</div>
<div data-role=content>
<h3> PhoneGap content </h3>
</div>
</div>
</body>
</html>
|
|
tistory448_01.html이미지는 수평으로 나란히 정렬 되도록 만들었습니다. 그리고 각각의 이미지에는 <a>
link가 있어서 해당 이미지에 맞는 text를 다른 window 에서 display 되도록 만들었습니다. (그리고 저의 예제 파일을 열어보시면 그 텍스트에 링크를 걸어서 해당 홈페이지에 가도록 만들었습니다.)
아래는 위 예제소스의 실행화면입니다.
(제 첨부파일에는 구글, 야후, 다음, 한겨레, 경향신만, Ohmynews 등을 예제로 들었습니다. 일부러 네이버는 뺐는데요. 그건 순전히 저의 정치성향때문입니다. ^^; 네이버가 이명박과 박근혜 쪽에 기운것 같아서.... ;;)
J2EE를 클릭하면 아래 화면이 나옵니다.
