태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

jQuery Mobile에서 유용한 코드 10가지

7년 전

1. 리스트 아이템이나 버튼에서 텍스트가 잘리지 않게 하기.

리스트 아이템이나 버튼의 텍스트가 길 경우에는 jQuery Mobile에 의해 자동으로 잘리게 된다.
이를 방지하기 위해서는 "white-space:normal;"을 CSS에 추가하면 된다.

버튼을 위한 예제는 아래와 같다.

.ui-btn-text {
white-space: normal;
}

리스트를 위한 예제는 아래와 같다.

.ui-li-desc {
white-space: normal;
}

다시 원래 설정으로 되돌리기 원할경우에는, "white-space:nowrap;"으로 설정하면 된다.

2. 페이지 로드시에 배경이미지를 랜덤하게 보여주기.

jQuery Mobile은 페이지 로드시에 다양한 초기화 방식을 가지고 있다.
아래의 CSS + Javascript는 페이지가 로드될 때마다 매번 랜덤한 이미지를 보여줄 것이다.

CSS

.my-page  { background: transparent url(../images/bg.jpg) 0 0 no-repeat; }
.my-page.bg1 { background: transparent url(../images/bg-1.jpg) 0 0 no-repeat; }
.my-page.bg2 { background: transparent url(../images/bg-2.jpg) 0 0 no-repeat; }
.my-page.bg3 { background: transparent url(../images/bg-3.jpg) 0 0 no-repeat; }

Javascript

$('.my-page').live("pagecreate", function() {
     var randombg = Math.floor(Math.random()*4); // 0 to 3
    $('.my-page').removeClass().addClass('bg' + randombg);
});

3. 버튼 액션 비활성화하기.

아래의 자바스크립트를 추가하라.

$('#home-button').button("disable");

다시 활성화하기 위해서는 아래와 같이 하면 된다.

$('#home-button').button("enable");

4. Loading... 팝업 메시지 비활성화하기.

아래의 자바스크립트를 추가하라.

$.mobile.pageLoading(true);

다시 활성화하기 위해서는 아래와 같이 하면 된다.

$.mobile.pageLoading();

5. 사용자 정의 테마 만들기.

jQuery Mobile은 5가지의 테마를 제공한다. - 테마 A, B, C, D, E
그러나 새로운 테마를 쉽게 만들수도 있다.

테마를 만들기 위한 단계 :

1. jQuery Mobile의 css 파일에서 하나의 테마를 복사하여 당신의 css 파일에 붙여넣기하라.

알파2 버전인 jquery.mobile-1.0a2.css를 예로 들면 아래의 내용을 복사하면 된다.

