만일 모든 페이지가 각각의 독립된 페이지라면 문제가 없다.
but 동일 페이지를 계속적으로 호출하였다면 아마 아래와 같은 문제에 봉착한다.


- 만일 같은 페이지를 계속적으로 호출한다면 jqtouch의 경우 가장 root단의 페이지#page-호출횟수 로 경로가 지정된다. 아래는 같은 페이지를 5번 호출한것과 같은 화면이다.
- 문제는 root의 화면으로 가기 위해선 back를 5번 눌러줘야 한다는것이다.
- 그래서! home 으로 한번에 갈수 있는 버튼 하나를 만들면 끝!
! 물론 계속적으로 leap 페이지로 뻗어나가도 같은 URL형식을 가지게 된다. 

 




<%@ page contentType="text/html;charset=euc-kr" %>
<%
String param1 = request.getParameter("param1");
String param2 = request.getParameter("param2");
%>

<div>
    <div class="toolbar">
        <h1>formTest</h1>        
  <a class="back" href="#">Back</a>
      <a class="button"  href="jqtouchFormtest.jsp"  rel="external">Home</a>
    </div>
      <form action="formTest.jsp" method="POST" class="form" >
      
      <ul class="rounded">
       <li> <input type="text" name="param1" value="<%=param1 %>"/></li>
       <li> <input type="password" name="param2" value="<%=param2 %>"/></li>
    </ul>
     <%=param1 %><br>
  <%=param2 %><br>
 
  <a style="color:rgba(0,0,0,.9); width:50px;" class="submit whiteButton">전송</a>
     
  </form>
</div>



위의 소스는 post방식을 하기 위해서 만든 소스에서 살짝 추가만 해준 것이다.(post 방식 링크 참조)
소스상에서 back 버튼 바로 아래에 home를 추가해주었다. 전에 말했던 대로 버튼들은 모두 <a>태그로 되어 있기 때문에 class를 button으로 지정해주어야만 버튼 이미지가 종속된다.
href 의 값은 최종적으로 갈려눈 페이지 이름을 적어주면 된다. 
rel 의 경우 external 은 현재창에서 열기가 된다. 
 


- 혹시 애니메이션효과를 지정할려면 어떻게 해야 하는지 아시는 분은 댓글좀;;-0-;;

저작자 표시
신고

'web > JQTouch' 카테고리의 다른 글

jqtouch home 버튼 만들기  (0) 2011.05.31
jqtouch form post  (0) 2011.05.30
jQTouch 페이지 전환 효과!  (0) 2010.12.07
jQTouch viewport 에 대하여..  (0) 2010.12.06
jQTouch 혹시 한글이 안된다면!  (2) 2010.12.05
jQTouch media Queries  (0) 2010.12.02

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret
만일 모든 페이지가 각각의 독립된 페이지라면 문제가 없다.
but 동일 페이지를 계속적으로 호출하였다면 아마 아래와 같은 문제에 봉착한다.


- 만일 같은 페이지를 계속적으로 호출한다면 jqtouch의 경우 가장 root단의 페이지#page-호출횟수 로 경로가 지정된다. 아래는 같은 페이지를 5번 호출한것과 같은 화면이다.
- 문제는 root의 화면으로 가기 위해선 back를 5번 눌러줘야 한다는것이다.
- 그래서! home 으로 한번에 갈수 있는 버튼 하나를 만들면 끝!
! 물론 계속적으로 leap 페이지로 뻗어나가도 같은 URL형식을 가지게 된다. 

 




<%@ page contentType="text/html;charset=euc-kr" %>
<%
String param1 = request.getParameter("param1");
String param2 = request.getParameter("param2");
%>

<div>
    <div class="toolbar">
        <h1>formTest</h1>        
  <a class="back" href="#">Back</a>
      <a class="button"  href="jqtouchFormtest.jsp"  rel="external">Home</a>
    </div>
      <form action="formTest.jsp" method="POST" class="form" >
      
      <ul class="rounded">
       <li> <input type="text" name="param1" value="<%=param1 %>"/></li>
       <li> <input type="password" name="param2" value="<%=param2 %>"/></li>
    </ul>
     <%=param1 %><br>
  <%=param2 %><br>
 
  <a style="color:rgba(0,0,0,.9); width:50px;" class="submit whiteButton">전송</a>
     
  </form>
