오늘은 여러분과 같이 Lua 에서 module들은 정확히 어떻게 작동을 하는지에 대해 몇가지 실습을 해 보고 설명도 덧 붙이겠습니다. 이 글을 읽으시면 모듈 내의 코드가 실행되거나 built-in require() function 을 call 했을 때 어떤 코드가 run 하지 않는지 등에 대해 이해 하실 수 있을 겁니다.

Including External Modules

아래 정말 간단한 모듈이 있습니다. example1.lua 인데요. 터미널에 한 문장을 print 하고 빈 테이블을 return 하는 것입니다.

example1.lua

이제 main.lua를 볼까요? 여기서 우선 example1.lua를 require 합니다.

main.lua

예상한대로 ex1은 빈 테이블입니다. example1.lua에서 빈 테이블을 return 했으니까요. 그리고 “example1.lua has been loaded.” 라는 문장이 터미널에 쓰여질 겁니다. 그 다음에 위에 보면 ex1 테이블에 어떤 프로퍼티를 할당했습니다.

이 부분을 주목해 보세요. 여기 약간의 트릭이 있습니다. 다른 모듈에서 이 example1.lua를 require 해 봅시다. scene1.lua라는 모듈에서요. 이미 main.lua에서 example1.lua를 require 했었죠. 이제 어떤 일이 일어나는지 볼까요?

scene1.lua (previous main.lua still applies)

