'jQuery Mobile' 카테고리의 글 목록 (7 Page)

Input field 를 customize 하기

2012. 11. 10. 06:12 | Posted by 솔웅

Change the appearance of an input field that does not have focus

Firebug 를 이용하면 input fields 가 ui-input-text CSS class를 가지고 있는 것을 확인 할 수 있습니다. 이 클래스는 <input> 나 <textarea> elements에 할당 돼 있습니다. 만약 <input> element가 search field 이면 그것을 둘러싼 <div>가 jQuery Mobile에 의해서 생성됩니다. 그리고 ui-input-search CSS class 가 그곳에 할당됩니다.

input fields를 바꾸기 위해 이 CSS classes들을 사용하겠습니다.

Styling input fields

<!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 src=jquery.mobile/jquery.mobile.js></script>

  <style type=text/css>

    .ui-input-text, .ui-input-search {

      color : white; 

      background-color : black;

    }

  </style>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content </p>

    Name : <input type=text value=Sarrion /> <br />

    Description : <textarea> Nice studio for renovation </textarea> <br />

    Search : <input type=search value="Your name" />

  </div>

</div>

</body>

</html>

<script>

</script>

tistory459_01.html

Change the appearance of an input field that has focus

만약 input field에 focus 가 가면 jQuery Mobile은 ui-focus CSS class를 할당합니다.

이 클래스는 다음 element 들에 영향을 미칩니다.

on <input> element for a single line input field,
on <textarea> element for a multiline input field,
on the <div> element surrounding the <input> element for a search field. This <div> element is automatically created by jQuery Mobile.

이전 처럼 이 클래스를 이용해서 focus가 됐을 때 일어날 스타일링을 하실 수 있습니다.

Styling fields that have focus

<!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 src=jquery.mobile/jquery.mobile.js></script>

  <style type=text/css>

    .ui-focus {

      color : white; 

      background-color : black;

    }

    .ui-input-search.ui-focus > .ui-input-text {

      color : white; 

    }

  </style>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content </p>

    Name : <input type=text value=Sarrion /> <br />

    Description : <textarea> Nice studio for renovation </textarea> <br />

    Search : <input type=search value="Your name" />

  </div>

</div>

</body>

</html>

<script>

</script>

tistory459_02.html

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

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

selection 리스트 열고 닫기 (0)	2012.11.13
Ajax 로 selection list 삽입하기 (0)	2012.11.12
HTML element를 jQuery Mobile selection list로 바꾸기 (0)	2012.11.12
다이나믹하게 selection list 생성하기 (0)	2012.11.11
input field 관련 예제들 (0)	2012.11.10
input field에서 이벤트 관리하기 (0)	2012.11.09
input field 에 값 할당하기 (0)	2012.11.09
Ajax 로 input fields 삽입하기 (0)	2012.11.07
HTML element 를 jQuery Mobile 의 input field로 변환하기 (0)	2012.11.07
다이나믹하게 input field 생성하기 (0)	2012.11.07

jQuery Mobile/JQM Tutorial

input field에서 이벤트 관리하기

2012. 11. 9. 22:07 | Posted by 솔웅

Manage events on input fields

input field는 standard event들을 receive 합니다. 그리고 jQuery 의 bind () method에 의해서 observe 될 수 있습니다. jQuery Mobile 터치 스크린이든 기존 컴퓨터이든 같은 이벤트 이름을 사용한다는 걸 기억해 두세요.

Events on the input fields

Name	Signification
click vclick	A click was made in the field.
focus	The field has just won the focus.
blur	The field has lost focus.
change	The field content has changed (detected when the field loses focus).
keyup	A keyboard key was pressed.
keydown	A keyboard key was released.
mousedown vmousedown	The left mouse button was pressed (or the finger touched the field).
mouseup vmouseup	The left mouse button was released (or the finger was removed from the screen).

Taking into account of a click in an input field

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

var html = "";

html += "Name : <input type=text value='Sarrion' />";

$("#home div:jqmData(role=content)").append (html);

$("input").bind ("vclick", function (event)

{

  alert ("click");

});

</script>

tistory458_01.html

Taking into account of a click in a search field

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

var html = "";

html += "Search : <input type=search value='Your name' id=search />";

$("#home div:jqmData(role=content)").append (html);

$("#search").live ("textinputcreate", function (event)

{

  $("#search").bind ("vclick", function (event)

  {

    alert ("click");

  });

});

