IT 기술 따라잡기

Adding Icons to Buttons

jQuery Mobile framework에는 모바일에서 자주 사용되는 여러 아이콘들이 미리 세팅되어 있습니다. 다운로드 사이즈를 최소화하기 위해 jQuery Mobile에는 single white icon sprite가 포함되 있습니다. 그리고 자동적으로 semi-transparent black circle 이 그 아이콘 뒤에 추가 되어 어떤 배경색에도 잘 눈에 띄도록 만들어 줍니다.

아이콘은 data-icon attribute를 anchor 에 추가 함으로서 추가될 수 있습니다. 예를 들면 아래와 같이 사용되는 것이죠.

이렇게 하면 아래와 같이 아이콘이 있는 버튼이 만들어 집니다.

data-mini="true" 를 사용하면 좀 더 compact 한 버튼을 만들 수 있습니다.

Icon set

아래에는 data-icon attribute에 추가할 수 있는 여러 아이콘들을 보여 줍니다.

Icon positioning

디폴트로 아이콘은 button text의 왼쪽에 보여 집니다.

Mini & Inline

mini 와inline attributes 들은 좀 더 compact 한 버튼을 만들기 위해서 사용하시면 됩니다.

Custom Icons

custom icon을 사용하려면 myapp-email 같이 unique 한 이름을 가지는 data-icon  값을 명시하세요. 그러면 버튼 플러그인은 ui-icon- 이라는 prefixing을 data-icon 값에 붙여서 클래스를 generate 할 겁니다. 그러면 ui-icon-myapp-email 이 되는 거죠.

여러분은 ui-icon-myapp-email 클래스를 특정 아이콘 background source로 연결시켜준ㄴ 것을 스타일 쉬트의 CSS rule을 만들어서 사용하실 수 있습니다. 시각적인 일관성을 유지하기 위해 white icon 으로 18X18 픽셀짜리로 만들어서 PNG 로 만들어 주세요 transparency는 8로 만들어 주시구요.

이 예제에서는 그냥 심플하게 standalone icon image를 사용했는데요. icon sprite와 positioning을 사용해서 framework에서 사용하는 아이콘처럼 만드실 수도 있습니다.

.ui-icon-myapp-email {
	background-image: url("app-icon-email.png");
}

이러면 standard resolution icon 을 생성할 겁니다. 하지만 지금은 많은 device들에서 고해상도를 표현할 수 있습니다. iPhone 4의 retina display 같은 경우가 이에 해당 되죠. HD 아이콘을 추가하려면 36X36 픽셀로 만드세요. (18X18의 두배짜리로요). 그리고 -webkit-min-device-pixel-ratio: 2 media query 를 사용하는 second rule을 만드세요. 그리고 나서 HD icon file을 면시하시고 배경 사이즈를 18X18로 하시면 36픽셀 아이콘을 18 픽셀 공간으로 넣을 겁니다. 미디어 쿼리 블럭은 여러 아이콘 rule을 넣을 수 있습니다.

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.ui-icon-myapp-email {
		background-image: url("app-icon-email-highres.png");
		background-size: 18px 18px;
	}
	...more HD icon rules go here...
}
 

Icons and themes

하얀 아이콘 뒤에 있는 semi-transparent black circle은 어떤 배경색에도 눈에 잘 띄도록 해 주죠. 그래서 이렇게 하면 jQuery Mobile theming system에서도 아주 잘 어울립니다.

아래 themed buttons  들을 사용한 서로 다른 color swatch들위에 이 아이콘들이 어떻게 잘 어울리는지 보여주는 예제들이 있습니다.

ButtonIcons.html

OPTIONS

The following options apply to all buttons:

corners boolean

default: true

true로 설정되면 border-radius 테마가 적용 됨. 이 옵션은 data-corners="false" 로 사용할 수도 있음

$('a').buttonMarkup({ corners: "false" });

icon string

default: null

icon set 중에서 선택된 아이콘을 적용 함. data-icon="start" 로 사용 함

$('a').buttonMarkup({ icon: "star" });

iconpos string

default: "left"

버튼에 아이콘의 위치를 정해 줌. left, right, top, bottom, none, notext 등이 있음.
notext 는 icon 만 있는 버튼을 표시함. data-iconpos="left"

$('a').buttonMarkup({ iconpos: "right" });

iconshadow boolean

default: true

true로 설정되면 버튼의 아이콘에 그림자 테마를 적용함.
data-iconshadow="false"

$('a').buttonMarkup({ iconshadow: "false" });

inline boolean

default: null (false)

true로 설정되면 inline button을 만듬. 버튼 안의 text 길이에 따라 버튼 길이가 정해 짐. 디폴트로 이 값은 null 이라서 버튼은 full width 를 가짐.
true와 false 가 올 수 있음.
data-inline="true"

$('a').buttonMarkup({ inline: "true" });

mini boolean

default: null (false)

true로 설정되면 가로 세로 모두 약간 작은 버튼이 표시됨. true, false 가 올 수 있음
data-mini="true"