scene1.lua에서 example1.lua를 require 하면 “example1.lua has been loaded” 이 터미널에 뿌려지지 않습니다. 그리고  ex1.testvar 값을 print 하면 터미널에 “Hello World” 가 뿌려집니다. (이 의미는 뭐냐하면 testvar 프로퍼티가 존재한다는 것이죠.

여기서 뭘 알 수 있나요?

첫번쨰로 “example1.lua has been loaded” 라는 문장에 터미널에 뿌려지지 않은 이유는 그 모듈이 이미 main.lua에서 로드 됐기 때문이죠. 모듈이 한번 로드 되면 그 안의 코드가 다 실행되게 되죠. 그리고 모듈의 return 값은 package.loaded라고 하는 글로벌 테이블에 저장됩니다.

여러분이 require를 call 하면 첫번째로 이전에 이 모듈이 이미 로드 된 것인지 아닌지 확인하기 위해 package.loaded table 을 살펴 봅니다. 만약에 있으면 외부 모듈을 새로 require 하는 대신 package.loaded 에 저장된 return value를 return 합니다. 이 return 된 value는 copy가 아니라 reference 입니다. 그러니까 여러분의 모듈이 테이블을 return 한다면 미래에 같은 모듈에 대해 require를 call 하면 같은 테이블을 get 하게 될 겁니다.

만약에 package.loaded 안에 그 모듈이 없으면 그 모듈이 로드 될 겁니다. (그 모듈안의 코드들이 실행 되겠죠.) 그리고 그 모듈의 return value가 package.loaded table안에 저장될 겁니다. (미래에 사용하기 위해 저장하는 거겠죠.) 그래서 두번째에서는 “example1.lua has been loaded.” 이 터미널에 뿌려지지 않은 겁니다. require() 가 call 됐을 떄 global package.loaded table 안에 이미 그 모듈이 존재하면 그 모듈을 re-load 하지 않으니까요.

모듈 안에 있는 코드를 두번 실행하도록 하는 방법에는 두가지가 있습니다.

1. 코드를 모듈 내에서 함수 안에 넣고 그 함수를 부르는 경우
   
2. package.loaded table 에서 그 모듈을 remove 한 다음에 다시 require 하는 경우
   

첫번째 시나리오에 대한 예제입니다.

example2.lua

main.lua

scene1.lua

두번째 print statement는 hello() 함수 안에 있습니다. 이것은 hello() 함수가 call 될 때마다 실행되겠죠. 그 코드가 한번 이상 실행되기를 원한다면 함수를 table에 attach 해서 모듈 마지막 부분에서 return 되게 하세요. (또는 단지 require 만 했을 떄 print 되지 않도록 할 때도 그렇게 하면 되겠죠.)

Removing from package.loaded

그러면 example2.lua의 return value 가 package.loaded table 에 저장 될 겁니다.

package.loaded["example2"]

만약 example2.lua에 있는 코드가 다시 execute 될 필요가 있다면 package.loaded table 에서 remove 한 다음에 다시 call 하시면 됩니다.

아래 그 예제가 있습니다.

main.lua

This is Universal

스토리 보드의 scene들을 다룰 때 그 scene이 로드될 떄 스토리보드 리스너 함수안에 있는 코드들이 어떤 것은 실행되고 어떤 것은 실행되지 않는지에 대한것도 궁금하실 겁니다.

거기에 대한 것은 다음 기회에 다루도록 하겠습니다.

일하다가 동료가 처리할 데이터가 있는데 이 데이터를 어떻게 관리했으면 좋겠냐고 물어보더라구요.

XML 로 관리할지 JSON으로 관리 할지.....

저희 시스템은 PHP로 돼 있거든요.

그래서 일단은 JSON이 가장 가벼우니까 데이터를 파일로 관리하면 JSON으로 관리하는 법도 생각해 볼 수 있겠지만 데이터도 많지 않고 바뀌지도 않을 거고 그냥 a 가 1인 경우의 b 값을 화면에 출력만 하면 되니까 디비에 넣어서 관리하는게 제일 편하지 않을까 의견을 주었습니다.

다른 시스템간에 데이터를 인터페이스 할 것도 아니고....

하여간 그래도 그 얘기 듣고 PHP로 XML과 JSON을 처리하려면 어떻게 해야 하는지 그 구체적인 소스가 궁금해서 써핑 해 봤습니다.

* PHP 로 XML 다루기

이런 xml 데이터가 있을 때 php 코드는 아래와 같으면 됩니다.

먼저 file_get_contents 로 data.xml 파일에 있는 모든 내용을 긁어 옵니다.

그러면 $xml_string 변수에 배열로 그 내용들이 담길 겁니다.

그 다음에는 복잡하게 코딩할 필요 없이 그냥 simplexml_load_string() 메소드를 사용하시면 됩니다.

그 안의 내용을 처리하는 방법은 $xml-> 다음에 원하는 내용이 있는 태그를 사용하면 됩니다.

total 은 한번만 있으니까 곧바로 얻어오고 그 다음 item 은 계속 반복되는 태그이니까 배열불러오듯이 불러오면 됩니다.

아래 샘플 파일 올려놓겠습니다.

data.xml

xml.php

* PHP 로 JSON 다루기

아래 코드도 어디에선가 긁어 온 건데요.

for(){
  $str[] = array('code'=>$bbs_no,'table'=>$table_type);
}

----------------------
code[0]      table[0]
code[1]      table[1]
----------------------

이렇게 데이터들이 담길 겁니다.

$jsonStr = json_encode($str); // ******* Make Json from array ********
<input type="hidden" name="json_list" id="json_list" value=$jsonStr  /> // Send Form

유저로부터 데이터를 입력받아서 이것을 json으로 encode 한 겁니다.

그러면 이 json 값을 한꺼번에 form 테그에서 send 할 수가 있습니다.

그 다음 받는 파일에서는 아래와 같이 처리하면 됩니다.

간단하네요.

나중에 유용하게 사용될 수 있을 것 같습니다.

.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()이랑 같은 역할을 하는 것 같은데.

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

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

.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 가 다른 여러 메소드와 협동해서 이렇게 복잡한 일을 하네요.

.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 을 표시하는데 잠깐 나타났다가 서서히 사라지는 효과가 나타납니다.

오늘은 이 간단한 Storyboard API를 정말 간단하게 사용하고 싶은 분들에게 기본적인 스토리보드 사용법에 대해 안내를 할 까 합니다. 아마 Director Class 만큼이나 간단할 겁니다. 스토리보드에는 많은 유용한 기능이 있지만 이 기능들이 항상 사용되야만 하는 것은 아닙니다. 그러니까 처음부터 이 모든걸 다 이해할 필요는 없습니다.

이 튜토리얼은 스토리보드 API를 빠르고 쉽게 사용할 수 있는 기본적인 기능에 대해서 다루려고 합니다.

Setup

스토리보드 API는 대부분의 다른 3rd party scene management libraries 하고는 약간 다른것들이 있습니다. 특히 화면 전환 부분이 그렇죠. 디폴트로 스토리보드의  scene 들은  화면전환 (scene transiton) 할 때 이전 scene들이 removed or purged 되지 않습니다. 대부분의 third-party scene management libraries 에서는 화면이 전환 될 때마다 이전 화면(scene)이 remove 되죠. Storyboard API에서도 이렇게 할 수가 있는데요. 자동으로 이전 scene들을 remove 하려면 함수가 call 될 때마다 inactive scene들을 purge 되도록 main.lua에 세팅할 수 있습니다.

main.lua

완전 간단하죠?

Scene Modules

Director class 에서는 scene 모듈은 new()라는 한개의 함수로 만들어 졌었습니다. 이 함수는 scene이 로딩 될 때마다 call 되게 되죠. 옵션으로 scene이 unload 될 때 call 되는 clean() 함수도 있었습니다. 아래는 Director Class에서 보여지는 scene 코드 입니다.

Director Class Scene

Storyboard API 를 사용할 때도 비슷한 structure와 로직이 적용될 수 있습니다. (위에 Setup 섹션에서 보실 수 있습니다.). Director Class 에서 위와 같이 사용해서 얻는 기능과 비슷하게 Storyboard API에서도 아래와 같이 코딩을 할 수 있습니다.

Storyboard Scene

많이 다르지는 않죠? 코딩은 약간 다르지만 그 로직은 완전히 같습니다. createScene 이벤트 리스너에 모든 scene creation과 로직을 넣으시면 됩니다. 그리고 모든 cleanup 코드는 “destroyScene” event listener 에 넣으시면 되죠.

createScene 리스너는 Director의 new 함수와 비슷한 기능을 합니다. 그리고 destroyScene 리스너는 clean 함수와 하는 기능은 거의 같죠. main.lua 파일에 storyboard.purgeOnSceneChange를 true 로 하는 것을 잊지 마세요. 그렇게 하지 않으면 화면은 전환 할 때마다 destroyScene 이벤트가 자동적으로 dispatch 되지 않을 겁니다.

이제 여러분의 Storyboard API의 scene들을 어떻게 하면 Director 클래스와 비슷하게 셋업할 수 있는지 알게 됐습니다. 이제  storyboard.gotoScene() 를 사용해서 화면 전환을 하시기만 하면 됩니다.

Conclusion

Storyboard API 에 가시면 훨씬 더 많은 기능을 보실 수 있을 겁니다. 그 기능들은 필요하실 때만 가져다가 쓰시면 됩니다. 대부분의 경우 특히 Director Class를 사용하시다가 Storyboard로 전환하시는 분들에게는 이 튜토리얼이면 충분히 쉽게 스토리보드를 이해하시고 사용하실 수 있을겁니다.

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 -->

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

위에서 보듯이 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