</script>

tistory458_02.html

이 예제에서는 search field 가 생성될 때 까지 기다려야 합니다. 안 그러면 <input> element 가 사용하는 bind ("vclick" ...)이 실제 bind ()가 실행 될 때 존재하지 않은 상태가 됩니다. search field 의 HTML 이 자바스크립트에 의해서가 아니라 HTML 로 곧바로 insert 될 때도 같은 문제점이 발생합니다. 아래 예제를 보겠습니다.

Search field inserted directly into the HTML

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

    Search : <input type=search value="Your name" id=search />

  </div>

</div>

</body>

</html>

<script>

$("#search").live ("textinputcreate", function (event)

{

  $("#search").bind ("vclick", function (event)

  {

    alert ("click");

  });

});

</script>

tistory458_03.html

위에서 설명드렸듯이 textinputcreate event를 다루면서 click event (or vclick)를 연결시키는 것이 핵심입니다. 안 그러면 click 은 연결되지 않을 겁니다.

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

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

Ajax 로 selection list 삽입하기 (0)	2012.11.12
HTML element를 jQuery Mobile selection list로 바꾸기 (0)	2012.11.12
다이나믹하게 selection list 생성하기 (0)	2012.11.11
input field 관련 예제들 (0)	2012.11.10
Input field 를 customize 하기 (0)	2012.11.10
input field 에 값 할당하기 (0)	2012.11.09
Ajax 로 input fields 삽입하기 (0)	2012.11.07
HTML element 를 jQuery Mobile 의 input field로 변환하기 (0)	2012.11.07
다이나믹하게 input field 생성하기 (0)	2012.11.07
테이블 manipulation 예제 (0)	2012.11.06

jQuery Mobile/JQM Tutorial

input field 에 값 할당하기

2012. 11. 9. 21:40 | Posted by 솔웅

Assign and retrieve the value in an input field

single line 이나 multiline의 input field 값은 val (value) method에 의해 지정될 수가 있습니다. 그리고 val () method에 의해 recover 될 수 있구요. 이 두 메소드 모두 jQuery methods 입니다.

사람 이름을 넣는 text input field 를 가진 HTML 코드가 있다고 가정합니다. 그리고 description 을 넣기 위해 <textarea> element 가 있고 그리고 search field 가 있습니다. 이 세가지 field들은 default 값으로 초기화 돼 있습니다. 이 값을 JavaScript 로 programmatically 바꾸고자 합니다.

아래 HTML 코드가 있습니다. 그런데 몇몇부분은 제대로 작동하지 않을 겁니다. 그 이유를 살펴 보도록 하죠.

Initialize input fields by JavaScript

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

    Name : <input type=text value="Your name" id=text /> <br />

    Description : <textarea> Description </textarea> <br />

    Search : <input type=search value="Your name" id=search />

  </div>

</div>

</body>

</html>

<script>

alert ($("#text").val ("Eric").val ());

alert ($("textarea").val ("Nice studio for renovation").val ());

alert ($("#search").val ("Sarrion").val ());

</script>

tistory457_01.html

이 프로그램을 돌리면 3개의 alert 화면을 볼 겁니다. Eric, Nice studio for renovation, Sarrion라는 글자들을 보실 겁니다. 이 값들은 이 윈도우의 input field 들의 값들입니다. 그런데 search field 만 값이 안 바뀌어 있을 겁니다.

search field 에 Your name 이라는 디폴트값이 있고 Sarrion 이라는 값이 할당되지 않았죠? 여기에서 우리가 알 수 있는 것은 dearch field에 대한 접근법은 다른 input field들과는 좀 다르다는 점 입니다.

One line and multiple lines inputs

val ()와 val (value) 메소드가 잘 작동하는 것을 위 예제 코드에서 보셨죠?

Assign and then read the value of a <input> element with type="text" attribute

alert ($(":text").val ("Eric").val ());

// Displays: Eric

Selector ":text" is the selector "type = text".

Assign and then read the value of a <textarea> element

alert ($("textarea").val ("Nice studio for renovation").val ());

// Displays: Nice studio for renovation

Search field

search field는 좀 복잡합니다. 그리고 search field 에 대해서는 원래의 HTML code 가 jQuery Mobile 에 의해서 수정되게 됩니다.

Assign and then read the value of an <input> element with type="search" attribute (as it does not work!)