</div>



위의 소스는 post방식을 하기 위해서 만든 소스에서 살짝 추가만 해준 것이다.(post 방식 링크 참조)
소스상에서 back 버튼 바로 아래에 home를 추가해주었다. 전에 말했던 대로 버튼들은 모두 <a>태그로 되어 있기 때문에 class를 button으로 지정해주어야만 버튼 이미지가 종속된다.
href 의 값은 최종적으로 갈려눈 페이지 이름을 적어주면 된다. 
rel 의 경우 external 은 현재창에서 열기가 된다. 
 


- 혹시 애니메이션효과를 지정할려면 어떻게 해야 하는지 아시는 분은 댓글좀;;-0-;;

저작자 표시
신고

'web > JQTouch' 카테고리의 다른 글

jqtouch home 버튼 만들기  (0) 2011.05.31
jqtouch form post  (0) 2011.05.30
jQTouch 페이지 전환 효과!  (0) 2010.12.07
jQTouch viewport 에 대하여..  (0) 2010.12.06
jQTouch 혹시 한글이 안된다면!  (2) 2010.12.05
jQTouch media Queries  (0) 2010.12.02

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

jqtouch form post

web/JQTouch 2011.05.30 10:26
다른 창으로 데이터를 넘겨 주는 방법을 보겠다. 당연히 post 방식이다.(get 방식도 가능합니다.)
- 물론  html 형식과 동일하게 form 방식을 넘겨줄수 있다.
- but html 형식으로 할경우 jqtouch에서 지원하는 애니메이션 효과는 나타나지 않는다.

!유의할 사항은 데이터를 받는 창에서의 작성형식이 많이 다르다는 것이다.
상위단에 jqtouch 경로등이 들어가지 않으며 <html> 태그로도 시작하지 않는다.
이는 jqtouch 자체 내에서 post/get 방식으로 데이터를 넘길시 자동적으로 페이지를 생성하기 때문이다.
(이것때문에 많이 헷갈렸습니다. 근데 사용하다보면 은근히 더 편합니다.)

먼저 form이 있는 첫번째 화면 소스입니다.



<%@ page contentType="text/html;charset=euc-kr" %>
<!doctype html>
<html>
    <head>
        <meta charset="EUC-KR" />
     
        <title>post test</title>
         <style type="text/css" media="screen">@import "jqtouch/jqtouch/jqtouch.min.css";</style>
        <style type="text/css" media="screen">@import "jqtouch/themes/jqt/theme.min.css";</style>
        <script src="jqtouch/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="euc-kr"></script>
        <script src="jqtouch/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="euc-kr"></script>
        <script type="text/javascript" charset="euc-kr">
           var jQT = new $.jQTouch({
                icon: './img/logo.png',
                addGlossToIcon: false,
                startupScreen: './img/startimg.png',
                statusBar: 'black',
                preloadImages: [
                    'jqtouch/themes/jqt/img/back_button.png',
                    'jqtouch/themes/jqt/img/back_button_clicked.png',
                    'jqtouch/themes/jqt/img/button_clicked.png',
                    'jqtouch/themes/jqt/img/grayButton.png',
                    'jqtouch/themes/jqt/img/whiteButton.png',
                    'jqtouch/themes/jqt/img/loading.gif'
                    ]
            });  
</script>
<style>
</style>

</head>
<body>
 
 <div id="Menu">
  <div class="toolbar">
   <h1>post test</h1>
  </div> 
      
  <form action="formTest.jsp" method="POST" class="form" >
     
     <ul class="rounded">
       <li> <input type="text" name="param1"/></li>
       <li> <input type="password" name="param2"/></li>
    </ul>

     <a style="color:rgba(0,0,0,.9); width:50px;" class="submit whiteButton">전송</a>
     
  </form>

  </div>  
</body>
</html>




간단하게 input type 두개와 버튼으로 구성되어 있습니다.
 
받는 쪽의 페이지 소스입니다.
formTest.jsp


<%@ page contentType="text/html;charset=euc-kr" %>
<%
String param1 = request.getParameter("param1");
String param2 = request.getParameter("param2");
%>

<div>
    <div class="toolbar">
        <h1>formTest</h1>        
   
    </div>
      <ul class="rounded">
       <li> <input type="text" name="param1" value="<%=param1 %>"/></li>
       <li> <input type="password" name="param2" value="<%=param2 %>"/></li>
    </ul>
     <%=param1 %><br>
  <%=param2 %>
