mobileinit 이벤트가 triggering 되는 시기 알아보기

2012. 9. 29. 04:35 | Posted by 솔웅

자바스크립트로 jQuery Mobile file을 include 하면 in it 이 실행 됩니다. 그리고 $.mobile object 가 생성되죠. $.mobile object 는 이전 글에서 보셨듯이 method들과 프로퍼티들을 가지고 있습니다. 그리고 다양한 객체들에 디폴트 값들이 할당되게 되죠. 예를 들어

The text on the Back button.
The CSS theme associated with this button ("a" to "e").
The icon displayed by default in the selection lists (ie set to arrow-d by default).
Etc..

이 옵션들에 대한 디폴트 값들은 바꿀 수 있습니다. 그런데 아무때나 바꿀 수 있는 것은 아니고 처음 시작될 때 특정 기간 안에 바꾸도록 해야 합니다. 그 기간을 놓쳐 버리면 그 디폴트 값들을 바꿀 수 있는 시간을 놓쳐 버리게 됩니다. 그 한정된 기간은 document object에 의해 mobileinit 이벤트가 reveived 될 때 시작합니다. 그러니까 우리는 이 이벤트의 treatment 내에 jQuery Mobile configuration option들의 디폴트 값을 바꿀 수가 있ㅅ브니다. 이 configuration option들에 대해서는 다음 글에서 다루겠습니다.

Let's see how to handle the mobileinit event:

그럼 어떻게 이 mobileinit 이벤트를 다루는지 볼까요?

Processing mobileinit event

<!DOCTYPE html> 

<html> 

<head> 

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

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script>

    $(document).bind ("mobileinit", function ()

    {

      alert ("mobileinit");

    });

  </script>  

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content </p>

  </div>

</div>

</body>

</html>

<script>

$(document).ready (function ()

{

  alert ("DOM ready");

});

</script>

mobileinit 이벤트를 핸들링하는 코드 블럭의 위치를 잘 보세요. 이 코드는 반드시 jQuery Mobile Javascript 소스 (jquery.mobile-1.1.1.min.js, jquery.mobile.js ...) 를 넣기 전에 있어야 합니다. 만약 이 소스 다음에 mobileinit을 넣으면 jQuery Mobile은 mobileinit을 trigger는 하지만 그 코드를 위치한 그곳에서 그 trigger 가 일어나지 않습니다.

즉 위 코드에서 보면 alert 가 일어나지 않게 됩니다.

convention02.html

위 파일을 실행시켜 보면 mobileinit alert 가 먼저 뜨고 그 다음에 DOM ready alert 가 뜰 겁니다. 즉 mobileinit 이벤트가 먼저 실행 되고 나서 DOM 이 준비 된다는 얘기죠.

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

컴포넌트 생성 여부 체크하는 방법 (0)	2012.10.03
나만의 jQuery Mobile 컴포넌트 만들기 (0)	2012.10.02
Virtual Events 알아보기 (0)	2012.09.30
네임 스페이스 사용하기 (0)	2012.09.30
Configuration Options (0)	2012.09.29
Property 들 출력하기 (JQM + Javascript Programming) (0)	2012.09.27
JQuery Mobile - Layout Grid (Columns) (0)	2012.08.22
JQuery Mobile - Basic HTML Styles (0)	2012.08.14
JQuery Mobile - Theming buttons (0)	2012.08.14
JQuery Mobile -Grouped buttons (0)	2012.08.14

jQuery Mobile/JQM Tutorial

Property 들 출력하기 (JQM + Javascript Programming)

2012. 9. 27. 02:27 | Posted by 솔웅

$.mobile object

오늘은 단순히 JQM을만이 아니라 Javascript로 동적으로 프로그래밍 하는 부분을 간단히 공부해 보겠습니다.

우선 기본 <html> 소스부터 봅니다.

<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<style type=text/css>
    p {
      font-style : italic;
      margin-bottom : 0px;
      text-align : center;
      text-transform : uppercase;
    }
</style>
</head>

<body>
<div data-role=page id=home>
<div data-role=header>
    <h1>Home</h1>
</div>
<div data-role=content>
</div>
</div>
</body>

</html>