alert ($("#search").val ("Sarrion").val ());

// Displays: Sarrion

alert 화면에서는 Sarrion 이 표시되는데 실제 화면상에는 디폴트값이 표시됩니다. 그 이유는 간단합니다. val ("Sarrion") instruction이 search field 가 완전히 생성되기 이전에 실행되기 때문입니다. 그러니까 우리가 원하는 대로 하려면 search field 가 생성될 때까지 기다린 후에 그 값을 바꿔줘야 하는겁니다.

이 과정을 이해하는 가장 빠르고 쉬운 방법은 jQuery Mobile 에 의해 바뀌어진 HTML code를 살펴보는 겁니다. (Firefox의 firebug 로 본 화면입니다.)

보시면 single line 과 multiline input field는 CSS class 들이 추가되면서 살짝 바뀌었습니다. 반면에 search field 는 아주 많이 바뀌었죠. <div> element 가 생겼고 거기에 ui-input-search CSS class 가 생겼습니다. 사실 초기의 <input> element 는 새로운 <div> element가 삽입되면서 완전히 새로 생성된 겁니다.

Modify the contents of the search field after its creation

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

    Name : <input type=text value="Your name" id=text /> <br />

    Description : <textarea> Description </textarea> <br />

    Search : <input type=search value="Your name" id=search />

  </div>

</div>

</body>

</html>

<script>

alert ($("#text").val ("Eric").val ());

alert ($("textarea").val ("Nice studio for renovation").val ());

$("#search").live ("textinputcreate", function (event)

{

  alert ($("#search").val ("Sarrion").val ());

});

</script>

tistory457_02.html

search field와 연계된 <input> element는 bind ()가 아니라 live () method에 의해 observe 되어야 합니다. <input> element는 textinputcreate event가 완전히 set 된 후에 그 이벤트를 receive 할 수 있습니다. 이 element은 jQuery Mobile 에 의해 생성 될 거구요.

live () jQuery method는 DOM tree 안에 있는 미래의 element에 대한 이벤트를 가리키는데 주로 사용됩니다. bind () method는 현재 존재하는 아이템들에 대해서 사용되구요.

이제 search field 도 할당된 값으로 화면에 표시될 겁니다.

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

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

HTML element를 jQuery Mobile selection list로 바꾸기 (0)	2012.11.12
다이나믹하게 selection list 생성하기 (0)	2012.11.11
input field 관련 예제들 (0)	2012.11.10
Input field 를 customize 하기 (0)	2012.11.10
input field에서 이벤트 관리하기 (0)	2012.11.09
Ajax 로 input fields 삽입하기 (0)	2012.11.07
HTML element 를 jQuery Mobile 의 input field로 변환하기 (0)	2012.11.07
다이나믹하게 input field 생성하기 (0)	2012.11.07
테이블 manipulation 예제 (0)	2012.11.06
테이블에서 이벤트 다루기 (0)	2012.11.06

jQuery Mobile/JQM Tutorial

Ajax 로 input fields 삽입하기

2012. 11. 7. 09:46 | Posted by 솔웅

Insert input fields by Ajax

이제 서버에서 HTML 을 받아와서 single line input field와 multiline input field 를 만드는 것을 해 보겠습니다. 그리고 result 도 해당 content에 넣어보겠습니다.

Insert input fields by Ajax

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

$.ajax (

{ 

  url : "action.php", 

  complete : function (xhr, result)

  {

    if (result != "success") return;

    var response = xhr.responseText;

    $("#home div:jqmData(role=content)").append (response);

    $(":text").textinput ();

    $("textarea").textinput ();

    $("[type=search]").textinput ();

  }

});   

</script>

input field 와 관계 된 element 에 textinput () method가 있는 것을 잘 보세요. 이 메소드가 input field 모양으로 변환시켜주는데 필요한 메소드 있니다. 이 메소드가 없으면 jQuery Mobile 다운 input field 가 만들어지지 않습니다.

action.php file

<?
$html = "";
$html .= "Name : <input type=text value=Sarrion /> <br />";
$html .= "Description : <textarea>Nice studio for renovation </textarea> <br />";
$html .= "Search : <input type=search value=Name />";

echo utf8_encode ($html);
?>

action7.php

tistory453_01.html

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

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