</div>



참간단합니다. 테그는 div로 시작하며 위의 상위단을 알려주는 toolbar 와 본문으로 나뉩니다.
본문엔 받은 파라미터를 출력하도록 변수를 두었습니다.
!! html 형식(<html>태그 및 기타 태그들) 및 라이블러리 설정은 필요치 않습니다.

1. 이제 원하는 문장을 input 박스에 넣고 전송 버튼을 눌러줍니다.


2. 두번째 페이지에서 전송된 문자열을 확인할수 있습니다.


- 전송 버튼은 <a> 링크 태그로 이루어져 있더군요. 흠..근데 css 어디에서 그려주는지를 모르겟습니다. 흠..찾고 싶은데..
- 두번째에서 다시 전송하면 form 만 넣어주면 됩니다.  



 
저작자 표시
신고

'web > JQTouch' 카테고리의 다른 글

jqtouch home 버튼 만들기  (0) 2011.05.31
jqtouch form post  (0) 2011.05.30
jQTouch 페이지 전환 효과!  (0) 2010.12.07
jQTouch viewport 에 대하여..  (0) 2010.12.06
jQTouch 혹시 한글이 안된다면!  (2) 2010.12.05
jQTouch media Queries  (0) 2010.12.02

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret
오.. 역시 쉽게 잘만든듯! 이렇게 프로그램 할수 있으면 정말..아무나 만들수 있을텐데..
페이지 전환 효과에는 총 7가지가 있다. slideup, dissolve, fade, flip, pop, swap, cube 까지..
한번 만들어 보는겸해서 내년에 개봉할 영화 리스트로 간단하게 만들어 보았다.

- 아시다 싶히 jqtouch 라이블러리는 개인이 설정한 경로에 따라 달라집니다. 
- 아래의 소스중에서 import 부분과 script src 부분의 경로를 재설정해 주셔야 합니다.

결과 화면(화면전환이 빨라서 스샷을 못찍겠어..ㅜㅡㅜ 겨우 찍은건 pop, cube화면뿐..)




<%@ page contentType="text/html;charset=euc-kr" %>

<!doctype html>
<html>
    <head>
        <meta charset="EUC-KR" />
     
        <title>2011년 개봉 예정작</title>
        <style type="text/css" media="screen">@import "jqtouch/jqtouch/jqtouch.min.css";</style>
        <style type="text/css" media="screen">@import "jqtouch/themes/jqt/theme.min.css";</style>
        <script src="jqtouch/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="euc-kr"></script>
        <script src="jqtouch/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="euc-kr"></script>
        <script type="text/javascript" charset="euc-kr">
           var jQT = new $.jQTouch({
                icon: './img/logo.png',
                addGlossToIcon: false,
                startupScreen: './img/startimg.png',
                statusBar: 'black',
                preloadImages: [
                    'jqtouch/themes/jqt/img/back_button.png',
                    'jqtouch/themes/jqt/img/back_button_clicked.png',
                    'jqtouch/themes/jqt/img/button_clicked.png',
                    'jqtouch/themes/jqt/img/grayButton.png',
                    'jqtouch/themes/jqt/img/whiteButton.png',
                    'jqtouch/themes/jqt/img/loading.gif'
                    ]
            });  
</script>

<style type="text/css">

</style>

</head>
<body>
<div id="Menu">
  <div class="toolbar">
   <h1>개봉 영화 리스트</h1>
  </div>        
  <ul class="rounded">
    <li class="arrow"><a class="slideup" href="#seasonofthewitch">마녀의 계절</a></li>
    <li class="arrow"><a class="dissolve" href="#themechanic">더 메카닉</a></li>
    <li class="arrow"><a class="fade" href="#iamnumberfour">아이 엠 넘버 포</a></li>
    <li class="arrow"><a class="flip" href="#suckerpunch">석커 펀치</a></li>
    <li class="arrow"><a class="pop" href="#scream4">스크림4</a></li>
    <li class="arrow"><a class="swap" href="#transformers">트랜스포머3</a></li>
    <li class="arrow"><a class="cube" href="#mission">미션임파서블4</a></li>
  </ul>   
</div>  
 