보면 헤더에 Home 이라는 글자가 있고 content는 있는데 그 안에는 아무런 내용이 없죠.

그리고 body 안에 보면 <p> 태그는 하나도 없는데 위에 <p> 태그에 적용되는 스타일링이 정의 돼 있습니다.

딱 보면 content 부분에 뭘 넣을 건데 거기에 <p> 태그가 들어가나 보네요.

하여간 위의 소스로 html을 만들어서 실행시키면 아래 화면을 보실 수 있습니다.

그럼 이제 자바 스크립트 부분을 볼까요?

이 JavaScript 는 </html> 다음에 붙여 넣습니다.

불까요? 변수 $content에 data-role=content를 넣었습니다.

그리고 obj라는 변수에는 $.mobile; JQM 함수를 넣었습니다.

그 다음을 보면 $content 에 문자를 append 하죠?

즉 data-role=content에 문자를 append 하는 겁니다.

그리고 $.mobile 에 있는 prop 들을 화면에 출력하는 for 문이 있습니다.

그 다음에는 $content에 Methods 라는 문자를 추가 합니다.

그리고 $.mobile에 있는 메소드들을 출력합니다.

그러면 아래와 같은 화면을 보실 수 있을 겁니다.

화면에 보시는 것들이 바로 $.mobile object에 세팅돼 있는 프로퍼티들 입니다.

저 프로퍼티들과 메소드들을 다 알 필요는 없지만 그래도 자주 쓰이는 것들은 눈에 익어야 될 텐데요.

꾸준히 그리고 많이 Practice를 하는 방법밖에는 없겠죠?

convention01.html

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

나만의 jQuery Mobile 컴포넌트 만들기 (0)	2012.10.02
Virtual Events 알아보기 (0)	2012.09.30
네임 스페이스 사용하기 (0)	2012.09.30
Configuration Options (0)	2012.09.29
mobileinit 이벤트가 triggering 되는 시기 알아보기 (0)	2012.09.29
JQuery Mobile - Layout Grid (Columns) (0)	2012.08.22
JQuery Mobile - Basic HTML Styles (0)	2012.08.14
JQuery Mobile - Theming buttons (0)	2012.08.14
JQuery Mobile -Grouped buttons (0)	2012.08.14
JQuery Mobile - inline buttons (0)	2012.08.13

jQuery Mobile/jQuery API

.clone() 메소드 알아보기

2012. 8. 23. 21:25 | Posted by 솔웅

.clone()

.clone()은 말그대로 복제 해 놓는 겁니다.

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

이 코드를 가지고 아래 처럼 표현하면 

$('.hello').appendTo('.goodbye');

그 결과는 

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

이렇게 나올 겁니다.

hello 클래스를 goodbye 클래서 다음에 appendTo 했으니까요.
그런데 Hello를 그대로 유지하면서 goodbye 클래스 다음에 hello 클래스를 다시 넣고 싶을 

때 clone()을 쓰시면 됩니다.

$('.hello').clone().appendTo('.goodbye');

이렇게 하면 .hello 클래스의 복제를 만들어서 goodbye 클래스의 뒤에 appendTo를 할 겁니다.
그 결과는 아래와 같겠죠.
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

이벤트 핸들러까지 clone 하고 싶으면 withDataAndEvents parameter를 사용하면 됩니다.

var $elem = $('#elem').data( "arr": [ 1 ] ), // Original element with attached data
    $clone = $elem.clone( true )
    .data( "arr", $.extend( [], $elem.data("arr") ) ); // Deep copy to prevent data sharing

예제파일을 보죠.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
  <b>Hello</b><p>, how are you?</p>

<script>
  $("b").clone().prependTo("p");
</script>

</body>
</html>

b 태그에 있는 내용을 복제해서 p 태그에 붙입니다.

그러면

Hello

Hello, how are you?

이렇게 나옵니다. Hello 가 앞에 나온건 appendTo가 아니라 prependTo를 했기 때문이죠.

<!DOCTYPE html>
<html>
<head>
  <style>
  #orig, #copy, #copy-correct {
    float: left;
    width: 20%;
  }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<div id="orig">
    <div class="elem"><a>1</a></div>
    <div class="elem"><a>2</a></div>
    <div class="elem"><a>3</a></div>
    <div class="elem"><a>4</a></div>
    <div class="elem"><a>5</a></div>