다이나믹하게 selection list 생성하기 (0)	2012.11.11
input field 관련 예제들 (0)	2012.11.10
Input field 를 customize 하기 (0)	2012.11.10
input field에서 이벤트 관리하기 (0)	2012.11.09
input field 에 값 할당하기 (0)	2012.11.09
HTML element 를 jQuery Mobile 의 input field로 변환하기 (0)	2012.11.07
다이나믹하게 input field 생성하기 (0)	2012.11.07
테이블 manipulation 예제 (0)	2012.11.06
테이블에서 이벤트 다루기 (0)	2012.11.06
다이나믹하게 새 row 를 insert 하기 (0)	2012.11.06

jQuery Mobile/JQM Tutorial

HTML element 를 jQuery Mobile 의 input field로 변환하기

2012. 11. 7. 09:46 | Posted by 솔웅

Turning a HTML element into a jQuery Mobile input field

Input on one line

single line input field 를 생성할 때 jQuery Mobile 은 너비와 높이 그리고 shaded border 등을 정할 수 있는 CSS classes 들을 해당 <input> element 에 add 합니다. 이전 글에서 사용했던 소스를 가지고 한번 확인해 보죠. 이전 소스를 fireworks 로 열어서 firebug로 jQuery Mobile 에 의해 생성된 HTML code를 확인해 보세요.

<input> element에 ui-input-text CSS class 가 보이시죠? 다른 클래스들은 border 의 테두리 곡선을 관리하는 클래스들입니다.

Input on multiple lines

jQuery Mobile 에 의해 생성된 HTML 을 잘 보세요. 아래는 multiline input field 소스코드를 firebugs 에서 본 모습입니다.

여기서도 ui-input-text class 를 보실 수 있습니다. 다만 이번에는 <textarea> element에 적용됐을 뿐이죠.

Search field

같은 방법으로 search field 소스코드를 보겠습니다.

jQuery Mobile 에 의해서 바뀌어진 HTML 은 좀 더 복잡하게 변했죠? <div> element 에 ui-input-search class 가 있고 거기에 <input> element가 포함돼 있구요. 여기에 또 <a> link도 있습니다. field 의 오른쪽에 있는 erase icon 과 관계 있는 버튼을 만들기 위해서죠.

또한 <input> element 에 type="true" attribute (instead of type="search") 가 있는 점을 잘 봐두세요. 그리고 새 data-type attribute 가 "search"로 세팅돼 있습니다.

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

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

input field 관련 예제들 (0)	2012.11.10
Input field 를 customize 하기 (0)	2012.11.10
input field에서 이벤트 관리하기 (0)	2012.11.09
input field 에 값 할당하기 (0)	2012.11.09
Ajax 로 input fields 삽입하기 (0)	2012.11.07
다이나믹하게 input field 생성하기 (0)	2012.11.07
테이블 manipulation 예제 (0)	2012.11.06
테이블에서 이벤트 다루기 (0)	2012.11.06
다이나믹하게 새 row 를 insert 하기 (0)	2012.11.06
다이나믹하게 새로운 컬럼 insert 하기 (0)	2012.11.06

jQuery Mobile/JQM Tutorial

다이나믹하게 input field 생성하기

2012. 11. 7. 09:45 | Posted by 솔웅

input fields는 single line 과 multiline 두가지 타입이 있습니다. 첫번째것은 <input> elements 에 type="text" attribute 가 들어가고 두번째 것은 <textarea> elements가 들어갑니다. jQuery Mobile 에는 이 외에 search field가 있습니다. 어떤 값을 입력하거나 어떤 문자를 찾을 때 사용하죠. 이 세가지의 input field 들은 jQuery 의 standard methods 에 의해 관리 됩니다. 그리고 jQuery Mobile에는 textinput () method가 추가로 있습니다. input field 는 textinput standard component 와 연관이 있습니다.

Dynamically create an input field

Input on one line

JavaScript 로 single line 의 input field를 다이나믹하게 생성하겠습니다. 간단하게 type="text" attribute를 가지고 있는 <input> element를 생성하면 됩니다.

Create an input field dynamically

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

var html = "";

html += "Name : <input type=text value='Sarrion' />";

$("#home div:jqmData(role=content)").append (html);

</script>

tistory451_01.html

Input on multiple lines

multiline text field 를 표시할 수 있는 <textarea> element 를 생성해 보죠.

Create a multiline text field dynamically

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

var html = "";