<div id="seasonofthewitch">
  <div class="toolbar">
  
    <h1>마녀의 계절</h1>
    <a class="back" href="#">Back</a>
  </div>
   <dl>
    <dt>
    <img src="http://image.cine21.com/resize/cine21/poster/2010/0111/M0010024_Season_of_the_Witch[X160,230].jpg" />
    </dt>
    <dd><strong>Season of the Witch</strong></dd>
    <dd>영화 정보</dd>
    <dd>감독 : Dominic Sena</dd>
    <dd>주연 : Nicolas Cage</dd>
<dd>       Ron Perlman</dd>
<dd>장르 : 판타지, 스릴러</dd>
<dd>북미 개봉일 : 1월 7일</dd>
</dl>   
</div>    

<div id="themechanic">
  <div class="toolbar">
  
    <h1>더 메카닉</h1>
    <a class="back" href="#">Back</a>
  </div>
   <dl>
    <dt>
    <img src="http://cfile17.uf.daum.net/C198x288/1858C6264CEBCE072FDBAD" />
    </dt>
    <dd><strong>The Mechanic</strong></dd>
    <dd>영화 정보</dd>
    <dd>액션, 드라마 | 미국 </dd>
    <dd>감독 : 사이먼 웨스트 </dd>
<dd> 제이슨 스태덤, 벤 포스터</dd> 
<dd>도날드 서덜랜드 (해리 역)</dd>
<dd>북미니 안덴 (사라 역)</dd>
<dd> 줄거리 : 줄거리1972년 마이클 위너 감독이 연출하고 찰슨 브론슨과 잔 마이클 빈센트가 주연한 영화 <냉혈인>의 리메이크작. 베테랑 살인청부업자가 자신의 뒤를 이을 제자를 키우게 되는데 그 이면에는 숨겨진 음모가 있다. 
</dd>
</dl>   
</div>    

<div id="iamnumberfour">
  <div class="toolbar">
  
    <h1>아이 엠 넘버 포</h1>
    <a class="back" href="#">Back</a>
  </div>
   <dl>
    <dt>
    <img src="http://cfile116.uf.daum.net/C198x288/135A1F014CA8995A8FD0D1" />
    </dt>
    <dd><strong>I Am Number Four</strong></dd>
    <dd>영화 정보</dd>
    <dd>액션, SF | 미국  </dd>
    <dd>감독 : D.J. 카루소  </dd>
<dd> 알렉스 페티퍼 (넘버 4 역)</dd> 
<dd> 티모시 올리펀트 (헨리 역)</dd>
<dd> 다이아나 애그론 (사라 역)</dd>
<dd> 줄거리 : 외계인 십대 청소년들이 자신의 고향별을 파괴한 다른 외계인들을 피해 도망친다는 내용.</dd>
</dl>   
</div> 

<div id="suckerpunch">
  <div class="toolbar">
  
    <h1>서커 펀치</h1>
    <a class="back" hr치ef="#">Back</a>
  </div>
   <dl>
    <dt>
    <img src="http://cfile117.uf.daum.net/C198x288/2023AD1F4C4DC09B5B13A9" />
    </dt>
    <dd><strong>Sucker Punch</strong></dd>
    <dd>영화 정보</dd>
    <dd>액션, 판타지 | 미국 </dd>
    <dd>감독 : 잭 스나이더 </dd>
<dd> 바네사 허진스 (블론디 역)</dd> 
<dd> 제이미 정 (앰버 역)</dd>
<dd> 에밀리 브라우닝 (베이비 돌 역)</dd>
<dd> 줄거리 : 계부에 의해 정신 병원에 갖힌 소녀의 상상담</dd>
</dl>   
</div> 
 
 
 
 <div id="scream4">
  <div class="toolbar">
  
    <h1>스크림 4</h1>
    <a class="back" hr치ef="#">Back</a>
  </div>
   <dl>
    <dt>
    <img src="http://cfile16.uf.daum.net/C198x288/137C660B4BE6E2C72B025A" />
    </dt>
    <dd><strong>Scream 4</strong></dd>
    <dd>영화 정보</dd>
    <dd>공포, 스릴러 | 미국  </dd>
    <dd>감독 : 웨스 크레이븐  </dd>
