IT 관련/Html5

JQTouch 활용2

과정에서 오는 행복 2011. 10. 15. 13:31
[바탕화면에 바로가기 아이콘을 변경해 보자]

----------------------------------------------------------------------------------------------------------------------------

<link type="text/css" rel="stylesheet" media="screen"

href="../../senchalabs/jqtouch/jqtouch.css">

<link type="text/css" rel="stylesheet" media="screen"

href="../../senchalabs/themes/jqt/theme.css">

<script type="text/javascript"

src="../../senchalabs/jqtouch/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../../senchalabs/jqtouch/jqtouch.js"></script>


<script type="text/javascript">

var jQT = $.jQTouch({

    icon: 'ya.jpg',

    statusBar: 'black',

    startupScreen:'39.jpg'

});

$(function(){

    // Custom Javascript (onReady)

});

----------------------------------------------------------------------------------------------------------------------------

이부분의 icon부분 여기에 이미지를 변경하면 된다. 
icon : ya.jpg

ya.jpg는 요즘 대세인 소녀시대의 윤아 

startupScreen : 39.jpg는 화면 로딩 전에 미리 보여지는 이미지이다. 
순식간에 지나가서 화면 캡쳐는 못했음

주의 시작시에 보여질 이미지(39.jpg)는 반드시 320  X 460 을 지원해야 한다.  
(아이폰 화면 사이즈는 320 X 480 에서 세로 20px을 뺀다) 


좀 복잡할 수 있으나
JQTouch가 아닌 JQuery로만 작성을 하면 다음과 같다  

------------------------------------------------  <JQuery> -----------------------------------------------------------

<meta name='viewport' content='user-scalable=no, width=device-width' />

<meta name='apple-mobile-web-app-capable' content='yes' /> 

<meta name='apple-mobile-web-app-status-bar-style' content='black' />  

<link rel='apple-touch-icon-precomposed' href='ya.jpg' />

<link rel='apple-touch-startup-image' href='39.jpg' />


<script type="text/javascript" src='../../senchalabs/jqtouch/jquery-1.4.2.min.js'>
----------------------------------------------------------------------------------------------------------------------------
 

코딩 완료 후,  Add at Home (바탕화면에 바로가기)를 만들면 아래와 같다




자 보이는가? 윤아 아이콘이 생성이 되는걸

왼쪽이 JQTouch로 만든 아이콘 (아이폰의 고유 아이콘 처럼 반투명 효과가 적용된다.)
오른쪽이 JQuery를 사용하여 나온 아이콘
 




반응형

'IT 관련 > Html5' 카테고리의 다른 글

웹사이트 소스 가져오기 (JSON, Ajax)  (0) 2011.10.28
JSon을 이용한 플리커 이미지 가져오기  (0) 2011.10.28
JQTouch 활용  (0) 2011.10.14
JQuery 활용  (0) 2011.10.13
JQuery에 대하여  (0) 2011.10.13