$('a').buttonMarkup({ mini: "true" });

shadow boolean

default: true

true이면 drop shadow style 이 버튼에 적용 됨.
data-shadow="false"

$('a').buttonMarkup({ shadow: "false" });

theme string

default: null, inherited from parent

해당 widget에 color scheme (swatch)를 세팅 함. a-z 값이 올 수 있음. 디폴트로 parent container 의 color를 상속 함.

data-theme="a"

$('a').buttonMarkup({ theme: "a" });

initSelector CSS selector string

default: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"

This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as form buttons. To change which elements are initialized, bind this option to the mobileinit event:

$( document ).bind( "mobileinit", function(){
   $.mobile.button.prototype.options.initSelector = ".myButtons";
});

METHODS

아래의 메소드들이 버튼 form 에 적용되는 것들 입니다. Link-based button은 관련된 메소드들이 없습니다.

enable

$('[type='submit']').button('enable');			
				

disable

$('[type='submit']').button('disable'); 

refresh update the form button

자바스크립트로 form 버튼을 여러개 생성했다면 여러분은 그 버튼들에 반드시 refresh 메소드를 적용해 주셔야 합니다. 그래야 visual styling이 업데이트 됩니다.

		
$('[type='submit']').button('refresh'); 

EVENTS

a, input, button element에 직접 bind 이벤트를 적용합니다. jQuery Mobile의 virtual events나 change, focus, blur 같은 bind standard javascript event 를 사용하세요.

 
$( ".myButton" ).bind( "click", function(event, ui) {
  ...
});

form button 플러그 인은 다음과 같은 custom event들이 있습니다.

create : form button 이 생성됐을 때 trigger 됨

$('[type='submit']').button({
   create: function(event, ui) { ... }
});		
			

Button basics

icons 을 추가하거나 inline or grouped.를 표시하는 것을 포함해서 버튼에 대한 모든 속성들을 보시려면 data- attribute reference 보세요.

Styling links as buttons

페이지의 main content block안에서 여러분은 data-role="button" attribute를 추가함으로서 anchor 링크들을 button 으로 style 할 수 있습니다. framework은 이 링크 기능을 포함한 버튼으로 이 anchor link를 변환시켜 줍니다. 아래 예제를 보세요.

Produces this link-based button:

Note: 버튼으로 style 된 링크는 아래 form에서 사용되는 버튼하고 똑 같이 보입니다. 그런데 몇가지 다른점이 있죠. Link-based 버튼들은 button plugin의 한 부분이 아닙니다. 그냥 버튼 스타일로 보이도록 하기 위해 underlying buttonMarkup 플러그인을 사용하는 것이죠. 그래서 form button에서 사용되는 메소드인 enable, disable, refresh 같은 것들을 사용할 수 없습니다. 이 link-based button을 disable 시켜야 되면 그 효과를 내기 위해 ui-disabled 클래스를 추가하실 수 있습니다.

Mini size

툴 바에 딱 맞게 적은 공간을 사용하는 버튼을 만드려면 data-mini="true" attribute를 추가하세요. 그러면 mini version 버튼을 만들 수 있습니다.

	
<a href="index.html" data-role="button" data-mini="true">Link button</a>

이렇게 하면 일반적인 버튼보다 크기도 작고 글씨도 작은 버튼이 생깁니다.

Form buttons

좀 더 쉬운 styling을 위해서 framework는 submit,reset,button, image 타입으로 된 버튼이나 input element를 딱 맞게 스타일 된 버튼으로 자동적으로 convert 합니다. 이 경우 data-role="button" attribute를 넣을 필요가 없죠. 하지만 필요하다면 다른 jQuery plugin 처럼 아무 selector 에서나 직접 button plugin 을 call 해서 사용하실 수도 있습니다.

original button 이나 input 처럼 이벤트 처리를 하기 위해 framework은 실제 element를 투명처리 해서 숨기고 이것을 new button markup 위에 위치 시켜 버립니다. 유저가 custom-styled 버튼을 클릭하면 실제로는 original element를 클릭하는 것이죠. form button이 enhanced button으로 convert 되는 것을 막으려면 data-role="none" attribute를 추가하세요. 그러면 native control이 render 됩니다.

ButtonBasics.html

두개의 select 메뉴가 있는 상황에서 두번째의 select menu 내용이 첫번째 select menu 에 따라 동적으로 종속되는 기능이 있는 샘플 소스를 분석해 보겠습니다.

잘 알아 두면 실무에서 유용하게 사용할 수 있을 것 같네요.

우선 소스 부터 보겠습니다.

이번엔 우선 body 부터 볼까요?

data-role="page" 가 하나 있는 걸로 봐서 이 페이지는 하나짜리 페이지 입니다. 이 파일 내에서의 화면 이동이 없겠네요.

그 다음에 data-role="hearder" 로 페이지 제목을 정해 줬구요.
다음에 data-role="content" 가 왔습니다. 헤더 아래 부분 즉 이 페이지에서 표시될 주요 내용들이죠.