/* theme bar,body,btn containers
----------------------------------*/
.ui-bar-a {  border: 1px solid #2A2A2A; background: #111111; color: #fff; font-weight: bold; text-shadow: 0 -1px 1px #000; background-image: -moz-linear-gradient(top, #3c3c3c, #111111); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3c3c3c),color-stop(1, #111111));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; }
.ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button { font-family: Helvetica, Arial, sans-serif; }
.ui-bar-a .ui-link-inherit { color: #fff; }
.ui-bar-a .ui-link { color: #7cc4e7; font-weight: bold; }

.ui-body-a {  border: 1px solid #2A2A2A; background: #222222; color: #fff;  text-shadow: 0 1px 0 #000; font-weight: normal; background-image: -moz-linear-gradient(top, #666666, #222222); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #666666),color-stop(1, #222222)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#222222)')"; }
.ui-body-a, .ui-body-a input, .ui-body-a select, .ui-body-a textarea, .ui-body-a button { font-family: Helvetica, Arial, sans-serif; }
.ui-body-a .ui-link-inherit { color: #fff; }
.ui-body-a .ui-link { color: #2489CE; font-weight: bold; }
.ui-br { border-bottom: 1px solid rgba(130,130,130,.3); }

.ui-btn-up-a { border: 1px solid #222; background: #333333; font-weight: bold; color: #fff; cursor: pointer;  text-shadow: 0 -1px 1px #000; text-decoration: none; background-image: -moz-linear-gradient(top, #555555, #333333); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #555555),color-stop(1, #333333));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#333333')"; }
.ui-btn-up-a a.ui-link-inherit { color: #fff; }
.ui-btn-hover-a { border: 1px solid #000; background: #444444; font-weight: bold; color: #fff;  text-shadow: 0 -1px 1px #000; text-decoration: none; background-image: -moz-linear-gradient(top, #666666, #444444); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #666666),color-stop(1, #444444));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#444444')";   }
.ui-btn-hover-a a.ui-link-inherit { color: #fff; }
.ui-btn-down-a { border: 1px solid #000; background: #3d3d3d; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #000; background-image: -moz-linear-gradient(top, #333333, #5a5a5a); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333333),color-stop(1, #5a5a5a));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#5a5a5a')"; }
.ui-btn-down-a a.ui-link-inherit { color: #fff; }
.ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a { font-family: Helvetica, Arial, sans-serif; }

2. 테마의 이름을 변경하라. 이름은 a부터 z사이에서 원하는 이름으로 정하면 된다.

3. 색상 및 스타일을 입맞에 맞게 변경하라.

4. 만약 당신의 테마의 이름을 z로 지정하였다면, 아래와 같이 페이지에 적용하라.

<div data-role="page" data-theme="z">

6. 사용자 정의 폰트 사용하기.

jQuery Mobile을 이용하여 웹앱을 만들 때 cufon, sIRF, FLIR, @font-face와 같은 폰트를 변경하기 위한 방법들이 있다.
이 중에서 가장 쉽고 성능이 좋은 방법은 @font-face를 이용하여 방법이다.

@font-face를 이용하기 위해서는 eot와 ttf 두 개의 폰트 파일이 필요하다.
eot는 익스플로러를 위해, ttf는 나머지 브라우저를 위해 필요하며, 익스플로러를 위해 반드시 eot가 먼저 선언되어야 한다.
(도대체 왜 익스플로러는 eot라는 독자적인 포맷을 사용하는가?? 하여간 ms는 맘에 안듦!!)

폰트 다운로드 사이트(영어) : http://www.fontsquirrel.com/fontface

폰트를 가지고 있다면 아래와 같이 css 를 적용하면 된다.

@font-face {
font-family: 'blok-regular';
src: url('type/Blokletters-Potlood.eot');
src: local('Blokletters Potlood Potlood'),
local('Blokletters-Potlood'),
url('type/Blokletters-Potlood.ttf') format('truetype');
}

@font-face {
font-family: 'blok-italic';
src: url('type/Blokletters-Balpen.eot');
src: local('Blokletters Balpen Balpen'),
local('Blokletters-Balpen'),
url('type/Blokletters-Balpen.ttf') format('truetype');
}

@font-face {
font-family: 'blok-heavy';
src: url('type/Blokletters-Viltstift.eot');
src: local('Blokletters Viltstift Viltstift'),
local('Blokletters-Viltstift'),
url('type/Blokletters-Viltstift.ttf') format('truetype');
}

h1 { font-family: blok-heavy, helvetica, arial; }

7. 텍스트 없이 이미지로만 버튼 만들기.

data-iconpos 속성을 "notext"로 설정하라.

<a href="../index.html" data-icon="grid"
class="ui-btn-right" data-iconpos="notext">Home</a>

8. AJAX를 이용한 페이지 트랜지션없이 링크 열기.

rel 속성을 "external"로 설정하라.

<a href="../index.html" data-icon="grid"
class="ui-btn-right" rel="external">Home</a>

9. 리스트 아이템에서 화살표 제거하기.

data-icon 속성을 "false"로 설정하라.

<li data-icon="false"><a href="contact.html">Contact Us</a></li>

10. 페이지의 배경 색상 설정하기.

jQuery Mobile에서 배경 색상을 지정하기 위해서는 <body>태그가 아닌 페이지를 나타내는 <div>태그의 클래스에 지정해야 한다.

.ui-page {
background: #eee;
}