<dd> 엠마 로버츠 (질 역)</dd> 
<dd> 니브 캠벨 (시드니 역)</dd>
<dd> 커트니 콕스 (게일 역)</dd>
<dd> 줄거리 : 1996년부터 시리즈 3편까지 제작된 <스크림>의 4번째 시리즈. </dd>
</dl>   
</div> 

 <div id="transformers">
  <div class="toolbar">
  
    <h1>트랜스 포머 3</h1>
    <a class="back" hr치ef="#">Back</a>
  </div>
   <dl>
    <dt>
    <img src="http://cfile118.uf.daum.net/C198x288/16158A254CCFA2A71E9B68" />
    </dt>
    <dd><strong>transformers 3</strong></dd>
    <dd>영화 정보</dd>
    <dd>액션, 어드벤처 | 미국  </dd>
    <dd>감독 : 마이클 베이  </dd>
<dd> 샤이아 라보프 (샘 윗위키 역)</dd> 
<dd> 로지 헌팅턴-휘틀리, 패트릭 뎀시 (미카엘라의 보스 역)</dd>
<dd> 존 말코비치 (샘의 보스 역)</dd>
<dd> 줄거리 : 트랜스포머 시리즈의 3번째 이야기로 그간 주인공으로 활약해 온 샤이아 라보프가 함께 할 예정.</dd>
</dl>   
</div> 

 <div id="mission">
  <div class="toolbar">
  
    <h1>미션 임파서블4</h1>
    <a class="back" hr치ef="#">Back</a>
  </div>
   <dl>
    <dt>
    <img src="http://cfile189.uf.daum.net/C198x288/15110210A905C6E98A92DE" />
    </dt>
    <dd><strong>Mission: Impossible IV</strong></dd>
    <dd>영화 정보</dd>
    <dd>액션 | 미국  </dd>
    <dd>감독 : J.J. 에이브람스  </dd>
<dd> 톰 크루즈 (에단 헌트 역)</dd> 
<dd> 폴라 패튼</dd>
<dd> 제레미 레너</dd>
<dd> 줄거리 : 톰 크루즈가 전편들에 이어 주연을 맡는 <미션 임파서블>의 4번째 시리즈. </dd>
</dl>   
</div> 


</body>
</html>

- 화면 전환의 효과는 빨간색으로 표시된 class에 원하는 효과 이름만 넣어주면 됩니다.
- 화면에 맞는 div id 만 설정해 주면 원하는 페이지로 이동이 가능합니다
- 참쉽죠!^-^/
저작자 표시
신고

'web > JQTouch' 카테고리의 다른 글

jqtouch home 버튼 만들기  (0) 2011.05.31
jqtouch form post  (0) 2011.05.30
jQTouch 페이지 전환 효과!  (0) 2010.12.07
jQTouch viewport 에 대하여..  (0) 2010.12.06
jQTouch 혹시 한글이 안된다면!  (2) 2010.12.05
jQTouch media Queries  (0) 2010.12.02

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret
저번에 했던 Media Queries 는 브라우져의 크기에 따른 CSS변화를 가져다 주는 태그였다면 이번의 viewport는 휴대용 기기에만 해당하는 태그라 할수 있습니다. (실제 일반 PC용 브라우져에선 viewport 는 무시됩니다)

viewport 가 설정되지 않은 페이지를 보면 일반 PC브라우저에서 보는 크기와 똑같은 크기로 휴대용기기에서 나오는것을 볼수 있습니다. 물론 확대가 되기 때문에 문제는 없겠지만, 사용자는 자신에게 딱 맞는것을 봐야 기분이 좋겠쬬. (웹 페이지 공부하면서 매일 보는 싸이트입니다. 다양한 페이지 UI가 있어서 공부하기엔 좋은거 같습니다. 근데 정말 작게 나오죠?!)

그럼 이제 viewport 적용 방법을 보시겠습니다.
아주~~ 간단합니다.
<head>태그 아래에 다음과 같이 써주면 됩니다.

 <meta name="viewport" content="height=device-height, initial-scale=0.1, 
         minimum-scale=0.1, maximum-scale=10.0, user-scalable=yes"/>

속성이 다섯개가 있는데 속성들은 다음과 같이 정의된다.

viewport

Changes the logical window size used when displaying a page on iOS.

Property

Description

width

The width of the viewport in pixels. The default is 980. The range is from 200 to 10,000.