form은 html 태그이구요. 그 다음에 data-role="fieldcontain" 이 선언 됐네요.
실제 예제에서는 이 fieldcontain이 자주 나오는 군요. 시간 내서 숙지해 둬야겠어요.
그 다음에는 첫번째 select form 이 나오는데 제목이 Parent 이고 안의 옵션들은 parent 1, parent 2 이렇게 두가지가 있습니다.

그 다음에 두번째 fieldcontain 이 나오구요. 또 select 메뉴가 나오네요.

이 body 안에는 id 가 첫번째 select 메뉴에 parent로 주어졌고 두번째 select menu에 children으로 주어 졌습니다. 이 두 id 가지고 위의 자바스크립트에서 지지고 볶고 할 거예요.

이제 자바스크립트 쪽을 보겠습니다.

여기서는 $(document).ready(function() {} 같은거 안 썼네요.
뭐 그거 안써도 함수 안에 집어 넣지 않으면 페이지가 로딩될 때 다 실행 될테니까 이 경우에는 상관 없습니다.

childrenHash 라는 배열을 선언했습니다. 지난 글의 myArray 처럼 [] 가 아니라 {} 입니다. 자바스크립트에서는 이중 배열을 쓸 때는 {}를 쓰나요? 둘의 차이를 정확히는 모르겠습니다.
아시는 분 알려 주세요.

이 배열의 첫번째에는 두개의 인자가 들어갔고 두번째 배열에는 세개의 인자들이 들어갔습니다.

그 다음은 refreshChildrenSelect() 라는 함수가 선언됐는데요.

이렇게 함수가 선언되면 자동적으로 실행되는게 아니라 어디에선거 이 함수를 call 해줘야 실행 됩니다.

그 내용을 볼까요?

children 이라는 변수에 아래 두번째 select 메뉴의 아이디인 #children을 넣었습니다.
이 두번째 select에 뭔가를 넣을 건가 봅니다.
그리고 나서 children 변수를 비웠네요. 이 empty() 메소드도 jQuery 메소드이네요.

이건 간단한 거니까 이 글 끝에 예제 복사해 넣어서 나중에 참조해야겠습니다.
아주 간단한 기능이네요.

그 다음은 #childrenTemplate 가 나옵니다. 이것은 지난 번 봤던 jQuery 템플렛입니다.

<option> 태그를 만들어 주는 탬플릿이네요.
childrenHash[] 에 전달받은 매개변수 parentKey를 가지고 아까 childrenHash에서 정해 놨던 1이나 2 를 가져와서 children에 집어 넣는 겁니다.
이 children은 아까 #children을 대입하고 나서 empty() 시켰던 변수죠.
여기에 childrenHash[1] 아니면 childrenHash[2] 가 들어가 있겠네요.

그 다음에 children.selectmenu('refresh'); 로 children select 메뉴를 refresh 했습니다.

여기까지가 parentKey를 받아서 거기에 맞는 childrenHash를 가져와서 body 내에 있는 children select menu에 넣고 refresh 하는 refreshChildrenSelect 함수 내용입니다.

그 다음엔 여러번 봤던 .live 함수가 나오네요.
자세히 분석하지는 않았지만 자주 보니까 웬지 잘 아는 함수 같네요.
여기서는 click event가 아니라 pageinit event 일 경우 이 함수를 실행합니다.
처음에 .ready() 함수를 안 썼는데 여기서는 pageinit 이벤트에서 이 함수를 실행하도록 하면서 처리 했나봅니다.

그렇게 되면 refreshChildrenSelect 메뉴에 현재의 parent value를 매개변수로 전달하면서 call 하게 됩니다. .val() 메소드가 나오네요. 못 보던거니까 일 단 샘플 복사해 넣고 간단하게 분석하고 넘어가겠습니다.

이 소스에서는 이 .val() 부분이 없으면 최초 페이지 로딩할 때 children select menu 에 아무런 value가 없게 됩니다. 그러니까 최초 페이지 로딩이 일어 났을 때 children select menu를 채워주는 일을 하는 곳입니다.

그 다음엔 bind를 사용해서 뭔가 변화가 일어 났을 때 그러니까 parent select menu에 변화가 일어 났을 때 동적으로 child select menu 의 value 값들을 변화시켜 주는 부분 입니다.

처음 보는 메소드들이 몇개 있어서 한번에 해석하지 못하고 약간 멈칫했습니다.

첫번째 것은 .empty() 인데 이건 사실 이름만 보면 알수 있는 거라서 멈칫까지도 안했던 거네요.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>
  Hello, <span>Person</span> <a href="javascript:;">and person</a>
</p>

<button>Call empty() on above paragraph</button>
<script>
  $("button").click(function () {
    $("p").empty();
  });
</script>

</body>
</html>

예제도 간단해서 이해하기 쉽습니다. 해당 내용을 지워주는 거죠?

두번째 .val() 부분이 좀 멈칫거리게 만들었어요.

<!DOCTYPE html>
<html>
<head>
  <style>

  p { color:blue; margin:8px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input type="text" value="some text"/>
  <p></p>
<script>
    $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();
</script>

</body>
</html>

이건 해당 값을 넣는 거군요.

.html() 이랑 .text() 랑 비슷한거 아닌가 모르겠네요.

.html()은 태그까지 들어가고 .text()는 문자만 들어가는데. .val() 는 select 메뉴의 실제 value 값을 받아오는 것 같습니다.

오늘도 새로운거 몇개 배웠습니다.

have a nice weekend!

지난 번 글에서 다룬 몇개의 jQuery API들은 오늘 분석할 샘플 코드에 있길래 미리 공부해 봤습니다.

우선 전체 소스 부터 볼께요.

핵심은 bold 처리한 자바스크립트 부분입니다

맨 처음에 myArray라는 배열 변수를 선언 했고 그 다음 $(document).ready(function() {} 이 있습니다.

이건 페이지가 로딩하면 DOM 에 로딩된 직후에 곧바로 실행되는 jQuery 함수입니다.

그 내용을 보니 myArray 에 Item-0 을 대입했네요. 방금전에 빈 myArray[] 배열 변수를 선언했으니까 myArray.length는 0 이겠죠. 그러니까 myArray[0] = 'Item - 0'; 이 실행 됐을 겁니다.

다음에는 checkboxRefresh(); 함수를 call 했네요.

그럼 checkboxRefresh() 함수를 볼까요.

여기에는 newhtml 이라는 변수에 html 코드를 넣었습니다.

fieldset data-role=controlgroup .... 이렇게 계속 넣다가 for 문을 돌리네요.

myArray.length; 만큼 돌리면서 myArray 배열에 있는 값들을 하나 하나 표시하는 for 문입니다.

checkbox를 넣고 그 다음에 배열의 i 번째에 있는 값을 표시하고 그러네요.

마지막엔 </fieldset> 으로 태그를 닫아 주구요.

다음에 $("#checkboxItems").html(newhtml).page(); 가 나옵니다.

밑에 body 안에 보면 id가 checkboxItems 라는 div가 나오죠. 이 안에 newhtml 값을 넣습니다. 지난 글에서 살펴 봤던 .html() 메소드를 사용했습니다. 태그까지 전부 다 넣는 거예요.

그 다음 .page() 가 있는데. 이건 jQuery Mobile 메소드 입니다.

솔직히 뭘 하는지 정확하게 모르겠습니다. 이부분을 빼도 제대로 작동이 되던데...

아마 jQuery Mobile 의 data-role=page 부분에 넣는 것 아닐까요?

사실 $("#checkboxItems").html(newhtml); 여기 까지만 놓고 그 아래 내용은 지워도 원하는 동작은 제대로 합니다.

하여간 그 아래를 보면 .checkboxradio("refresh"); 는  체크박스를 refresh 하는 것 같고 그 아래는 my-home 이란 아이디를 가지고  있는 div  (여기서는 data-role=page) 전체를 page()에 담습니다.

여기까지 하면 myArray 배열에 값이 한개 있기 때문에 1개의 checkboxbutton 만 화면에 나타나겠죠. 이제 버튼을 누르면 라디오 버튼이 하나씩 추가 되는 기능을 보겠습니다.

$('#bAdd').live('click', function () {} 함수가 그 역할을 합니다. .live() jQuery 메소드는 이전 글에서 공부했습니다.

앞에 있는 bAdd 라는 아이디를 갖고 있는 태그 안의 부분을 클릭하면 함수 내에 선언된 동작을 하게 됩니다.

안에를 보면 myArray.length 가 나오죠. 이건 배열의 갯수 이니까. 아까 페이지 오픈할 때 한개가 생겼으니까 1 이 됩니다. 자바계열에서는 배열의 시작을 0부터 시작하니까 myArray[1] 이 되면 두번째가 됩니다.

그러니까 bAdd를 클릭 할 때마다 배열이 한개씩 늘어 나게 되겠죠.

그리고 나서 checkboxRefresh() 를 부르게 되면 배열 갯수 만큼 checkboxbutton을 화면에 뿌려주는 로직이니까 하나씩 늘어나게 될 겁니다.

여기까지가 동적인 효과를 주는 자바스크립트 부분입니다.

대부분 jQuery 메소드를 사용했습니다.

그 아래 body 부분은 html 입니다.

jQuery Mobile 에 대해서 알아야겠죠? 이 코드를 이해하려면요.

처음에 data-role로 페이지를 설정했고 style은 b  로 적용했고 이 페이지의 id는 my-home 입니다.

이 아이디는 checkboxRefresh() 함수에서 맨 마지막에 .page() 메소드를 사용할 때 이용됩니다.

그리고 아래 내용 중에 봐야될 부분은 data-role="content" 부분이 있고 (이것도 jQuery Mobile의 중요한 개념입니다.) 그 안에 data-role="fieldcontain" 이 있습니다.

jQuery Mobile이 생소하신 분들은 이 data-role에 대해 알아야 겠다는 느낌이 팍팍 드시죠?

따로 찾아 보시기 바랍니다.

제 블로그에도 정리가 돼 있습니다.

위에 자바스크립트를 보시면 새로 추가되는 체크박스 버튼이 fieldcontain (id="checkboxItems") 안에 추가 되고 있습니다.

id는 이렇게 자바스크립트에서 catch해서 어떤 작업을 할 때 요긴하게 쓰입니다.

그 다음은 data-role="controlgroup" 이 있죠. 아마 button을 그룹화 할 때 사용하는 data-role 일 겁니다.

그리고 그 안에는 버튼을 한개 만들었습니다. 여기서 id="bAdd" 를 갖고 위에 자바스크립트에서 catch 해가지고 어떤 작업을 했습니다.

분석하면서 보니까 별로 막히는 부분은 없었네요.

모르는 부분을 미리 보고 해석하니까 잘 진행 됐던것 같습니다.

여기서 더 이 소스를 내것으로 만드려면 이것 저것 수정해 보면서 확실하게 익히는 겁니다.

이게 제가 공부하는 방법입니다.

수정해 보시고 다른 앱에 응용해 보시면 더 좋겠죠.

그럼....

샘플 앱을 분석하려다 보니까 jQuery 메스드가 많이 나오네요.

먼저 jQuery 메소드 부터 대충 익히고 소스 분석 들어가겠습니다.

.html()

element의 내용을 얻을 때 사용합니다.

예제를 보시죠.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin:8px; font-size:20px; color:blue; 
      cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>

    <b>Click</b> to change the <span id="tag">html</span>
  </p>
  <p>

    to a <span id="text">text</span> node.
  </p>
  <p>
    This <button name="nada">button</button> does nothing.
  </p>
<script>
    $("p").click(function () {
      var htmlStr = $(this).html();
      console.log(htmlStr);
      $(this).text(htmlStr);
    });
</script>

</body>
</html>

자바스크립트를 보면 p 태그가 있는 곳을 클릭하면 그 부분의 내용을 긁어 와서 htmlStr 변수 에 담습니다. 그리고  이것을 text로 뿌려주죠.

제가 중간에 console.log()를 이용해서 로그를 뿌렸습니다.

크롬 부라우저의 inspection에 있는 console 에서 보면 이 로그를 확인하실 수 있습니다.

보니까 <p> </p> 사이에 있는 모든 글자를 가져왔죠? 그것이 html 태그이든 글자이든 다 가져왔습니다.

보니까 .text()도 나오네요. 이 예제도 볼까요?

p 태그 첫번째 텍스트만 불러와서 마지막 p 태그에 뿌려주는 것인가 봅니다.

그리고 jQuery Mobile 메소드 중에 .checkboxradio("refresh") 가 있습니다.

자바스크립트로 radio 버튼을 만들 때 사용합니다.

그리고 .page() 메소드도 있습니다. (jQuery Mobile)

정확히 뭐하는 걸까요? 해당 페이지를 refresh 하는 건가?

느낌상 그런것 같네요.

다음에 jQuery 메소드 중에 .bind() 가 있습니다.

예제가 재밌네요.

<!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 or double click here.</p>
<span></span>
<script>
$("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.nodeName);
});
$("p").bind("mouseenter mouseleave", function(event){
$(this).toggleClass("over");
});

</script>

</body>
</html>

p 태그를 클릭하면 Click Happend : x좌표, y 좌표를 표시해 주고 더블 클릭하면 p 태그에서 더블클릭이 있어 났다는 메세지를 뿌려줍니다.

그리고 마우스가 enter, 되고 leave 될 때마다 css 의 over 기능이 적용 됐다가 해제 됐다가 하구요.

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

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

</script>

</body>
</html>

이 소스에서는 버튼을 클릭하면 myName = john 이라는 텍스트가 fadeIn, fadeOut 기능이 적용되서 나타 났다가 사라집니다.

직접 파일을 만드셔서 확인해 보시면 쉽게 이해가 가실 겁니다.

자바스크립트는 웬지 막 좀 복잡합니다.

하여간 오늘은 .html(), .text(), .bind() 를 메인으로 공부했습니다.

그거 공부하면서 예제에 나오는 fadeIn, fadeOut, click, doubleClick, x,y 좌표 구하기, mouseenter, mouseleave 시 토글 형식으로 효과 주기 등등을 배웠습니다.

jQuery Mobile 샘플 소스를 하나 분석하고 나니까 어디서 막히는 지 알겠네요.

제가 자바스크립트랑 jQuery 에서 약한 것 같습니다.

그냥 jQuery Mobile 튜토리얼만  봐서는 실무에서 많이 힘들것 같아요.

그래서 jQuery 쪽도 하나하나 배워야겠습니다.

우선 눈에 먼저 띈 .live() 를 배워보죠.

보시면 아시겠지만 위의 소스는 jQuery Mobile이 아닙니다. 그냥 jQuery 이죠.

처음에 나오는 style은 <p> 태그에 스타일을 준겁니다. 배경색을 노랑으로 하고 볼드체로 하고 패딩을 5픽셀을 주었네요.

다음줄은 jquery-latest.js를 참조했구요.

그 다음에 브라우저에 표시될 body 부분이 시작됩니다.

Click me! 가 <p> 태그에 감싸였으니까 여기에 CSS가 적용이 되겠네요.

그 다음이 지금 배울 .live() 메소드가 나오는 자바스크립트 부분입니다.

$("p").live("click", function(){} 는 p 태그를 클릭하면 {} 안에 있는 함수를 실행하라는 겁니다.

안에는 $(this).before("<p>Another paragraph!</p>"); 이 있는데요.

여기서 $(this) 는 클릭한 p를 말합니다. 처음에는 Click me! 가 되겠죠. 이것의 전에(before)  괄호안에 있는 부분을 추가하는 겁니다.

before 부분을 주석처리하고 위의 after 주석을 풀고 실행하면 클릭한 것의 바로 다음에 괄호 안의 내용이 추가 됩니다.

아주 쉽네요.

.live() API 에 있는 다른 예제도 하고 싶은데 오늘은 힘이 딸려서 이만 쉬어야 겠습니다.

에너지가 되시는 분은 위 링크를 따라가서 보세요. 도움이 될 겁니다.

새로운 프로젝트를 할수록 공부해야 될 것은 점점 더 많아 지네요.

어쨌든 새로운걸 배우는 건 재밌습니다.

좋은 하루 되세요.

제가 받은 이 To-Do List 소스코드가 있는 곳을 찾았습니다.

여기로 가시면 보실 수 있으세요.

제가 이전 글에서 소스코드를 올렸나요?

만약 올렸다면 그건 잘 못 된 소스코드일 겁니다. 제가 잘 못 알았었나봐요.

위 링크를 따라 가시면 설명과 함께 소스코드를 받아 보실 수 있습니다.

그럼 to-do.js를 계속 분석 해 볼까요?

var model = new Model(),  listHeaders = [];

여기까지 했죠?

이건 뭔 뜻인지 제가 좀 헛갈립니다. 자바스크립트 문법을 잘 몰라서.

아마 Model() 의 객체를 model 변수에 담는데 이게 그 안에 배열이 있으니까 listHeaders 에 그 내부의 배열을 담나 봅니다.

좀 이상하긴 한데 머 아님 말구요.

다음 소스 분석하다 보면 답이 나오겠죠 뭐.

그 다음은 getListHeaders() 함수인데요.

$().each 메소드가 나왔습니다. jQuery 메소드죠.

이 메소드의 API는 위에 링크 걸어 놨는데요. 자세히 설명 돼 있습니다.

그러면 priority 별로 데이터들이 모이겠네요.

그 다음은 템플릿 플러그인을 사용하는 함수가 나옵니다.

이 의미는 listHeader 다음에 data-icon 을 delete로 하고 class를 item으로 하는 그리고 ${text} 가 브라우저에 표시되는 그런 패턴을 삽입하라는 겁니다.

첫번째 화면에 입력한 값이 들어가면 각 priority 아래에 그 내용들이 들어가는데 그 내용들에 대한 탬플릿을 추가하는 겁니다.

Sample Item #1 이 ${text} 이고 그 오른쪽에 data-icon = delete 가 되서 X 표시가 있죠? 이 라인을 만드는 함수 입니다.

다음은 id 가 createButton 인것이 클릭 되면 어떤 동작을 하는 함수인데요.

두 번째 화면의 Create 버튼이 클릭 되면 todoUrgency 가 id 인 곳의 값을 받아서 숫자로 형변환을 한 다음에 이것을 priority 변수에 넣습니다. 그리고 id가 todoDescription인 곳의 값을 받아서 그 priority와 함께 var Model = function() {} 함수 안에 있는 this.create 함수를 실행하는 겁니다. 

model.create()를 불러왔죠?

여기서는 인수로 받은 text,priority 값을 key, value 형태로 result에 담고 이것을 items에 push 합니다.

그리고 나서 save() 함수를 불러오는데 이 부분에서 쿠키를 만들어 주는 겁니다.

그러니까 두번째 화면에서 클릭하면 그 값들을 parsing 하고 변수에 담아서 items에 push 하고 이것을 쿠키로 만들어 지는 것 까지 자동적으로 이뤄지네요.

쿠키를 만든 다음엔 renderItemElement에 방금 만든 item을 보내서 X 표시가 있어서 데이터를 delete 할 수 있는 탬플릿을 만들구요. 

jQuery의 .listview() 메소드를 이용해서 #todoList 리스트 뷰를 refresh 합니다.

그리고 나서 두번째 페이지의  form 의 각 값들을 초기화 시키는 군요.

다음 함수의 .delegate() 도 jQuery 함수인데요. 

첫번째 인수를 클릭했을 때 어떤 일을 하라고 할 때 사용되는 겁니다.

즉 #todyList의 li.item 을 클릭하면 model의 remove를 실행하는 군요.

그럼 해당 아이템은 없어지고 그 아래 아이템들은 slideUp 되도록 하는 겁니다.

마지막 함수는

입니다.

model에 있는 getItems를 호출해서 .each() 메소드 처리를 하는 군요.

아까 처럼 각각 탬플릿 화 하는 겁니다. x표가 들어간 item을 만드는 거죠.

그리고 #todoList 리스트 뷰를 refresh 합니다.

지금까지 소스를 따라가면서 해석 해 봤는데요.

생각보다 쉬운건 아니네요.

자바스크립트나 jQuery 메소드들에 대해서 계속 공부하고 실습하고 해야 익숙해 질 것 같습니다.

jQuery Mobile 만 봤을 때는 아주 쉬워 보였는데 이걸 가지고 어떤 앱을 만들려니까 여러가지 배울것들이 더 많군요.

당분간 계속 샘플 앱 소스를 분석해야겠어요.

이제 제가 구한 To-Do List 의 자바스크립트 부분을 공부해 보겠습니다.

저도 자바스크립트는 그냥 소스 긁어다가 사용하는 수준이라서 잘 모르거든요. 그래서 이렇게 jQuery Mobile 제대로 들어가기 전에 자바스크립트 사용법 부터 공부하려고 소스 분석 하는 거 같아요.

지난번 글에서는 jQuery Mobile로 만든 두페이지 짜리 화면을 만드는 소스를 분석해 봤는데요.

오늘 배울 자바스크립트 부분을 작동 시키려면 지난번 그 index.html 파일의 header 안에 4개의 자바스크립트 링크를 더 달아야 합니다.

위에 3개는 이 예제소스 공부하기 전에 각각 대략의 사용법을 정리했었습니다.

지금 공부해야 할 부분은 to-do.js 입니다.

전체 소스는 아래와 같습니다.

처음에 $(document).ready(function() {}); 부분이 나오는데요.
이건 jQuery의 메소드 입니다.
자바스크립트의 window.onload 와 비슷한건데요. window.onload 가 전체 페이지가 다 로드 된 다음에 시작하는 거라면 $(document).ready(function() {}); 는 DOM 이 다 읽혀지기만 하면 곧바로 시작합니다.

그리고 한 파일에서 여러분 사용해도 jQuery 가 알아서 처리해 주구요. window.onload는 그러면 에러가 났거든요.

이렇게 to-do.js는  jQuery 메소드로 페이지가 로드되면 자동으로 실행 되도록 만들었네요.

그 다음에는 함수가 하나 있는데요. var Model = function() {}

Model 이라는 변수명을 가진 함수 입니다.
이 함수 안에는 처음에 var items 변수가 나오는데 이건 배열이네요.
json2.js 파일에 있는 JSON.parse() 메소드를 사용해서 쿠키의 내용을 배열 변수에 담는가 봅니다.
그 다음은 PRIORITY 선언이 있고 다음은 쿠키를 만드는 건데 expire 기간을 1년으로 잡았습니다.

여기서 $.cookie 로 시작하는 것은 아시겠지만 jquery.cookie.js 플러그인에 있는 메소드를 사용할 때 필요한 겁니다.

그 다음 함수인  this.create = function(text, priority) 는 뭘까요?

일단 text와 priority를 받는거네요. 그리고 이 받은 값들을 this.save(); 를 call 해서 쿠키로 저장하는 군요. 그 다음에 결과값을 return 하구요.

this.remove = function(item) 는 쿠키를 remove 하는 것 같습니다.

this.clear = function() 는 items 배열을 싹 비우는 함수구요.

this.getItems = function() 는 items의 갯수를 구해서 전부를 push 하는군요.

load(); 는 jQuery 의 메소드로서 HTML을 로드하고 DOM 에 삽입하는 겁니다. Ajax 기능이죠.

var Model = function() {}은 MVC 패턴 중에 M(Model) 부분을 구현한 거군요.
Model은 주로 비지니스 로직을 구현하는 거죠. 이 앱의 경우에는 여러 아이템들을 추가 삭제하고 쿠키를 만들거나 삭제하는 것 같은 비지니스 로직들이 이 안에 들어가 있습니다.

var model = new Model(),        listHeaders = [];

이거는 뭘까요? 지금까지 만든 Model에 대한 객체를 만들고 그 변수 이름을 model이라고 하구요. 그런데 listHeaders=[];는 왜 붙었을 까요.

오늘은 다른 할 일이 있어서 여기까지 해야 겠네요.

제가 자바스크립트는 잘 몰라서 그냥 제가 이해하는 만큼만 정리한 건데요.

제가 느끼기에 제가 좀 부족하게 이해한 것 같은데요.

자바스크립트 잘 아시는 분 있으시면 조언 좀 해 주세요.

시간 있을 때 차근차근 하나 하나 찾아가면서 마저 공부해야 겠습니다.

지난 시간에 얘기했던 것 처럼 오늘부터는 소스를 분석해 보겠습니다.

우선 index.html부터 보겠습니다.

일반 웹페이지 만들 때와 똑 같겠죠? jQuery Mobile로 화면부터 만들고 난 다음에 javascript로 dynamic 한 효과를 줍니다.

그럼 jQuery Mobile을 사용하기 위해서는 관련된 js 파일과 css 파일을 불러와야 겠죠.

그리고 이 앱은 두개의 페이지로 돼 있으니까 data-role="page" 가 들어가 있는 div 를 두개 만들어야 할 겁니다.

나머지는 화면에 보이는대로 각 위젯들을 갖다가 넣으면 됩니다.

그럼 전체 소스를 한번 보죠.

첫번째 줄의 <!DOCTYPE html> 는 HTML5를 사용한다는 태그이구요.

그 다음부터 본격적인 html 이 시작됩니다.

먼저 head 부분이 오게 되는데 이곳에는 title이 있고 필요한 자바스크립트나 스타일 쉬트 파일을 참조하는 태그들이 있습니다.

여기서는 jQuery Mobile을 사용하기 위해 필요한 두개의 자바스크립트 파일과 한개의 스타일 쉬트 파일을 참조했습니다.

오늘은 화면 구성만 할 거기 때문에 다른 dynamic한 처리를 하기 위한 자바스크립트는 일단 제외했습니다.

그건 다음글에서 다룰 생각입니다.

그 다음 나오는 <body> 서부터가 실제로 브라우저에 표시될 내용들입니다.

우선 data-role="page" 가 있는 div를 두개 만들어서 jQuery Mobile에서 사용할 두개의 페이지를 나눕니다. 하나는 mainPage 이고 또 다른 하나는 addPage 이네요.

우선 mainPage 부터 볼까요.

이 mainPage에는 header와 contents 가 있습니다. 이 둘을 나누는 것은 data-role= 를 이용해서 나누구요. 물론 div안에 그것을 넣습니다.

header 부분에는 제목과 New 버튼이 들어가네요.

jQuery Mobile의 header에서는 링크를 만들면 자동적으로 버튼으로 처리하죠?

그리고 그 버튼은 좌,우 각 한개씩 두개까지 만들 수 있습니다.

여기서는 이 New 버튼을 누르면 뭔가가 실행이 되겠네요.#addPage로 링크가 걸렸으니까 그 페이지가 뜰 겁니다.

그럼 addPage는 새로운 것을 입력하는 form 이겠네요.

그건 나중에 보기로 하고.....

그 다음 content 부분에서는 세개의 item 이 있는 listview를 만들었습니다.

data-role 이 listview로 돼 있죠? 그 다음에 아이템들에는 data-role이 list-divider로 돼 있고 각각 data-priority 가 등록 돼 있습니다.

이제 첫번째 페이지가 완성 됐네요.

여기까지 하면 위 화면을 볼 수 있습니다.

다음 두번째 페이지인 addPage를 볼까요.

여기도 mainPage와 마찬가지로 header와 contents 두개가 가장 윗단에 있습니다.

헤더 안에는 #mainPage로 가는 링크가 두개가 있네요. 이 링크는 data-role이 button 입니다.

두개가 다른 것은 두번째 버튼(Create)에는 id="createButton" 이 있습니다

(data-icon 도 다르네요.)

두번째 버튼에 id 를 준 것은 이 아이디를 가진 버튼이 클릭 됐을 때 자바스크립트에서 어떤 동작을 하도록 하기 위해서 입니다.

이 자바스크립트 부분은 다음 글에서 분석해 보겠습니다.

두번째로 content 부분을 볼까요.

여기엔 data-role="fieldcontain" 부분이 두개가 있습니다.

첫번째 것에는 Label 하고 input 박스가 있습니다.

두번째 input 박스에는 id="todoDescription" 이 있죠? 이렇게 id 가 있는 태그는 대부분 자바스크립트에서 어떤 처리를 하는데 필요한 것들이라고 보시면 됩니다.

두번째 fieldcontain에는 Label 하고 select 메뉴가 있습니다. 디폴트로 Normal 이 select 되도록 되 있네요.

두번째 화면을 브라우저에서 실행시키면 위와 같이 됩니다.

첫번째 화면에서 New를 클릭하면 두번째 화면이 나오고 두번째 화면에서 Back을 하거나 Create 버튼을 누르면 다시 첫번째 화면이 나오죠.

아직 자바스크립트 부분을 완료하지가 않아서 form에 value를 넣고 Create를 눌러도 첫번째 화면에는 아무런 변화가 없을 겁니다.

그 자바스크립트 부분은 다음 글에서 다룰 께요.