반응형
|
'Jquery & Mobile'에 해당되는 글 42건
[JqueryMobile] - 이미지 슬라이더 참조사이트Jquery & Mobile 2011. 7. 5. 16:03반응형
반응형
'Jquery & Mobile' 카테고리의 다른 글
[Javascript] - 모바일웹 회전각도 보는 소스Jquery & Mobile 2011. 7. 5. 16:02반응형
window.onorientationchange = function(){
orientation = window.orientation;
} 반응형
'Jquery & Mobile' 카테고리의 다른 글
[Jquery] - Plugin 모음사이트Jquery & Mobile 2011. 7. 1. 17:38반응형
반응형
'Jquery & Mobile' 카테고리의 다른 글
[Jquery] - Slide Text (With. Iscroll.js)Jquery & Mobile 2011. 6. 30. 16:55반응형
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: Carousel</title>
<script type="text/javascript" src="../js/iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function () {
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
}
});
}
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<style type="text/css" media="all">
body,ul,li {
padding:10px;
margin:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
#wrapper {
width:300px;
height:160px;
float:left;
position:relative; /* On older OS versions "position" and "z-index" must be defined, */
z-index:1; /* it seems that recent webkit is less picky and works anyway. */
overflow:hidden;
background:#aaa;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
background:#e3e3e3;
}
#scroller {
width:2100px;
height:100%;
float:left;
padding:0;
}
#scroller ul {
list-style:none;
display:block;
float:left;
width:100%;
height:100%;
padding:0;
margin:0;
text-align:left;
}
#scroller li {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
display:block; float:left;
width:300px; height:160px;
text-align:center;
font-family:georgia;
font-size:18px;
line-height:140%;
}
#nav {
width:300px;
float:left;
}
#prev, #next {
float:left;
font-weight:bold;
font-size:14px;
padding:5px 0;
width:80px;
}
#next {
float:right;
text-align:right;
}
#indicator, #indicator > li {
display:block; float:left;
list-style:none;
padding:0; margin:0;
}
#indicator {
width:110px;
padding:12px 0 0 30px;
}
#indicator > li {
text-indent:-9999em;
width:8px; height:8px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
background:#ddd;
overflow:hidden;
margin-right:4px;
}
#indicator > li.active {
background:#888;
}
#indicator > li:last-child {
margin:0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li><strong>1.</strong> <em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em></li>
<li><strong>2.</strong> <em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.</em></li>
<li><strong>3.</strong> <em>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</em></li>
<li><strong>Zeroth Law:</strong> <em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em></li>
<li><strong>Lyuben Dilov's Forth law:</strong> <em>A robot must establish its identity as a robot in all cases.</em></li>
<li><strong>Harry Harrison's Forth law:</strong> <em>A robot must reproduce. As long as such reproduction does not interfere with the First or Second or Third Law.</em></li>
<li><strong>Nikola Kesarovski's Fifth law:</strong> <em>A robot must know it is a robot.</em></li>
</ul>
</div>
</div>
<div id="nav">
<div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false">← prev</div>
<ul id="indicator">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<div id="next" onclick="myScroll.scrollToPage('next', 0);return false">next →</div>
</div>
</body>
</html> 반응형
'Jquery & Mobile' 카테고리의 다른 글
[JqueryMobile] - 간단정리 PPTJquery & Mobile 2011. 6. 30. 16:51반응형
참고자료
반응형
'Jquery & Mobile' 카테고리의 다른 글
[JqueryMobile] - JqueryMobile 에서 슬라이딩 터치 이벤트Jquery & Mobile 2011. 6. 30. 16:47반응형
$("#페이지ID").bind('swiperight',function(event)
{
//alert('Left To Right');
왼쪽에서 오른쪽으로 슬라이딩 터치했을때 발생될 Function });
$("#페이지ID").bind('swipeleft',function(event)
{
//alert('Right to Left');
오른쪽에서 왼쪽으로 슬라이딩 터치했을때 발생될 Function
}); 반응형
'Jquery & Mobile' 카테고리의 다른 글
[Jquery] - Image Plugin (갤러리)Jquery & Mobile 2011. 6. 30. 16:30반응형
반응형
'Jquery & Mobile' 카테고리의 다른 글
[Jquery] - Jcrop (이미지 자르기 플러그인)Jquery & Mobile 2011. 6. 30. 16:26반응형
Jcrop »jQuery 이미지 자르기 플러그인Jcrop는 웹 응용 프로그램에 이미지 자르기 기능을 추가하는 빠르고 쉬운 방법입니다. 그것은 익숙한 데스크탑 그래픽 응용 프로그램에 충실하는 강력한 크로스 - 플랫폼 DHTML 자르기 엔진 전형적인 jQuery 플러그인의 용이성 - 오브 - 사용을 결합한 제품입니다.
기능 개요
크로스 - 플랫폼 호환성
이전 버전이나 다른 현대적인 브라우저에서 작동할 수, 이러한 테스트되었습니다. 문서 보관
Jcrop는 아래에 공개 무료 소프트웨어입니다 MIT 라이센스 . 출처 : http://deepliquid.com/content/Jcrop.html반응형
'Jquery & Mobile' 카테고리의 다른 글
[JqueryMobile] - Image Plugin 참고 사이트Jquery & Mobile 2011. 6. 30. 16:08반응형
데모페이지도 있습니다. 이미지 Zoom 기능, Image에 관한 모든 플러그인들 http://sixrevisions.com/resources/14-jquery-plugins-for-working-with-images/ http://www.mind-projects.it/projects/jqzoom/demos.php 반응형
'Jquery & Mobile' 카테고리의 다른 글
[JqueryMobile] - Plugin 참고사이트Jquery & Mobile 2011. 6. 30. 16:05반응형
반응형
'Jquery & Mobile' 카테고리의 다른 글
|
iscroll.js
jQueryBasicAPIs.pdf
