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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

selection list 관련 예제들

2012. 11. 18. 03:43 | Posted by 솔웅


반응형

Examples of manipulation of selection lists



Communicate the value of a selection list on the server by Ajax


이번에 만들 selection list 는 먼저 아파트 type 을 정하고 이것을 서버로 보내서 그에 대한 response 를 받는 로직입니다. 우리는 그 response 를 window 에 display 할 겁니다.


Transmit the type of apartment 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>

    <select data-native-menu=false>

      <optgroup label=Basic>

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

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

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

      </optgroup>

      <optgroup label=Premium>

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

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

      </optgroup>

    </select>

  </div>

</div>


</body>

</html>


<script>


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

{

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

  

  $.ajax (

  

    url : "action.php", 

    data : { type : type },

    complete : function (xhr, result)

    {

      if (result != "success") return;

      var response = xhr.responseText;

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

    }

  });   

});


</script>


서버에 아파트 type 을 보내기 위해 change event 를 사용합니다. 그러니까 selection list 에 어떤 change 가 일어날 때만 정보가 전달 될 겁니다. 서버로부터 받은 response 는 append (response) 사용해서 window에 삽입됩니다.


action.php file


<?
$type = $_REQUEST["type"];
echo utf8_encode ("<p> The type of apartment is $type </p>");
?>



action11.php


tistory476_01.html


몇번 아이템을 선택하고 나면 아래와 같은 화면이 될 겁니다.




Use a submit button to transmit information


서버의 response를 display 하기 위해서 Ajax 메카니즘을 사용하는 대신에 form 을 validate 하고 서버에서 return 된 선택된 리스트 아이템의 값을 가지고 있는 값을을 새 window 에 display 할 수도 있을 겁니다.


Pass the value of the selected item when clicking the OK button


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

    <form action=action.php>

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

      <select data-native-menu=false name=type>

        <optgroup label=Basic>

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

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

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

        </optgroup>

        <optgroup label=Premium>

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

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

        </optgroup>

      </select>

      <input type=submit value=OK>

    </form>

  </div>

</div>


</body>

</html>


<script>


</script>





name attribute 를 <select> element 에 추가했습니다. 그래서 selected value 는 form validation으로 해서 전송 됩니다.


action.php file

<?
$type = $_REQUEST["type"];
?>

<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />
</head> 

<body>
<div data-role=page id=win2 data-add-back-btn=true>
  <div data-role=header>
    <h1>Window 2</h1>
  </div>
  
  <div data-role=content>
    <p> Selected apartment : <?= $type ?> </p>
  </div>
</div>
</body>

</html>


action12.php

tistory477_01.html



Add a list item after a click of a button


이제 dynamically 삽입된 new element를 display 하겠습니다. 새 element 는 id 가 add인 버튼을 클릭하면 되도록 만들겠습니다.


Add an item to the selection list after clicking a button


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

    <a href=# data-role=button id=add>

        Add "6 bedrooms" to the list </a>

  </div>

</div>


</body>

</html>


<script>


$("#add").bind ("click", function (event)

{

  $("select").append ("<option value=6> 6 bedrooms </option>");

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

});


</script>

tistory476_03.html

Make a treatment when clicking on any element of the selection list


change event는 selection list 의 어떤 값들이 바뀔 경우에만 적용이 됩니다. 유저가 이미 선택한 아이템을 선택한다면 이 change event 는 발생하지 않을 겁니다.


만약에 아이템을 click 했을 때를 기준으로 뭔가를 할 수 있다면 좋겠죠? 아래 예제에서는 클릭했을 때 그 리스트 아이템을 보여 줄겁니다. 이 경우에는 그 아이템이 현재 선택 된 아이템이라도 이벤트가 발생할 겁니다.


Display the content of the item clicked


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

      <optgroup label=Basic>

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

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

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

      </optgroup>

      <optgroup label=Premium>

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

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

      </optgroup>

    </select>

  </div>

</div>


</body>

</html>


<script>


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

{

  $(".ui-li:not(.ui-li-divider)").live ("vclick", function (event)

  {

    alert ($(this).find ("a").text ());

    event.stopPropagation ();

  });

});


</script>

tistory476_04.html


자바스크립트가 몇 줄 안되지만 좀 설명할 부분이 있습니다. 일단 리스트가 생성될 때까지 기다려야 합니다. (selectmenucreate event). 그렇지 않으면 HTML 코드는 jQuery Mobile 에 의해 전환되기 전이 됩니다. 그리고 jQuery Mobile 에 의해 생성된 <li> elements 들이 아직 DOM tree 에 있는 상태가 아니게 되는 거죠.


selector  "ui-li:not (.ui-li-divider)"는 리스트 아이템입니다. (separator 가 아니죠). bind () method 대신 live () method 를 사용하는 것은 jQuery Mobile 이 아이템이 select 됐을 때 온전하게 다시 display 하도록 하기 위해서 입니다. 만약 bind () click 이벤트는 오직 첫번째 selection 에서만 적용이 될 겁니다.


