'분류 전체보기'에 해당되는 글 444건

  1. 로딩메시지 보이기 감추기 2012.04.27
  2. 스크롤 최하단 도착 2012.04.27
  3. 페이스북 좌우드레그 2012.04.27

로딩메시지 보이기 감추기

from Develop/Jquery Mobile 2012. 4. 27. 17:50

<!DOCTYPE html>

<html>

<head>

<title>JQuery Mobile Page</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

<script type="text/javascript">

$(document).ready(init);

function init()

{

$("#btnShow").bind("tap", function ()

{

$.mobile.showPageLoadingMsg();

});

$("#btnHide").bind("tap", function ()

{

$.mobile.hidePageLoadingMsg();

});

}

</script>

</head>

<body>

<div data-role="page">

<div data-role="header" data-position="fixed">

<h1>Loading Message Method</h1>

</div>

<div data-role="content">

<a href="#" id="btnShow" data-role="button">showPageLoadingMsg()</a>

<a href="#" id="btnHide" data-role="button">hidePageLoadingMsg()</a>

</div>

<div data-role="footer" data-position="fixed">

<h1>Writer Mozi</h1>

</div>

</div>

</body>

</html>

chapter44.sample1.html


저작자표시 비영리 변경금지
,

스크롤 최하단 도착

from Develop/Jquery 2012. 4. 27. 17:49

<script>

function scrollEnd(){

 var scrollHeight = document.compatMode=="CSS1Compat"? document.documentElement.scrollHeight : document.body.scrollHeight;

 var clientHeight = document.compatMode=="CSS1Compat"? document.documentElement.clientHeight : document.body.clientHeight;

 var ScrollTop = document.compatMode == "CSS1Compat"? document.documentElement.scrollTop : document.body.scrollTop;

 var scrollPos = scrollHeight - ScrollTop;

 if (clientHeight == scrollPos)

 {

  alert("끝!");

 }

}

</script>

 

<Body onscroll=scrollEnd();>




<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<script type="text/javascript">

   $(window).scroll(function(){

   if  ($(window).scrollTop() == $(document).height() - $(window).height()){

      alert("끝!");

   }

  }); 

  

 });

 </script>

 

저작자표시 비영리 변경금지
,

페이스북 좌우드레그

from Develop/Jquery Mobile 2012. 4. 27. 17:48

아래 코드는 간단하게 페이지가 로드됐을때


핸드폰에서 왼쪽으로 30px(?), 오른쪽으로 30px(?) 이상씩 마우스무브를 하면


페이지 이동을 시키는 코드이다.





해당 페이지에 swipeleft , swiperight 이벤트를 등록시키면


왼쪽으로 마우스슬라이드, 오른쪽으로 마우스슬라이드시에 이벤트가 발생한다.(휴대폰에서도)





페이지 이동방식은 두가지.





일반 웹폼 전송방식


JQM 페이지 전송방식





먼저 일반 웹폽전송방식은 말그대로 기존에 웹페이지에서 폼 전송하듯 하는 방식이고.


JQM 페이지 전송방식은


 $.mobile.changePage("Page1.aspx", { transition: "slide", reverse: false }, true, false); 

 

이런식으로 전송한다. 


한가지 주의할점은 Page.aspx 페이지에 <data-role="page">로 선언된 부분만 긁어 온다는것.





그러므로 Page1.aspx스크립트구문에 


백날 


$(document).readey(function(){


alert("HHH");


});


이렇게 해도 작동안한다. page로 선언된 부분만 긁어서 


메인페이지부분에 긁어 넣기 때문에.





 $(document).ready(function () { 


        $("#page").live("swipeleft", function () {


            // jqm 방식  $.mobile.changePage("Page1.aspx", { transition: "slide", reverse: false }, true, false); 


// 일반 Form 전송 방식


                location.href = "Page1.aspx";


        });





        $("#page").live("swiperight", function () {


            // $.mobile.changePage("Page1.aspx", { transition: "slide", reverse: false }, true, false); 


                location.href = "Page1.aspx";


        });


    });


저작자표시 비영리 변경금지
,
<< previous 1 ··· 9 10 11 12 13 14 15 ··· 148 next >>

티스토리툴바