web/JQTouch (8) 썸네일형 리스트형 jqtouch home 버튼 만들기 만일 모든 페이지가 각각의 독립된 페이지라면 문제가 없다. but 동일 페이지를 계속적으로 호출하였다면 아마 아래와 같은 문제에 봉착한다. - 만일 같은 페이지를 계속적으로 호출한다면 jqtouch의 경우 가장 root단의 페이지#page-호출횟수 로 경로가 지정된다. 아래는 같은 페이지를 5번 호출한것과 같은 화면이다. - 문제는 root의 화면으로 가기 위해선 back를 5번 눌러줘야 한다는것이다. - 그래서! home 으로 한번에 갈수 있는 버튼 하나를 만들면 끝! ! 물론 계속적으로 leap 페이지로 뻗어나가도 같은 URL형식을 가지게 된다. formTest Back Home 전송 위의 소스는 post방식을 하기 위해서 만든 소스에서 살짝 추가만 해준 것이다.(post 방식 링크 참조) 소스상에서.. jqtouch form post 다른 창으로 데이터를 넘겨 주는 방법을 보겠다. 당연히 post 방식이다.(get 방식도 가능합니다.) - 물론 html 형식과 동일하게 form 방식을 넘겨줄수 있다. - but html 형식으로 할경우 jqtouch에서 지원하는 애니메이션 효과는 나타나지 않는다. !유의할 사항은 데이터를 받는 창에서의 작성형식이 많이 다르다는 것이다. 상위단에 jqtouch 경로등이 들어가지 않으며 태그로도 시작하지 않는다. 이는 jqtouch 자체 내에서 post/get 방식으로 데이터를 넘길시 자동적으로 페이지를 생성하기 때문이다. (이것때문에 많이 헷갈렸습니다. 근데 사용하다보면 은근히 더 편합니다.) 먼저 form이 있는 첫번째 화면 소스입니다. post test 전송 간단하게 input type 두개와 버튼.. jQTouch 페이지 전환 효과! 오.. 역시 쉽게 잘만든듯! 이렇게 프로그램 할수 있으면 정말..아무나 만들수 있을텐데.. 페이지 전환 효과에는 총 7가지가 있다. slideup, dissolve, fade, flip, pop, swap, cube 까지.. 한번 만들어 보는겸해서 내년에 개봉할 영화 리스트로 간단하게 만들어 보았다. - 아시다 싶히 jqtouch 라이블러리는 개인이 설정한 경로에 따라 달라집니다. - 아래의 소스중에서 import 부분과 script src 부분의 경로를 재설정해 주셔야 합니다. 결과 화면(화면전환이 빨라서 스샷을 못찍겠어..ㅜㅡㅜ 겨우 찍은건 pop, cube화면뿐..) 개봉 영화 리스트 마녀의 계절 더 메카닉 아이 엠 넘버 포 석커 펀치 스크림4 트랜스포머3 미션임파서블4 마녀의 계절 Back Sea.. jQTouch viewport 에 대하여.. 저번에 했던 Media Queries 는 브라우져의 크기에 따른 CSS변화를 가져다 주는 태그였다면 이번의 viewport는 휴대용 기기에만 해당하는 태그라 할수 있습니다. (실제 일반 PC용 브라우져에선 viewport 는 무시됩니다) viewport 가 설정되지 않은 페이지를 보면 일반 PC브라우저에서 보는 크기와 똑같은 크기로 휴대용기기에서 나오는것을 볼수 있습니다. 물론 확대가 되기 때문에 문제는 없겠지만, 사용자는 자신에게 딱 맞는것을 봐야 기분이 좋겠쬬. (웹 페이지 공부하면서 매일 보는 싸이트입니다. 다양한 페이지 UI가 있어서 공부하기엔 좋은거 같습니다. 근데 정말 작게 나오죠?!) 그럼 이제 viewport 적용 방법을 보시겠습니다. 아주~~ 간단합니다. 태그 아래에 다음과 같이 써주면 .. jQTouch 혹시 한글이 안된다면! -0- 자꾸 원본에서 euc-kr 로 고쳐도 아무리해도 되질 않는다... jsp 파일 가장 상단에 다음과 문구만 넣어주면 끝...-_-(기존에 jsp 만들던 대로 만들면 되는거였어..ㅜㅡㅜ ) -0-제길...하루를..날렷어..ㅋㅋㅋ 어쨌든 성공! jQTouch media Queries CSS3 Media Queries View more presentations from Russ Weakley. 다른곳을 아무리 둘러봐도 위에처럼 설명 잘해놓은곳이 없네. 간단히 말해 media queries 는 화면의 비율을 기준으로 어떤 화면의 스타일을 결정할수 있다. 모바일상에서는 이렇게~ 컴퓨터 상에서는 저렇게 화면을 구성할수 있는것이다. 간단하게 기기 별로 화면이 변하는 것을 만들어 보았다. 먼저 jsp test test test test 태그를 보면은 두개의 css를 참조하고 있다. 차이점은 해당하는 기기와 싸이즈이다. 위의 MQtest1.css는 일반 아이팟,아이폰 싸이즈에서 반응하도록 싸이즈 조정을 했다. (max-device-width 요것만으로도 아이팟,아이폰에서 작동하도록 되어 있다.).. jQTouch 화면전환 애니메이션. 사실 가장 필요한 기능이였는데..정말 쉽게 구현이 된다. 개념상으론 구조가 html5와 비슷하고, 태그만으로 애니메이션 효과를 연출하기 때문에 정말 초보자라도, jquery를 몰라도 구현이 가능하다.(실제로 내가 jquery를 모르기때문에 -0- ) 내가 가장 필요로 했던 애니메이션효과인 Filp 효과와 Slide 효과만을 집어 넣어봤다. 전체 소스 View Change Slide Flip Second Page Back Back - 위의 소스대로 하면 당연히 않된다. 각자의 프로젝트에서 jqtouch의 라이블러리 경로가 다르기 때문인다. script src="" , import 부분의 경로를 자신의 프로젝트에 맞게 고쳐서 쓰기 바란다. jqtouch -_-신기한 UI세계로~ 설정부터~ 오......그냥 앱웹을 검색하다가 결국 jqtouch 까지 오게되었다. 스크립트도 사용할줄 모르는 놈에게 jquery 라니...-0- 험난한 길이 뻔히 보인다. 먼저 설정부터 시작! 1. css,js 파일이 있는 패키지를 다운 받는다! 링크 : http://www.jqtouch.com/ 2. 압축을 풀면 폴더가 생기는데 그 폴더안에 필요한 파일이 다 들어가 있다. 우선 폴더 이름을 깔끔하게 jqtouch 로 하고 해당하는 이클립스에 복사해 두었다. (폴더 jqtouch 가 보인다!) 3. 이제 스크립트 소스 링크만 해주면 맘껏 사용해줄수 있다. jQTouchTest 삼성 애플 닭공장 구글 (혹시 폴더 이름이 다르게 되어 있다면 src 부분을 고쳐서 쓰면 된다.) 4. 마지막! 실행화면! 링크 : htt.. 이전 1 다음