html += "Description : <textarea> Beautiful sunny studio. Reasonable price.</textarea>";

$("#home div:jqmData(role=content)").append (html);

</script>

tistory451_02.html

Search field

search field 는 <input> element 안에 type="search" attribute를 넣으시면 됩니다.

Dynamic creation of a search field

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

var html = "";

html += "Name : <input type=search value='Sarrion' />";

$("#home div:jqmData(role=content)").append (html);

</script>

tistory451_03.html

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

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

Input field 를 customize 하기 (0)	2012.11.10
input field에서 이벤트 관리하기 (0)	2012.11.09
input field 에 값 할당하기 (0)	2012.11.09
Ajax 로 input fields 삽입하기 (0)	2012.11.07
HTML element 를 jQuery Mobile 의 input field로 변환하기 (0)	2012.11.07
테이블 manipulation 예제 (0)	2012.11.06
테이블에서 이벤트 다루기 (0)	2012.11.06
다이나믹하게 새 row 를 insert 하기 (0)	2012.11.06
다이나믹하게 새로운 컬럼 insert 하기 (0)	2012.11.06
Ajax 로 테이블 삽입하기 (0)	2012.11.06

jQuery Mobile/JQM News

jQuery Conference Asia 2012 이벤트 당첨자 발표

2012. 11. 7. 02:51 | Posted by 솔웅

안녕하세요?

지난 주 월요일(10/29) 부터 11/06 (화) 까지 진행된 jQuery Conference Asia 2012 이벤트가 마무리 됐습니다.

참여해 주신분께 감사드립니다.

추첨은 제 직장 동료인 Akshay 가 해 주었습니다.

점심시간에 짬을 내서 추첨 해 준 Akshay 에게도 감사드립니다.

당첨되신 분은 조연성님입니다.

조연성님께는 이번 jQuery Conference Asia 2012 행사에 무료로 참가할 수 있는 기회를 드립니다.

제가 이번 행사를 주최하는 인크로스의 담당자 분께 조연성님의 이메일 주소를 알려드리면 담당자분이 Contact 을 할 겁니다.

아쉽게 추첨되지 못하신 분들께는 죄송합니다.

저도 행사에 참가하지 못해서 행사 후에 관련 자료를 받기로 했거든요.

이번에 참여하셨다가 추첨되지 못하신 분 들께도 이 자료 공유해 드릴께요.

이번 jQuery Conference Asia 2012 행사는 11월 12일 월요일에 서울 역삼동 르네상스 호텔에서 개최됩니다.

자세한 소식은 위 링크를 따라 가시거나 아래 파일을 다운 받아서 열어보시면 알 수 있습니다.

join_auth.html

관심있는 분들의 많은 참여 바랍니다.

감사합니다.

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

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

jQuery Conference Asia 2012 동영상 (0)	2012.12.12
[행사홍보] jQuery Conference Asia 2012 (0)	2012.10.31
[행사홍보] jQuery Conference Asia 2012 - Nov 12, 2012 (0)	2012.10.24
jQuery Mobile 시작하시는 분들을 위한 10가지 팁과 예제들... (0)	2012.07.30
jQuery UI Touch Punch - jQuery UI 에서 Touch 를 지원합니다.- (0)	2012.05.31
JQuery Mobile 훑어 보기 (0)	2012.04.30

jQuery Mobile/JQM Tutorial

테이블 manipulation 예제

2012. 11. 6. 22:18 | Posted by 솔웅

Example of table manipulation

A main menu as images in a table

이제 테이블에 여러 이미지를 넣고 그 이미지를 클릭하면 Text 가 나오고 그 Text를 클릭하면 해당 홈페이지로 가게 할 겁니다.

(아래 첨부파일은 본문의 예제소스와 약간 다릅니다. 첨부파일도 꼭 확인해 주세요.)

Main menu as images

<!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 src=jquery.mobile/jquery.mobile.js></script>

  <style type=text/css>

    .ui-grid-b img {

      width : 80px;

      margin : 5px;

    }

  </style>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <h3> A main menu as images </h3>

    <div class=ui-grid-b>

      <div class=ui-block-a>

        <a href=#jquery><img src=images/jquery.jpg /></a>

      </div>

      <div class=ui-block-b>

        <a href=#html><img src=images/html.jpg /></a>

      </div>

      <div class=ui-block-c>

        <a href=#j2ee><img src=images/j2ee.jpg /></a>

      </div>

      <div class=ui-block-a>

        <a href=#rails><img src=images/rails.jpg /></a>

      </div>

      <div class=ui-block-b>

        <a href=#mobile_web><img src=images/mobile_web.jpg /></a>

      </div>

      <div class=ui-block-c>

        <a href=#phonegap><img src=images/phonegap.jpg /></a>

      </div>

    </div>

  </div>