마지막 단계에서는 jQuery Mobile 에 의해 만들어진 <a> item 을 retrieving 함으로서 선택된 아이템의 내용을 display 하게 됩니다.
event.stopPropagation () instruction 은 click 이 여러번 인식되는 것을 방지합니다.


이제 우리가 4 bedrooms을 선택하면 alert 화면에 4 bedrooms라는 메세지가 display 됩니다.


(제 경우에 저 위의 예제는 잘 안되네요. 어떨 때 될 때도 있는데... 혹시 이 예제가 왜 잘 안되는지 아시는 분은 댓글로 좀 알려 주세요.)



선택된 아이템 내용을 retrieve 하는 것보다 그 value 를 다룰 수도 있습니다. 해당 <option> element 에 있는 value attribute 를 표시할 수도 있습니다.


Retrieve the value of the selected item (only if the list is closed)


alert ($("select").val ()); // Displays "4"



반응형

selectiion list customize 하기

2012. 11. 17. 22:15 | Posted by 솔웅


반응형
Customize selection lists


Firebug를 이용해서 jQuery Mobile에 의해 만들어진 selection list 내부의 HTML element들에 대해 assign 된 CSS 클래스들을 볼 수 있습니다. 여기서는 data-native-menu attribute가 "false"로 된 부분만 살펴보기로 하겠습니다. (native 가 아닌)

아래 샘플 코드가 있습니다. 이 코드는 엘리먼트의 그룹들을 구분해서 리스트를 display 합니다.



A selection list with groups of elements



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

      <optgroup label=Basic>

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

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

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

      </optgroup>

      <optgroup label=Premium>

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

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

      </optgroup>

    </select>

  </div>

</div>


</body>

</html>


tistory475_01.html


이 selection list 는 아래와 같이 display 될 겁니다.





Firebug에서 보시면 jQuery Mobile 에 의해 생성된 HTML code 를 보실 수 있습니다.





ui-selectmenu CSS class 가 있는 <div> element 안에는 ui-selectmenu-list class 가 있는 <ul> element 가 있습니다. 그 안에는 display 된 리스트 아이템들에 해당하는 <li> elements 들이 있구요. 각
<li> elements 들에는 ui-li and ui-btn classes 들이 있습니다. 그리고 그 리스트 안에 selected 아이템에는 ui-btn-active class 가 있구요.


<optgroup> element를 사용해서 jQuery MObile에 의해 삽입된 separator element 에는 ui-li, ui-li-divider, ui-btn and ui-bar-b classe 들이 있습니다.


이 CSS class들을 이용해서 selection list 를 새롭게 꾸며보겠습니다.


Styling elements of the 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>

  

  <style type=text/css>

     .ui-selectmenu {

       padding : 15px;

     }

     .ui-li-divider.ui-bar-b {

       color : red;

       background : black;

     }

     .ui-li:not(.ui-li-divider) {

       font-style : italic;

     }

     .ui-li.ui-btn-active {

       color : white;

       background : grey;

     }

  </style>

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

      <optgroup label=Basic>

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

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

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

      </optgroup>

      <optgroup label=Premium>

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

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

      </optgroup>

    </select>

  </div>

</div>


</body>

</html>


tistory475_02.html





반응형


반응형
Manage events on selection lists




change event 는 리스트의 selected value 가 바뀌었을 때를 알려 줍니다. 이 이벤트는 jQuery의 bind () method 를 사용해서 구현하시면 됩니다.


Using the change event in the 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>

    <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 ("change", function (event)

{

  alert ($(this).val ());

});


</script>




tistory474_01.html


반응형


반응형
Insert and delete items in a selection list



리스트에서 아이템을 추가하거나 지우는 것은 jQuery 의 메소드를 사용해서 처리합니다. 예를 들어 append ()는 리스트의 끝에  아이템을 추가하고 remove () 는 그 메소드가 붙은 아이템을 제거합니다.


Adding and deleting items from the 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>

    <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").append ("<option value=6> 6 bedrooms </option>");

$("option[value=1]").remove ();


</script>

tistory471_01.html








리스트의 첫번째 아이템은 지워졌습니다.  그리고 6 bedrooms는 추가 됐죠.

어쨌든 이 작업은 항상 완벽하게 동작하지 않을 수도 있습니다. 왜냐하면 elements 가 추가되거나 삭제될 때 jQuery Mobile 에 리스트가 아직 생성되지 않았기 때문이죠. 그러니까 이것이 HTML code 로 전환될 때 리스트에 우리가 추가하고 삭제한 것이 적용되서 만들어지게 되는 것이죠. 만약 리스트가 create 되고 난 다음에 이 추가나 삭제를 했다면 여러분은 여기에 추가적으로 selectmenu ("refresh", true) method 를 사용해야 합니다. 여기서 true value 는 파라미터처럼 전달이 되는데요 리스트를 rebuild 하도록 하는 겁니다.


Insert or remove items after the list 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").append ("<option value=6> 6 pièces </option>");

  $("option[value=1]").remove ();

  $("select").selectmenu ("refresh", true);    // true = forceRebuild

});


</script>

tistory471_02.html





반응형


반응형
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




반응형