IT 기술 따라잡기

다이나믹하게 selection list 생성하기

2012. 11. 11. 07:17 | Posted by 솔웅

selection list 들은 jQuery Mobile 에 의해서 처리됩니다. jQuery Mobile 은 <select> element 를 사용하고 한개 이상의 <option> elements 를 포함합니다. jQuery 의 standard method들도 jQuery Mobile 에 의해 추가된 selectmenu () method 처럼 유용합니다. selection list들은 standard selectmenu component 와 관계되어 있습니다.

Dynamically create a selection list

selection list를 생성하려면 한개 이상의 <option> elements 를 포함한 <select> element 를 넣으면 됩니다.

value attribute는 <option> elements 의 필수 요소입니다. 이것은 jQuery Mobile 에 의해 리스트의 일 부분으로 간주 됩니다. jQuery Mobile convention 처럼 리스트를 display 한다면 true 입니다. 하지만 그 리스트가 브라우저의 native aspect 로 display 되면 true 가 아닙니다. 이 후의 예제들은 jQuery Mobile에 의해 improve된 non-native로 display 할 겁니다.

Dynamically creating a selection list

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

    <span> Choose an apartment type: </span>

  </div>

</div>

</body>

</html>

<script>

var html = "";

html += "<select data-native-menu=false>";

html +=   "<option value=1> 1 bedroom </option>";

html +=   "<option value=2> 2 bedrooms </option>";

html +=   "<option value=3> 3 bedrooms </option>";

html +=   "<option value=4> 4 bedrooms </option>";

html +=   "<option value=5> 5 bedrooms </option>";

html += "</select>";

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

</script>

tistory461_01.html

이 예제를 실행하면 아래와 같이 보일 겁니다. 버튼을 누르면 리스트가 열릴 겁니다.

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

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

selection list 추가하기와 지우기 (0)	2012.11.15
selection list 에서 select 된 아이템 값 할당하거나 가져오는 방법 (0)	2012.11.15
selection 리스트 열고 닫기 (0)	2012.11.13
Ajax 로 selection list 삽입하기 (0)	2012.11.12
HTML element를 jQuery Mobile selection list로 바꾸기 (0)	2012.11.12
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

jQuery Mobile/JQM Tutorial

input field 관련 예제들

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

Examples of manipulation of input fields

Communicate the value of an input field on the server by Ajax

이번에 만들 프로그램은 이름을 입력하고 엔터키를 치면 이것이 서버로 전달되고 그 이름이 response 되는 겁니다. 우리는 그 response를 화면에 뿌려 줄 겁니다. 서버와의 커뮤니케이션이 양방향으로 원활히 이루어 지는 것을 보실 수 있을 겁니다.

Transmit by Ajax the name entered

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

  </div>

</div>

</body>

</html>

<script>

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

{

  var name = $(this).val ();

  $.ajax (

  { 

    url : "action.php", 

    data : { name : name },

    complete : function (xhr, result)

    {

      if (result != "success") return;

      var response = xhr.responseText;

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

    }

  });   

});

</script>

예제를 보시면 change event를 사용해서 서버로 name 을 전달한 것을 보실 수 있습니다. 이 name 이 변경됐을 경우만 server 는 response 할 겁니다. server 는 window에 append (response)를 사용해서 insert 된 것만 response 할 것이기 때문입니다.

action.php file

<?
$name = $_REQUEST["name"];
echo utf8_encode ("<p> The name entered is $name </p>");
?>

이름을 몇개 입력하면 아래와 같은 화면을 보실 수 있을 겁니다.

action8.php

tistory460_01.html

Display the server's response in a new window

response를 받아서 같은 window에 insert 하는 것 보다 새로운 윈도우에 한번 display 해 볼까요.

Display a new window containing the server response

<!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 1 </p>

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

  </div>

</div>

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

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content 2 </p>

  </div>

</div>

</body>

</html>

<script>

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

{

  var name = $(this).val ();

  $.ajax (

  { 

    url : "action.php", 

    data : { name : name },

    complete : function (xhr, result)

    {

      if (result != "success") return;

      var response = xhr.responseText;

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

      $.mobile.changePage ($("#win2"));

    }

  });   

});

</script>

action.php file

<?
$name = $_REQUEST["name"];
echo utf8_encode ("<p> The name entered is $name </p>");
?>

field에 값을 넣고 change event가 나오면 Ajax call 이 만들어지고 두번째 window 가 나타납니다.

action9.php

tistory460_02.html

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

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

selection list 에서 select 된 아이템 값 할당하거나 가져오는 방법 (0)	2012.11.15
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 를 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

jQuery Mobile/JQM Tutorial

Input field 를 customize 하기

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

Customize input fields

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

1 ··· 363 364 365 366 367 368 369 ··· 518

IT 기술 따라잡기

공지사항

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

다이나믹하게 selection list 생성하기

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

input field 관련 예제들

Communicate the value of an input field on the server by Ajax

Display the server's response in a new window

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

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' 카테고리의 다른 글

티스토리툴바