</div>

<div data-role=page id=jquery data-add-back-btn=true>

  <div data-role=header>

    <h1>jQuery</h1>

  </div>

  <div data-role=content>

    <h3> jQuery content</h3>

  </div>

</div>

<div data-role=page id=html data-add-back-btn=true>

  <div data-role=header>

    <h1>HTML & CSS</h1>

  </div>

  <div data-role=content>

    <h3> HTML & CSS content</h3>

  </div>

</div>

<div data-role=page id=j2ee data-add-back-btn=true>

  <div data-role=header>

    <h1>J2EE</h1>

  </div>

  <div data-role=content>

    <h3> J2EE content </h3>

  </div>

</div>

<div data-role=page id=rails data-add-back-btn=true>

  <div data-role=header>

    <h1>Ruby on Rails</h1>

  </div>

  <div data-role=content>

    <h3> Ruby on Rails content </h3>

  </div>

</div>

<div data-role=page id=mobile_web data-add-back-btn=true>

  <div data-role=header>

    <h1>Mobile web</h1>

  </div>

  <div data-role=content>

    <h3> Mobile web content </h3>

  </div>

</div>

<div data-role=page id=phonegap data-add-back-btn=true>

  <div data-role=header>

    <h1>PhoneGap</h1>

  </div>

  <div data-role=content>

    <h3> PhoneGap content </h3>

  </div>

</div>

</body>

</html>

tistory448_01.html

이미지는 수평으로 나란히 정렬 되도록 만들었습니다. 그리고 각각의 이미지에는 <a> link가 있어서 해당 이미지에 맞는 text를 다른 window 에서 display 되도록 만들었습니다. (그리고 저의 예제 파일을 열어보시면 그 텍스트에 링크를 걸어서 해당 홈페이지에 가도록 만들었습니다.)

아래는 위 예제소스의 실행화면입니다.
(제 첨부파일에는 구글, 야후, 다음, 한겨레, 경향신만, Ohmynews 등을 예제로 들었습니다. 일부러 네이버는 뺐는데요. 그건 순전히 저의 정치성향때문입니다. ^^; 네이버가 이명박과 박근혜 쪽에 기운것 같아서.... ;;)

J2EE를 클릭하면 아래 화면이 나옵니다.

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

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

input field에서 이벤트 관리하기 (0)	2012.11.09
input field 에 값 할당하기 (0)	2012.11.09
Ajax 로 input fields 삽입하기 (0)	2012.11.07
HTML element 를 jQuery Mobile 의 input field로 변환하기 (0)	2012.11.07
다이나믹하게 input field 생성하기 (0)	2012.11.07
테이블에서 이벤트 다루기 (0)	2012.11.06
다이나믹하게 새 row 를 insert 하기 (0)	2012.11.06
다이나믹하게 새로운 컬럼 insert 하기 (0)	2012.11.06
Ajax 로 테이블 삽입하기 (0)	2012.11.06
HTML element 를 jQuery Mobile table 로 변환하기 (0)	2012.11.02

jQuery Mobile/JQM Tutorial

테이블에서 이벤트 다루기

2012. 11. 6. 21:47 | Posted by 솔웅

Manage events on tables

테이블의 각 cell 에서 처리될 수 있는 주요 이벤트는 click event 입니다. jQuery Mobile에서는 vclick virtual event 로도 사용할 수 있죠. taphold 와 swipe events 들도 사용될 수 있습니다.

예를 들어 cell 테이블에 long click (taphold) 이 일어났을 때 어떤 동작을 하도록 만들 수 있습니다. 아래 예제는 long click 이 일어났을 때 그 cell 의 content를 delete 하는 예제입니다.

Deleting array elements by clicking and holding

