| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- 안드로이드 바탕화면
- 아이폰 바탕화면
- SKY 시리우스
- 구글안드로이드
- 영어
- android
- 안드로이드 개발
- Form Stuff
- objective-c
- 스카이 안드로이드폰 시리우스
- 하루한마디영어
- 안드로이드
- 하루 한마디 영어
- 안드로이드폰
- MapView
- 아이폰 배경화면
- 안드로이드 개발 강좌
- 안드로이드개발
- 안드로이드 배경화면
- sky 시리우스폰
- 안드로이드2.0
- 안드로이드 개발 2.0
- 스마트폰 배경화면
- 구글 안드로이드
- 안드로이드2.0개발
- 안드로이드 2.0 개발
- 구글 안드로이드 개발
- 스카이 안드로이드폰 시리우스 K양 동영상
- 인기있는 블로그 만들기
- 안드로이드 개발 2.0 강좌
- Today
- Total
moozi
3/21 오전 jquery 연습 코드 본문
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style type="text/css">
.ui-btn{
background-color: aqua !important;
color: orange !important;
text-shadow: 2px 2px 2px gray !important;
}
.nav-btn{
background-color: darkcyan!important;
color: firebrick!important;
text-shadow: 2px 2px 2px #dddddd !important;
}
.popup{
width:300px;
height:300px;
background-color: darkgoldenrod;
}
.btnSize{
width:100px;
height:30px;
}
.footerMenu{
width:100%;
margin:auto !important;
}
.ui-btn-active{
background-color: royalblue !important;
}
</style>
</head>
<body>
<div data-role="page" id="pageone">
<!-- panel 영역 시작 ---------------------------->
<div data-role="panel" id="myPanel">
<h2>Panel Header</h2>
<p>You can close the panel by clicking outside the panel, pressing the Esc key or by swiping.</p>
</div>
<!-- panel 영역 끝 ---------------------------->
<div data-role="header" data-position="fixed" data-fullscreen="true">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left ui-btn-icon-notext">Home</a>
<h1>첫페이지</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left ui-btn-icon-notext">Search</a>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">Home</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Search</a></li>
</ul>
</div>
</div>
<div data-role="main">
<h1 style="padding-top:50px;">첫페이지</h1>
<a href="#pagetwo" data-transition="slide" class="ui-btn ui-btn-inline ui-corner-all ui-shadow ui-icon-arrow-r ui-btn-icon-bottom">두번째 페이지로</a>
<div data-role="controlgroup" data-type="vertical">
<a href="#" class="ui-btn nav-btn">웹표준과정</a>
<a href="#" class="ui-btn nav-btn">자바과정</a>
<a href="#" class="ui-btn nav-btn">네트워크과정</a>
</div>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext ui-corner-all ui-alt-icon">Search</a>
<a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-content" data-transition="fade">공지사항</a>
<div data-role="popup" id="myPopup" class="popup" data-arrow="b">
<!-- 종료 x번트 구현 시작 ------->
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
<!-- 종료 x번트 구현 끝 ------->
<p>3/30일에 평가가 있습니다</p>
</div>
<a href="#myPopup2" data-rel="popup" data-position-to="window">
<img src="img1.png" alt="강의실" style="width:200px;"></a>
<div data-role="popup" id="myPopup2">
<!-- 종료 x번트 구현 시작 ------->
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
<!-- 종료 x번트 구현 끝 ------->
<img src="img1.png" style="width:800px;height:400px;" alt="Skaret View">
</div>
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="true">
<div data-role="controlgroup" data-type="horizontal" class="footerMenu">
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-top btnSize">검색</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-top btnSize">메뉴</a>
<a href="#" class="ui-btn ui-icon-info ui-btn-icon-top btnSize">설정</a>
<!-- Copyright © reserved by TIS-->
</div>
</div>
</div>
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="header">
<h1>두번째페이지</h1>
</div>
<div data-role="main">
<h1>두번째페이지</h1>
<a href="#pageone" class="ui-btn ui-btn-inline ui-corner-all ui-shadow ui-icon-arrow-r ui-btn-icon-left">첫번째 페이지로</a>
<a href="#" data-rel="back">prev</a>
</div>
<div data-role="footer">
<!-- Copyright © reserved by TIS-->
</div>
</div>
</body>
</html>
'TIS_2016 > HTML5_1기' 카테고리의 다른 글
| 3/22 javascript canvas예제 (0) | 2016.03.22 |
|---|---|
| javascript 연습문제3 (0) | 2016.03.21 |
| xml 요청 주소 샘플 (0) | 2016.03.18 |
| 3/18 jquery xml파싱 php참고 소스 (0) | 2016.03.18 |
| jquery xml 파싱 정리 잘된 블로그 (0) | 2016.03.18 |