반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형
Assign and retrieve the selected items in a selection list



Selection list already present in the HTML


selection list에서 select 된 값을 retrieve 하기 위해 <select> element에 jQuery 의 val () method 를 사용합니다. 그리고 새로운 selection 을 indicate 하기 위해 val (value)를 사용합니다. multiple-selection list 의 경우에는 value 는 값들의 배열입니다. (아무것도 select 되지 않으면 empty 입니다.)


Retrieve the values associated with selected items


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

    <select data-native-menu=false multiple=multiple>

      <option value=1> 1 bedroom </option>

      <option value=2 selected=selected> 2 bedrooms </option>

      <option value=3 selected=selected> 3 bedrooms </option>

      <option value=4> 4 bedrooms </option>

      <option value=5> 5 bedrooms </option>

    </select>

  </div>

</div>


</body>

</html>


<script>


alert ($("select").val ());   // displays an array [2, 3]

$("select").val ([1, 2]);

alert ($("select").val ());   // displays an array [1, 2]


</script>


tistory470_01.html







Selection list dynamically created


val () and val (value) methods 는 selection list의 값을 retrieve 하거나 assign 하기 위해 사용됩니다. 그런데 아마 selection list 의 refresh 가 일어나지 않는 경우가 있을 겁니다. 이럴 때는 selectmenu ("refresh") method 를 사용할 필요가 있습니다.

jQuery 에서 리스트를 다이나믹하게 생성되는 것을 생각해 보세요. selectmenucreate event 와 selection list 에 새로운 값을 assign 하는 것을 보겠습니다.


Assign a value to a selection list dynamically created


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


$("select").bind ("selectmenucreate", function ()

{

  $("select").val (4);

  $("select").selectmenu ("refresh");

});


</script>


tistory470_02.html






만약 selectmenu ("refresh") instruction을 생략하면 이 리스트는 refresh 되지 않을 겁니다. 그러면 selected value 는 display 되지 않을 겁니다. (이럴 경우 리스트의 첫번째 값이 디폴트로 select 될 겁니다.)


다음 프로그램은 selectmenu ("refresh") instruction을 사용하지 않고 구현한 프로그램입니다.


Assign a value to a selection list without using selectmenu ("refresh")


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

$("select").val (4);


</script>


tistory470_03.html



이 경우에는 selectmenucreate event 를 사용하지 않습니다. 그래도 작동을 합니다. selection list 에 값이 assign 될 떄 리스트는 아직 생성되지 않았습니다. 그래서 최종 display 되기 전에 수정될 수 있는 겁니다. selectmenucreate event 에서 동작할 때는 리스트가 생성된 이후였습니다. 그래서 어떤 변화가 있으면 refresh 가 필요한 겁니다.



반응형

selection 리스트 열고 닫기

2012. 11. 13. 20:16 | Posted by 솔웅


반응형
Open and close a selection list



selection list 를 open 하려면 <select> element에 selectmenu ("open") method 를 사용하시면 됩니다. 닫으려면 selectmenu ("close") method 를 사용하시구요.

이 두 메소드는 <select> element 가 data-native-menu="false" attribute 가 있는 경우에만 동작합니다. 그러니까 native selection list에 대해서는 이 메소드들을 갖고 open 하거나 close 할 수 없는거죠.

아래에는 list 가 이미 HTML 안에 있는 경우와 다이나믹하게 jQuery 에 의해 생성된 경우 이 두 메소드를 사용하는 방법을 다룰 겁니다.


Selection list already present in the HTML


Open a selection list since 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>

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

    <select data-native-menu=false>

      <option value=1> 1 bedroom </option>

      <option value=2> 2 bedrooms </option>

      <option value=3> 3 bedrooms </option>

      <option value=4> 4 bedrooms </option>

      <option value=5> 5 bedrooms </option>

    </select>

  </div>

</div>


</body>

</html>


<script>


$("select").bind ("selectmenucreate", function ()

{

  $("select").selectmenu ("open");

});


</script>



selection list 의 HTML code 는 jQuery Mobile 에 의해 수정됐습니다. 우리는 selectmenu ("open") method를 call 하기 전에 이 리스트가 완전히 생성될 때까지 기다려야 합니다. 만약 이 selection list 가 제 위치에 제대로 display 되지 않는다면 이것을 css () method를 사용해서 바꿔주어야 합니다.


Position the selection list to 25 pixels from the left


$("select").bind ("selectmenucreate", function ()

{

  $("select").selectmenu ("open");

  $(".ui-selectmenu").css ( { top : "130px", left : "25px" } );

});





tistory466_01.html


Selection list dynamically created


이제 selection list의 HTML code 를 JavaScript 를 통해 insert 하겠습니다.


Create and open 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);


$("select").bind ("selectmenucreate", function ()

{

  $("select").selectmenu ("open");

  $(".ui-selectmenu").css ( { top : "130px", left : "25px" } );

});