</div>
<div id="copy"></div>
<div id="copy-correct"></div>

<script>
// sort order is not guaranteed here and may vary with browser  
$('#copy').append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('foo - ')
          .parent()
          .clone()); 
 
// correct way to approach where order is maintained
$('#copy-correct')
          .append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('bar - ')
          .end()); 
</script>

</body>
</html>

두번째 예제의 스크립트 부분을 보면 id 가 copy 인 곳 (#copy)에 뭔가를 append 하네요.

바로 그 전에 있던 id 가 orig인 곳 내의 elem 클래스들인데요. 이것을 clone() 했습니다.

그리고 children()으로 그 안의 a 부분을 찾고 그 앞에 foo - 를 넣습니다.

그 다음 parent().clone()은 뭘까요. 그 parent 의 값을 받아서 clone을 하는 것 같습니다.

그러면 div 까지 clone 이 되서 줄 바꿈 효과까지 나오게 됩니다.

두번째는 id가 copy-correct 인 곳에 id가 orig인 것의 elem 클래스를 append 하는데요.

그것을 clone 하고 children 중에 a 를 찾은 다음에 앞에 bar - 를 붙이네요. 그리고 끝입니다.

.end()는 어떤 역할을 할까요. 위에 있었던 .parent().clone()이랑 같은 역할을 하는 것 같은데.

잠깐 봤더니 해당 부분에만 적용 된 효과를 전체 문서에 적용 되게끔 확장 해 주는 메소드인 것 같습니다. 나중에 따로 공부해 봐야 할 것 같습니다.

그 결과는 아래와 같습니다.

저작자표시 비영리 동일조건

'jQuery Mobile > jQuery API' 카테고리의 다른 글

우아하게 화면 scroll 하기 (0)	2012.12.20
.find() 메소드 알아보기 (0)	2012.08.23
.delegate() 메소드 알아보기 (0)	2012.08.23
jQuery API 몇개 훑어보기 .html(), .text(), .bind() (0)	2012.08.10
jQuery API .live() 공부하기 (2)	2012.08.09

jQuery Mobile/jQuery API

.find() 메소드 알아보기

2012. 8. 23. 19:38 | Posted by 솔웅

.find()

이 메소드는 DOM 안에 있는 엘리먼트를 찾는 메소드로서 .children() 메소드와 비슷합니다. 다른점은 .children() 메소드는 단지 single level down 만 한다고 하네요.

.find() 정리한 다음에 .children()도 정리해야 겠네요.

곧바로 예제부터 볼께요.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
  $("p").find("span").css('color','red');
</script>

</body>
</html>

스크립트를 보면 p 태그에서 span을 찾아서 css를 적용해서 색을 빨강으로 바꾸네요.

그러면 첫번쨰 Hello와 두번째 good 이 빨간색으로 바뀔겁니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    span { color: blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><span>Hello</span>, how are you?</p>
  <p>Me? I'm <span>good</span>.</p>
  <div>Did you <span>eat</span> yet?</div>
<script>
  var $spans = $('span');
  $("p").find( $spans ).css('color','red');
</script>

</body>
</html>

두번째 예제는 해당 엘리먼트를 변수에 담았네요. 그래서 p 태그내에 있는 span에 있는 내용이 빨간색으로 변합니다.

div 에 있는 span에는 적용이 안 될 겁니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { font-size:20px; width:200px; cursor:default; 
      color:blue; font-weight:bold; margin:0 10px; }
  .hilite { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>
  When the day is short
  find that which matters to you
  or stop believing
  </p>
<script>
  var newText = $("p").text().split(" ").join("</span> <span>");
  newText = "<span>" + newText + "</span>";

  $("p").html( newText )
    .find('span')
    .hover(function() { 
      $(this).addClass("hilite"); 
    },
      function() { $(this).removeClass("hilite"); 
    })
  .end()
    .find(":contains('t')")
    .css({"font-style":"italic", "font-weight":"bolder"});

</script>

</body>
</html>

세번째 예제는 좀 복잡하네요.

newText 변수에 어떤 내용을 담았는데요.

p 태그 안에있는 내용들을 한칸 띄어쓰기 된 부분을 기준으로 모두 나누고 각각 span 을 적용하는 겁니다. 그러면 각 단어별로 span 이 따로따로 적용이 되겠죠.

다음에는 p 태그 안에 html부분에 이 newText를 담은 다음에 span을 찾습니다.

거기에 마우스를 올리면 hilite 라는 클래스가 적용이 되도록 했네요. 마우스가 빠져나가면 그 클래스 적용이 해제되구요.

hilite 클래스는 jQuery에 미리 정해진 클래스 인가 봅니다. 배경을 노란색으로 hilite 해 주네요.

여기서 끝이 아니라 t 자가 들어가 있는 단어들을 찾아서 폰트 스타일을 이탤릭으로 바꾸고 또 볼드체로 바꿉니다.

좀 복잡하군요.

.find 가 다른 여러 메소드와 협동해서 이렇게 복잡한 일을 하네요.

저작자표시 비영리 동일조건

'jQuery Mobile > jQuery API' 카테고리의 다른 글

우아하게 화면 scroll 하기 (0)	2012.12.20
.clone() 메소드 알아보기 (0)	2012.08.23
.delegate() 메소드 알아보기 (0)	2012.08.23
jQuery API 몇개 훑어보기 .html(), .text(), .bind() (0)	2012.08.10
jQuery API .live() 공부하기 (2)	2012.08.09

jQuery Mobile/jQuery API

.delegate() 메소드 알아보기

2012. 8. 23. 10:58 | Posted by 솔웅

.delegate()

오늘 일하다가 눈에 띈 몇가지 jQuery API를 공부해 보겠습니다.

다른 사람이 만든 소스를 보다 보니까 .delegate() 메소드를 사용한게 있었는데요.

jQuery API에는 이 .delegate() 메소드는 1.4.3 버전에서 사용한 것이고 1.7 버전에서는 .on() 메소드를 사용하고 있다고 하네요.

그 신택스는 아래와 같네요.


$(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(elements).on(events, selector, data, handler);        // jQuery 1.7+


약간 바뀌었죠.
$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
});

위 소스코드는 1.7 버전에서 아래와 같이 사용할 수 있다고 합니다.

$("table").on("click", "td", function() {
  $(this).toggleClass("chosen");
});

그럼 곧바로 예제를 보죠.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer; 
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Click me!</p>

  <span></span>
<script>
    $("body").delegate("p", "click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });
</script>

</body>
</html>

스크립트 부분을 보면 <body> 내에서 p 태그안에 있는 콘텐츠를 클릭하면 그 p 태그 다음에 <p> Another paragraph!</p> 를 추가하는 겁니다.

두번째 샘플을 보죠

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; }
  span { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Has an attached custom event.</p>
  <button>Trigger custom event</button>
  <span style="display:none;"></span>
<script>

    $("body").delegate("p", "myCustomEvent", function(e, myName, myValue){
      $(this).text("Hi there!");
      $("span").stop().css("opacity", 1)
               .text("myName = " + myName)
               .fadeIn(30).fadeOut(1000);
    });
    $("button").click(function () {
      $("p").trigger("myCustomEvent");
    });

</script>

</body>
</html>

스크립트를 해석해 보자면.

먼저 밑에 button 부분을 봐야 겠네요.

버튼이 클릭되면 myCustomEvent 가 trigger 되네요.

그 다음에 delegate 부분을 봐야 되는데요.

이 myCustomEvent가 trigger 되면 p 태그 부분을 Hi there! 로 고치고 span 부분에 myName = myName 을 표시하는데 잠깐 나타났다가 서서히 사라지는 효과가 나타납니다.

저작자표시 비영리 동일조건

'jQuery Mobile > jQuery API' 카테고리의 다른 글

우아하게 화면 scroll 하기 (0)	2012.12.20
.clone() 메소드 알아보기 (0)	2012.08.23
.find() 메소드 알아보기 (0)	2012.08.23
jQuery API 몇개 훑어보기 .html(), .text(), .bind() (0)	2012.08.10
jQuery API .live() 공부하기 (2)	2012.08.09

jQuery Mobile/JQM Tutorial

JQuery Mobile - Layout Grid (Columns)

2012. 8. 22. 21:16 | Posted by 솔웅

Layout Grid

여러 컬럼을 가진 레이아웃을 사용하는 것은 모바일 기기쪽에서는 별로 권장되지 않는 방법입니다. 화면 크기가 작기 때문이죠. 하지만 작은 것들을 차례대로 좌우로 표시해야 될 때가 있습니다. (버튼이나 탭같은...)

jQuery Mobile framework은 CSS-based 컬럼들을 만드는 간단한 방법을 제공하고 있습니다. ui-grid 클래스를 call 하면 block 스타일 컬럼을 만들 수있습니다.

two-column (using the ui-grid-a class)
three-column (using the ui-grid-b class)
four-column (using the ui-grid-c class)
five-column (using the ui-grid-d class)

Grid는 100% width 에다 border나 배경이 없어서 보이지 않습니다. 그리고 padding이나 margin도 없죠. 그래서 그 안에 어떤 style과 함께 서로 간섭할 수가 없습니다.

Grid 콘테이너에는 ui-block-a/b/c/d/e 라는 child element들이 할당됩니다. 각 block element들을 side-by-side로 정렬하도록 만드는 거죠. ui-block-a 는 새로운 줄을 시작할 때 사용할 수 있습니다.

Two column grids

2개의 컬럼이 있는 레이아웃을 만드려면 ui-grid-a 클래스를 div에 넣습니다. 그리고 그 안에 두개의 child 콘테이너를 넣는데요. ui-block-a 는 첫번째 컬럼이 되고 ui-block-b 는 두번째 컬럼이 됩니다.

<div class="ui-grid-a">
	<div class="ui-block-a"><strong>I'm Block A</strong> 
        and text inside will wrap</div>
	<div class="ui-block-b"><strong>I'm Block B</strong> 
        and text inside will wrap</div>
</div><!-- /grid-a -->

위 예제를 실행하면 아래처럼 보일 겁니다.

I'm Block A and text inside will wrap. I'm Block B and text inside will wrap.

위에서 보듯이 grid block은 디폴트로 아무런 visual styling이 없습니다. 단지 그 내용을 side-by-side로 보여 줄 뿐입니다.

Grid 클래스는 어떤 컨테이너에든지 apply 될 수 있습니다. 다음 예제에서는 ui-grid-a 를 fieldset에 넣을 겁니다. 그리고 두개의 버튼의 컨테이너 안에 각각 ui-block classes 를 넣을 거구요. 이 두개의 버튼들은 나란히 화면의 50%를 차지하게 될 겁니다.


<fieldset class="ui-grid-a">
	<div class="ui-block-a"><button type="submit" data-theme="c">
                                Cancel</button></div>
	<div class="ui-block-b"><button type="submit" data-theme="b">
                                Submit</button></div>
</fieldset>

framework은 그리드 안에서 버튼들에 각각 왼쪽, 오른쪽 마진을 넣게 됩니다. 버튼이 한개라면 class ui-grid-solo 를 사용하고 버튼에 ui-block-a 를 추가하면 됩니다. 그러면 이 버튼은 위의 두 버튼과 동일한 마진을 갖게 될 겁니다. 아래처럼요.

<div class="ui-grid-a">
	<div class="ui-block-a"><button type="button" data-theme="c">
                                Previous</button></div>
	<div class="ui-block-b"><button type="button" data-theme="c">
                               Next</button></div>	   
</div>
<div class="ui-grid-solo">
	<div class="ui-block-a"><button type="v" data-theme="b">More</button></div>
</div>




 
grid를 포함해서 theme 클래스를 추가할 수도 있습니다. 아래에 우리는 두개의 
클래스를 추가했습니다. ui-bar클래스를 추가함으로서 default bar 패딩이 추가 됐고 ui-bar-e를 추가함으로서 
e 툴바 theme swatch에 background gradient와 폰트 스타일을 적용했습니다.
inline style="height:120px" attribute 도 각 grid에 추가해서 각 grid에 높이를 
주었습니다.




소스는 이 글 마지막에 올린 샘플 파일을 참조하세요.

Three-column grids

다른 grid 레이아웃은 parent에 class=ui-grid-b 를 사용해서 만들 수 있습니다. 이렇게 하면 3개의 child 콘테이너 element들을 만들게 됩니다. 3개의 child는 각각 ui-block-a/b/c class를 갖게 됩니다. 그러면 각각 33%의 width를 갖는 grid가 나타날 겁니다. Note: 샘플 파일에는 style을 적용했습니다. 그래서 각 grid를 구분해 놔서 눈으로 확인 하실 수 있으실 겁니다.

<div class="ui-grid-b">
	<div class="ui-block-a">Block A</div>
	<div class="ui-block-b">Block B</div>
	<div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->








각 grid 안에 버튼을 넣을 수도 있습니다. (샘플파일 참조)

Four-column grids

25/25/25/25% grid 로 4개의 컬럼을 만들 수있는데 이것은 parent에 class=ui-grid-c를 넣어서 만들 수 있습니다.

Five-column grids

20/20/20/20/20% 이렇게 5개의 컬럼은 class=ui-grid-d 로 만들 수 있습니다.

Multiple row grids

여러줄로 된 grid를 만들 수도 있습니다. 예를 들어 3개 컬럼 grid를 container에 지정하고 (ui-grid-b) 그 안에 9개의 child block이 있다고 생각해 봅시다. 그러면 각 블럭들이 3줄로 표시 될 겁니다. 한 줄을 끝내고 다른 줄을 시작하기 위해 CSS 룰을 따라야 합니다. class=ui-block-a 는 새로운 줄을 시작하는 신호가 될 겁니다. (a, b, c, a, b, c, etc.) 이렇게 반복하면 여러줄을 만들 수 있습니다.

자세한 것은 샘플 파일을 참조하세요.

Grids in toolbars

Grid는 툴바에 layout을 만드는데 유용하게 활용할 수 있습니다. 아래는 footer에 4개의 컬럼을 가진 grid를 넣어서 활용한 예입니다. 소스는 샘플파일을 참조하세요.






layoutGrid.html

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Virtual Events 알아보기 (0)	2012.09.30
네임 스페이스 사용하기 (0)	2012.09.30
Configuration Options (0)	2012.09.29
mobileinit 이벤트가 triggering 되는 시기 알아보기 (0)	2012.09.29
Property 들 출력하기 (JQM + Javascript Programming) (0)	2012.09.27
JQuery Mobile - Basic HTML Styles (0)	2012.08.14
JQuery Mobile - Theming buttons (0)	2012.08.14
JQuery Mobile -Grouped buttons (0)	2012.08.14
JQuery Mobile - inline buttons (0)	2012.08.13
JQuery Mobile - Button Icons (0)	2012.08.13

jQuery Mobile/JQM Tutorial

JQuery Mobile - Basic HTML Styles

2012. 8. 14. 20:42 | Posted by 솔웅

HTML Formatting

jQuery Mobile에서 content를 styling 하는 기본 접근 방법은 아주 간단합니다. 손쉬운 방법을 사용하죠. 우리의 목표는 브라우저의 native rendering이 우선하도록 한다 입니다. 저희는 그냥 좀 더 읽기 편하도록 약간의 padding만 추가 합니다. 그리고 폰트 family와 색을 적용하기 위해 theming system를 사용합니다.

content styling을 하는 손쉬운 방법을 사용하면 디자이너나 개발자에게 아주 복잡한 style들을 분석하고 수정하도록 하는 대신 간단하고 깨끗한 clean slate를 제공하죠.

Default HTML markup styling

디폴트로 jQuery Mobile themes는 headers, paragraph content, block quotes, anchor links, standard ordered, unordered and definition lists, and tables 같은 표준 markup element들을 위한 스탠다드 HTML style과 size를 사용합니다. 아래에 그 예제들이 있습니다.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

이것들은 strong, emphasized 그리고 linked text를 가지고 있는 paragraph 입니다. 아래에 좀 더 많은 text 가 있습니다. 여러분들은 어떻게 HTML markup이 content내에서 역할을 하는지 보실 수 있을 겁니다.

How about some blockquote action with a cite

This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.

저희는 테이블과 fieldset들에 좀 더 가독성 있도록 하기 위해 몇개의 style들을 추가했습니다. 이것들은 또한 쉽게 customs style들에 의해 override 될 수 있습니다.

Unordered list item 1
Unordered list item 1
Unordered list item 1

Ordered list item 1
Ordered list item 1
Ordered list item 1


Definition term: I'm the definition text
Definition term: I'm the definition text

Travel Itinerary
Flight:	From:	To:
Total: 3 flights
JetBlue 983	Boston (BOS)	New York (JFK)
JetBlue 354	San Francisco (SFO)	Los Angeles (LAX)
JetBlue 465	New York (JFK)	Portland (PDX)

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

네임 스페이스 사용하기 (0)	2012.09.30
Configuration Options (0)	2012.09.29
mobileinit 이벤트가 triggering 되는 시기 알아보기 (0)	2012.09.29
Property 들 출력하기 (JQM + Javascript Programming) (0)	2012.09.27
JQuery Mobile - Layout Grid (Columns) (0)	2012.08.22
JQuery Mobile - Theming buttons (0)	2012.08.14
JQuery Mobile -Grouped buttons (0)	2012.08.14
JQuery Mobile - inline buttons (0)	2012.08.13
JQuery Mobile - Button Icons (0)	2012.08.13
JQuery Mobile - Button basics 02 (Options, Methods, Events) (0)	2012.08.11

jQuery Mobile/JQM Tutorial

JQuery Mobile - Theming buttons

2012. 8. 14. 05:39 | Posted by 솔웅

Theming buttons

jQuery Mobile은 아주 훌륭한 theming system 을 가지고 있습니다. 이 시스템을 이용하면 어떻게 버튼을 style 할 지 정한 후 쉽게 그것을 구현할 수 있도록 도와줍니다.

container에 link가 add 되면 버튼 안의 텍스트 색은 자동적으로 그 버튼 bar나 content box의 색에 따라 시각적으로 구별될 수 있는 색으로 할당 됩니다. 버튼이 theme a 가 적용된 container에 위치되게 되면 버튼의 색은 자동적으로 theme a 가 됩니다.

Assigning theme swatches

버튼 markup에 data-theme attribute를 추가하면 원하는 button color swatch를 적용할 수 있습니다.

			
<a href="index.html" data-role="button" data-theme="a">Swatch a</a>

아래에 data-theme attribute를 통해 assign된 여러 버튼이 있습니다.

Theme variations

Swatch "a" on container with themed buttons inside

ButtonThemes.html

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Configuration Options (0)	2012.09.29
mobileinit 이벤트가 triggering 되는 시기 알아보기 (0)	2012.09.29
Property 들 출력하기 (JQM + Javascript Programming) (0)	2012.09.27
JQuery Mobile - Layout Grid (Columns) (0)	2012.08.22
JQuery Mobile - Basic HTML Styles (0)	2012.08.14
JQuery Mobile -Grouped buttons (0)	2012.08.14
JQuery Mobile - inline buttons (0)	2012.08.13
JQuery Mobile - Button Icons (0)	2012.08.13
JQuery Mobile - Button basics 02 (Options, Methods, Events) (0)	2012.08.11
JQuery Mobile - Button basics 01 (0)	2012.08.11

jQuery Mobile/JQM Tutorial

JQuery Mobile -Grouped buttons

2012. 8. 14. 05:17 | Posted by 솔웅

Grouped buttons

가끔 몇개의 버튼을 시각적으로 그룹화 해서 한 block 에 넣어야 할 때가 있습니다.

이런 효과를 주기 위해서는 그 버튼들의 set를 container에 wrap 하시면 되고 방법은 data-role="controlgroup" attribute를 이용하시면 됩니다. 그러면 framework는 vertical 버튼 그룹을 생성할 겁니다.

그리고 버튼들 사이의 margin이나 그림자 효과 같은 것을 없애게 되고 첫번째와 마지막 버튼에만 round 효과를 줍니다. 그러면 하나의 그룹안에 있는 버튼들이라는 시각적인 효과를 주게 되죠.

<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>

디폴트로 그룹화된 버튼들은 vertical list로 보여 집니다.

data-type="horizontal" attribute를 controlgroup container에 추가하면 버튼들이 한 줄에 나란히 놓여지면서 그룹화 되는 horizontal-style group을 만들 수 있습니다. 버튼의 크기는 안의 텍스트 크기에 맞게 설정 됩니다. (버튼의 수가 너무 많거나 텍스트가 아주 길 경우 여러 줄로 표시 될 수도 있습니다.)

GroupedButtons.html

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

mobileinit 이벤트가 triggering 되는 시기 알아보기 (0)	2012.09.29
Property 들 출력하기 (JQM + Javascript Programming) (0)	2012.09.27
JQuery Mobile - Layout Grid (Columns) (0)	2012.08.22
JQuery Mobile - Basic HTML Styles (0)	2012.08.14
JQuery Mobile - Theming buttons (0)	2012.08.14
JQuery Mobile - inline buttons (0)	2012.08.13
JQuery Mobile - Button Icons (0)	2012.08.13
JQuery Mobile - Button basics 02 (Options, Methods, Events) (0)	2012.08.11
JQuery Mobile - Button basics 01 (0)	2012.08.11
JQuery Mobile - Theming Toolbars (0)	2012.08.07

jQuery Mobile/JQM Tutorial

JQuery Mobile - inline buttons

2012. 8. 13. 20:50 | Posted by 솔웅

Inline buttons

디폴트로 body 내에 있는 모든 버튼들은 block-level element 로 스타일 돼 있습니다. 그래서 전체 화면 width를 꽉 채우게 되죠.

그런데 버튼 안의 텍스트 만큼만 버튼 크기를 만들고 싶을 때가 있습니다. 그럴 경우 버튼에 data-inline="true" attribute를 추가해 주시면 해결하실 수 있습니다.

좌우로 이어지는 여러개의 버튼이 있으면 data-inline="true" attribute를 각각의 버튼에 모두 추가하세요. 그렇게 하면 버튼크기는 버튼 안의 텍스트 크기만큼 정해 질겁니다. 그리고 버튼들이 같은 줄에서 좌우로 정렬 될 겁니다.

<a href="index.html" data-role="button" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>

결과는 아래와 같습니다.

inline 버튼에 data-mini="true" 를 추가하면 좀 더 compact 한 버전의 버튼이 생성됩니다.

만약 버튼이 한줄에 나란히 표시 되면서도 width를 screen 크기만큼 차지하도록 하고 싶다면 content column grids를 사용해서 화면의 컬럼을 2개 또는 3개 만드신 후 일반적인 full-width 버튼을 사용하시면 됩니다.

Icon example

inline 버튼에 icon이 추가되면 그 버튼은 그 아이콘 크기만큼 사이즈가 조금 더 커질 겁니다.

mini 버전도 같습니다.

inlineButtons.html

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Property 들 출력하기 (JQM + Javascript Programming) (0)	2012.09.27
JQuery Mobile - Layout Grid (Columns) (0)	2012.08.22
JQuery Mobile - Basic HTML Styles (0)	2012.08.14
JQuery Mobile - Theming buttons (0)	2012.08.14
JQuery Mobile -Grouped buttons (0)	2012.08.14
JQuery Mobile - Button Icons (0)	2012.08.13
JQuery Mobile - Button basics 02 (Options, Methods, Events) (0)	2012.08.11
JQuery Mobile - Button basics 01 (0)	2012.08.11
JQuery Mobile - Theming Toolbars (0)	2012.08.07
JQuery Mobile - Persistence Toolbars (0)	2012.07.29

공지사항

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

'jQuery Mobile'에 해당되는 글 161건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

'jQuery Mobile > jQuery API' 카테고리의 다른 글

'jQuery Mobile > jQuery API' 카테고리의 다른 글

'jQuery Mobile > jQuery API' 카테고리의 다른 글

Two column grids

Three-column grids

Four-column grids

Five-column grids

Multiple row grids

Grids in toolbars

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Default HTML markup styling

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Assigning theme swatches

Theme variations

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Icon example

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

티스토리툴바