You can also set this property to the constants described in “number.”

Available in iOS 1.0 and later.

height

The height of the viewport in pixels. The default is calculated based on the value of the width property and the aspect ratio of the device. The range is from 223 to 10,000 pixels.

You can also set this property to the constants described in “number.”

Available in iOS 1.0 and later.

initial-scale

The initial scale of the viewport as a multiplier. The default is calculated to fit the webpage in the visible area. The range is determined by the minimum-scale and maximum-scale properties.

You can set only the initial scale of the viewport—the scale of the viewport the first time the webpage is displayed. Thereafter, the user can zoom in and out unless you set user-scalable to no. Zooming by the user is also limited by the minimum-scale and maximum-scale properties.

Available in iOS 1.0 and later.

minimum-scale

Specifies the minimum scale value of the viewport. The default is 0.25. The range is from >0 to 10.0.

Available in iOS 1.0 and later.

maximum-scale

Specifies the maximum scale value of the viewport. The default is 1.6. The range is from >0 to 10.0.

Available in iOS 1.0 and later.

user-scalable

Determines whether or not the user can zoom in and out—whether or not the user can change the scale of the viewport. Set to yes to allow scaling and no to disallow scaling. The default is yes.

Setting user-scalable to no also prevents a webpage from scrolling when entering text in an input field.

Available in iOS 1.0 and later.


하나한 자세히 살펴 보면은 content 는 기준이 되는 길이를 정하는 것이다. 속성값에는 device-width, device-height 두가지가 있다. 기준이 가로, 세로로 기존의 웹앱은 가로에 자동으로 맞추어져 있는데 이것을 세로로 바꿔서 해보면 
<meta name="viewport" content="height=device-height, initial-scale=0.1, 
         minimum-scale=0.1, maximum-scale=10.0, user-scalable=yes"/>
세로일때는 이상이 없어보이지만 가로로 뉘여보면


세로에 픽스하게 만들었기 때문에 가로로 했을경우 옆부분이 짤리는 경우를 볼수 있다.

initial-scale 의 속성값은 처음 시작할때의 스케일 크기이다.
minimum-scale 는 최소 스케일 크기(0~10)
maximum-scale 는 최대 스케일 크기를 나타낸다.(0~10)
user-scalable 는 사용자가 확대 축소를 허용할것인가이다.

일단 user-scalable를 yes로 두고 min, max 를 테스트 해보면
(min 을 0.1, max를 10으로 두었다.)


1.처음 화면
2. 확대한 모습(아마도 10배 확대가 되었겠죠?)

- 사실 jQTouch 를 import 하면 딱히 설정할 필요가 없습니다. viewport는 알아서 잡아주거든요.;
- 그냥 공부차원에서 해봤습니다;; 보시면 알겠지만 JQTouch 에서는 확대 축소를 허락하지 않는거 같습니다.;; 아무리 해도 않되더라고요. 그래서 지우고 해서 모양이 저 모양이 되어 버렸네요.



저작자 표시
신고

'web > JQTouch' 카테고리의 다른 글

jqtouch form post  (0) 2011.05.30
jQTouch 페이지 전환 효과!  (0) 2010.12.07
jQTouch viewport 에 대하여..  (0) 2010.12.06
jQTouch 혹시 한글이 안된다면!  (2) 2010.12.05
jQTouch media Queries  (0) 2010.12.02
jQTouch 화면전환 애니메이션.  (0) 2010.11.30

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret
-0- 자꾸 원본에서 euc-kr 로 고쳐도 아무리해도 되질 않는다...

jsp 파일 가장 상단에 다음과 문구만 넣어주면 끝...-_-(기존에 jsp 만들던 대로 만들면 되는거였어..ㅜㅡㅜ )

<%@ page contentType="text/html;charset=euc-kr" %>


-0-제길...하루를..날렷어..ㅋㅋㅋ 어쨌든 성공!

저작자 표시
신고

'web > JQTouch' 카테고리의 다른 글