<!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 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 class=ui-grid-b>

      <div class=ui-block-a>Element 1.1</div>

      <div class=ui-block-b>Element 1.2</div>

      <div class=ui-block-c>Element 1.3</div>

      <div class=ui-block-a>Element 2.1</div>

      <div class=ui-block-b>Element 2.2</div>

      <div class=ui-block-c>Element 2.3</div>

      <div class=ui-block-a>Element 3.1</div>

      <div class=ui-block-b>Element 3.2</div>

      <div class=ui-block-c>Element 3.3</div>

    </div>

  </div>

</div>

</body>

</html>

<script>

$(".ui-block-a, .ui-block-b, .ui-block-c").bind ("taphold", function (event)

{

  $(this).html ("&nbsp;");

});

</script>

tistory446_01.html

테이블의 각 cell 에는 ui-block-a, ui-block-b, or ui-block-c CSS classes 들이 있습니다. 이 클래스들에 taphold event를 implement 했죠. 그러면 long click 이 감지되면 <div> 의 content 는 " "로 바뀝니다. 실제로 delete 되는건 아니죠 .하지만 사실상 delete 되는 것입니다. 해당 셀을 그냥 빈 공간으로 두는 것이 아니라 space 한칸을 두도록 만든 겁니다.

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

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

input field 에 값 할당하기 (0)	2012.11.09
Ajax 로 input fields 삽입하기 (0)	2012.11.07
HTML element 를 jQuery Mobile 의 input field로 변환하기 (0)	2012.11.07
다이나믹하게 input field 생성하기 (0)	2012.11.07
테이블 manipulation 예제 (0)	2012.11.06
다이나믹하게 새 row 를 insert 하기 (0)	2012.11.06
다이나믹하게 새로운 컬럼 insert 하기 (0)	2012.11.06
Ajax 로 테이블 삽입하기 (0)	2012.11.06
HTML element 를 jQuery Mobile table 로 변환하기 (0)	2012.11.02
다이나믹하게 테이블 생성하기 (0)	2012.11.02

jQuery Mobile/JQM Tutorial

다이나믹하게 새 row 를 insert 하기

2012. 11. 6. 09:33 | Posted by 솔웅

Dynamically insert a new row

jQuery Mobile 에서는 새로운 라인의 시작을 가리키기 위해 <div> element 에 ui-block-a CSS class 를 사용합니다. 이전에도 다뤘었구요.

Dynamic insertion of a new line in a table

<!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 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 id=table class=ui-grid-b>

      <div class=ui-block-a>Element 1.1</div>

      <div class=ui-block-b>Element 1.2</div>

      <div class=ui-block-c id=insert>Element 1.3</div>

      <div class=ui-block-a>Element 2.1</div>

      <div class=ui-block-b>Element 2.2</div>

      <div class=ui-block-c>Element 2.3</div>

    </div>

  </div>

</div>

</body>

</html>

<script>

var html = "<div class=ui-block-a> Element 1bis.1 </div>";

html += "<div class=ui-block-b> Element 1bis.2 </div>";

$("#insert").after (html);

</script>

tistory445_01.html

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

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

Ajax 로 input fields 삽입하기 (0)	2012.11.07
HTML element 를 jQuery Mobile 의 input field로 변환하기 (0)	2012.11.07
다이나믹하게 input field 생성하기 (0)	2012.11.07
테이블 manipulation 예제 (0)	2012.11.06
테이블에서 이벤트 다루기 (0)	2012.11.06
다이나믹하게 새로운 컬럼 insert 하기 (0)	2012.11.06
Ajax 로 테이블 삽입하기 (0)	2012.11.06
HTML element 를 jQuery Mobile table 로 변환하기 (0)	2012.11.02
다이나믹하게 테이블 생성하기 (0)	2012.11.02
버튼 관련 예제 파일 들 (0)	2012.10.31

IT 기술 따라잡기

공지사항

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

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

Input field 를 customize 하기

Change the appearance of an input field that does not have focus

Change the appearance of an input field that has focus

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

input field에서 이벤트 관리하기

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

input field 에 값 할당하기

One line and multiple lines inputs

Search field

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

Ajax 로 input fields 삽입하기

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

HTML element 를 jQuery Mobile 의 input field로 변환하기

Input on one line

Input on multiple lines

Search field

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

다이나믹하게 input field 생성하기

Input on one line

Input on multiple lines

Search field

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

jQuery Conference Asia 2012 이벤트 당첨자 발표

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

테이블 manipulation 예제

A main menu as images in a table

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

테이블에서 이벤트 다루기

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

다이나믹하게 새 row 를 insert 하기

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

티스토리툴바