</script>

tistory466_02.html


약간 변형시키는 것도 가능합니다. pagecreate event (instead of before this event as above) 에서 이 HTML 코드를 insert 한다면 리스트가 insert 됐을 때 window는 이미 생성돼 있을 겁니다. 그 다음에 오리지널 HTML code 가 jQuery Mobile convention에 맞게 display 될 겁니다. 이 작업은 <select> element 에서 selectmenu () method 가 call  되면서 이루어 집니다.


Create the selection list after creating the window


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


$("#home").bind ("pagecreate", function ()

{

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

  

  $("select").selectmenu ();

  $("select").selectmenu ("open");

  $(".ui-selectmenu").css ( { top : "130px", left : "25px" } );

});


</script>


tistory466_03.html


반응형

Ajax 로 selection list 삽입하기

2012. 11. 12. 22:30 | Posted by 솔웅


반응형
Insert a selection list by Ajax



selection list를 Ajax 를 통해 받아서 이것을 window에 insert 하겠습니다.


Retrieve a selection list 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>

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

  </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);

    $("select").selectmenu ();

  }

});   


</script>



<select> element. 에 있는 selectmenu () method의 사용법을 잘 보세요. 이 메소드가 오리지널 HTML code를 jQuery Mobile 스럽게 display 하는 HTML 로 변환시키는 일을 합니다. 그리고 버튼을 클릭하면 selection list 가 열릴 겁니다.


action.php file


<?
$html = "";
$html .= "<select data-native-menu=false data-icon=plus data-iconpos=left>";
$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>";
echo utf8_encode ($html);
?>





selectmenu () method를 call 하는 것을 빼면 jQuery Mobile 에 의한 변환은 일어나지 않을 겁니다. 그러면 classic style의 selection list 가 나타나겠죠.




action10.php


tistory463_01.html



반응형


반응형
Turning an HTML element into a jQuery Mobile selection list

다음의 두가지 경우를 생각해 봅시다.

  •  먼저 native display 의 selection list 를 사용하는 경우. 이 경우는 <select> element에 있는 data-native-menu attribute 가 "false" 가 아닙니다.

  •   그 다음 경우는 display 가 non-native를 사용하는 경우. 예를 들어 jQuery Mobile에 의해 좀 더 improve 된 selection list를 display 하는 경우. 이 경우는 data-native-menu attribute 를 "false"로 세팅합니다.


Using the native display selection lists


이전의 예제를 사용하겠습니다.  <select> element description 안에 data-native-menu="false" attribute를 넣습니다.


<select> element without the data attribute-native-menu="false"


<script>

var html = "";

html += "<select>";

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>




Firebug로 jQuery Mobile에 의해 만들어진 HTML 은 아래와 같습니다.




original <select> element가 두개의 <div> elements 안에 둘러 쌓여져 있습니다. 하나는 ui-select CSS class 이고 다른 하나는 ui-btn class 입니다. 그것들은 selection list를 open 할 수 있는 window의 버튼으로 표시됩니다. 위의 ui-btn-inner CSS class 가 있는 <span> element는 버튼에 display 된 list안에 선택된 아이템과 연관돼 있습니다.


Using the improved display selection lists


이제 <select> element description에 data-native-menu="false" attribute를 넣어 보겠습니다.


<select> element with the data-native-menu="false" attribute


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


tistory462_01.html




 

다음을 제외하고는 위의 예제와 같습니다.


  • ui-btn class 가 있는 <div>는 이제 <a> element 입니다. 그리고 ui-btn class를 가지고 있습니다. 이것은 selection list 를 open 하기 위한 버튼이 됩니다.
  •  ui-selectmenuui-selectmenu-hidden CSS classes 가 있는 <div> element가 다른 element들 다음에 insert 됐습니다. 여기에는 여러 <li> elements를 가지고 있는 <ul> element가 포함돼 있습니다. 이 <div> element는 버튼을 누르면 나올 리스트입니다. 이제 native display 보다 더 style 된 나아진 display 를 보시게 될 겁니다.


ui-selectmenu-hidden class는 리스트가 현재 display 되지 않는 것을 가리킵니다. (이 리스트는 버튼이 클릭 됐을 때 보여질 겁니다.) 이것을 하기 위해 이 클래스는 element 의 topleft CSS properties 를 -9999px로 정의했습니다. 이것은 화면 밖 어딘가에 있을 겁니다. 버튼을 클릭하면 jQuery Mobile 은 이 CSS class를 없앱니다. 그리고 element 이 topleft를 window안에 그 list를 display 합니다.

반응형


반응형

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



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





반응형

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




반응형

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





반응형


반응형
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 은 연결되지 않을 겁니다.



반응형

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 도 할당된 값으로 화면에 표시될 겁니다.






반응형

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






반응형