jQTouch 페이지 전환 효과!  (0) 2010.12.07
jQTouch viewport 에 대하여..  (0) 2010.12.06
jQTouch 혹시 한글이 안된다면!  (2) 2010.12.05
jQTouch media Queries  (0) 2010.12.02
jQTouch 화면전환 애니메이션.  (0) 2010.11.30
jqtouch -_-신기한 UI세계로~ 설정부터~  (0) 2010.11.27

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글  2개가 달렸습니다.
  1. 인코딩 문제군요.. ㅎㅎ
    영어로 짤 수도 없고.. ㅜㅜ
    저도 가끔 고생합니다..
  2. 안녕하세요! 꼬마낙타님. 자이로센서 동영상보고 아침부터 웃었네요..ㅋㅋ
    ㅜㅡㅜ 저도 영어로 짤까 생각하닥 바로 접었습니다... 영어의 얇은 지식..
secret

CSS3 Media Queries
View more presentations from Russ Weakley.
다른곳을 아무리 둘러봐도 위에처럼 설명 잘해놓은곳이 없네. 
간단히 말해 media queries 는 화면의 비율을 기준으로 어떤 화면의 스타일을 결정할수 있다.
모바일상에서는 이렇게~ 컴퓨터 상에서는 저렇게 화면을 구성할수 있는것이다. 

간단하게 기기 별로 화면이 변하는 것을 만들어 보았다.
먼저 jsp
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="MQtest1.css" media="only screen  and (min-device-width:320px) and (max-device-width:480px) ">
<link rel="stylesheet" href="MQtest2.css" media="only screen  and (min-width:768px) and (max-width:1024px) ">
  
<title>Media Queries test</title>
</head>

<body>
<div>
     test<br>
     test<br>
     test<br>
     test<br>
        
    </div>
</body>
</html>

<link> 태그를 보면은 두개의 css를 참조하고 있다. 차이점은 해당하는 기기와 싸이즈이다.
위의 MQtest1.css는 일반 아이팟,아이폰 싸이즈에서 반응하도록 싸이즈 조정을 했다.
(max-device-width 요것만으로도 아이팟,아이폰에서 작동하도록 되어 있다.)
두번째 MQtest2.css는 일반 스크린에서(컴퓨터 화면에서 ) 반응하도록 만들었다.

MQtest1.css
@charset "utf-8";
div
{
width:100%;
height:auto;
font-size:24px;
border:1px solid #0000FF;
background-color:#ff0000;
}

MQtest2.css
@charset "utf-8";
div
{
width:100%;
height:auto;
font-size:12px;
border:1px solid #0000FF;
background-color:#F90;
}

css차이점은 색상과 글자 폰트라는것을 볼수 있다.

아래가 일반 브라우져에서 본 화면

아래는 아이팟에서 본 화면이다.

똑같은 jsp파일을 보더라도 css파일을 다르게 참조하여 화면 구성을 다르게 할수 있다는것을 볼수 있다.


- 일반 브라우져에서 반응하려면 가로 싸이즈가 768~1024 사이여야만 반응합니다.

기기별 media queries 정의 링크 : http://firejune.com/1633
 

저작자 표시
신고

'web > JQTouch' 카테고리의 다른 글

jQTouch 페이지 전환 효과!  (0) 2010.12.07
jQTouch viewport 에 대하여..  (0) 2010.12.06
jQTouch 혹시 한글이 안된다면!  (2) 2010.12.05
jQTouch media Queries  (0) 2010.12.02
jQTouch 화면전환 애니메이션.  (0) 2010.11.30
jqtouch -_-신기한 UI세계로~ 설정부터~  (0) 2010.11.27

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret
사실 가장 필요한 기능이였는데..정말 쉽게 구현이 된다.
개념상으론 구조가 html5와 비슷하고, 태그만으로 애니메이션 효과를 연출하기 때문에 정말 초보자라도, jquery를 몰라도 구현이 가능하다.(실제로 내가 jquery를 모르기때문에 -0- )

내가 가장 필요로 했던 애니메이션효과인 Filp 효과와 Slide 효과만을 집어 넣어봤다.

전체 소스
<!doctype html>
<html>
    <head>
        <meta charset="EUC-KR" />
        <title>test</title>
        <style type="text/css" media="screen">@import "jqtouch/jqtouch/jqtouch.min.css";</style>
        <style type="text/css" media="screen">@import "jqtouch/themes/jqt/theme.min.css";</style>
        <script src="jqtouch/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="euc-kr"></script>
        <script src="jqtouch/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="euc-kr"></script>
        <script type="text/javascript" charset="euc-kr">
          $.jQTouch();   
</script>
</head>
<body>
<div id="Menu">
  <div class="toolbar">
   <h1>View Change</h1>
  </div>        
  <ul class="rounded">
    <li class="arrow"><a href="#secondPage">Slide</a></li>
    <li class="arrow"><a class="flip" href="#secondPage">Flip</a></li>
  </ul>   
</div>   
<div id="secondPage">
  <div class="toolbar">
  
    <h1>Second Page</h1>
    <a class="back" href="#">Back</a>
  </div>
  <ul class="rounded">
    <li class="arrow"><a href="#Menu">Back</a></li>
  </ul>   
</div>     
</body>
</html>

- 위의 소스대로 하면 당연히 않된다. 각자의 프로젝트에서 jqtouch의 라이블러리 경로가 다르기 때문인다.
script src="" , import 부분의 경로를 자신의 프로젝트에 맞게 고쳐서 쓰기 바란다. 


저작자 표시
신고

'web > JQTouch' 카테고리의 다른 글

jQTouch 페이지 전환 효과!  (0) 2010.12.07
jQTouch viewport 에 대하여..  (0) 2010.12.06
jQTouch 혹시 한글이 안된다면!  (2) 2010.12.05
jQTouch media Queries  (0) 2010.12.02
jQTouch 화면전환 애니메이션.  (0) 2010.11.30
jqtouch -_-신기한 UI세계로~ 설정부터~  (0) 2010.11.27

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret
오......그냥 앱웹을 검색하다가 결국 jqtouch 까지 오게되었다. 
스크립트도 사용할줄 모르는 놈에게 jquery 라니...-0- 험난한 길이 뻔히 보인다.

먼저 설정부터 시작!
1. css,js 파일이 있는 패키지를 다운 받는다!

2. 압축을 풀면 폴더가 생기는데 그 폴더안에 필요한 파일이 다 들어가 있다.
우선 폴더 이름을 깔끔하게 jqtouch 로 하고 해당하는 이클립스에 복사해 두었다.
(폴더 jqtouch 가 보인다!)

3. 이제 스크립트 소스 링크만 해주면 맘껏 사용해줄수 있다.
<%@page contentType="text/html" pageEncoding="euc-kr"%>
<!DOCTYPE HTML>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
        <title>jQTouchTest</title>
        <script src="jqtouch/jqtouch/jquery.1.3.2.min.js"></script>
        <script src="jqtouch/jqtouch/jqtouch.min.js"></script>
        <style type="text/css">
            @import "jqtouch/jqtouch/jqtouch.min.css";
        </style>
        <style type="text/css">
            @import "jqtouch/themes/jqt/theme.min.css";
        </style>
        <script>
            $.jQTouch();
        </script>
    </head>
    <body>  
        <div id="home">
            <div class="toolbar"><h1>jQTouchTest</h1></div>
            <ul class="rounded">                                
                <li><a href="#samsung">삼성</a></li>
                <li><a href="#apple">애플</a></li>
                <li><a href="#chick">닭공장</a></li>
                <li><a href="#google">구글</a></li>
            </ul>
        </div>       
    </body>
</html>


(혹시 폴더 이름이 다르게 되어 있다면 src 부분을 고쳐서 쓰면 된다.)

4. 마지막! 실행화면! 링크 : http://www.testiphone.com/ 여기에 자신이 만든 주소만 넣어주면 실제 화면처럼 나온다.(뭐 화면만 줄여서 출력하는 정도이지만 우리가 원하는건 UI 이기 때문에 이것만으로도 만족한다.)

데모 싸이트가 있기 때문에 쉽게 따라할수 있을거 같다.(나는 동적인것을 사용하는게 아닌-영상이나,다이렉티브한것말고 UI를 사용할려고 한것이기 때문에 데모만으로도 충분할꺼 같다.)
저작자 표시
신고

'web > JQTouch' 카테고리의 다른 글

jQTouch 페이지 전환 효과!  (0) 2010.12.07
jQTouch viewport 에 대하여..  (0) 2010.12.06
jQTouch 혹시 한글이 안된다면!  (2) 2010.12.05
jQTouch media Queries  (0) 2010.12.02
jQTouch 화면전환 애니메이션.  (0) 2010.11.30
jqtouch -_-신기한 UI세계로~ 설정부터~  (0) 2010.11.27

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret