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

최근에 받은 트랙백

글 보관함

Ajax 로 slider 삽입하기

2012. 12. 11. 03:48 | Posted by 솔웅


Insert a slider by Ajax


Ajax를 통해서 slider 를 만들  HTML 코드를 retrieve 해서 기존 HTML 페이지에 넣예제를 보겠습니다.


Insert a slider 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> Indicate the number of rooms: </span><br />

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

    

    $("input").slider ();

    $("input").textinput ();

  }

});  


</script>



보시면 slider () textinput () methods 가 사용됐습니다.

  • slider () method는 서버로 부터 받은 <input> element 를 jQuery Mobile convention에 맞는 slider 로 변환합니다. 만약 이 메소드를 사용하지 않으면 <input> element는 일반적인 input field 로 표시될 겁니다.

  • textinput () method는 slider 의 왼쪽에 jQuery Mobile style 의 input field 를 표시합니다. 이 메소드를 사용하지 않으면 jQuery Mobile 스타일이 아닌 input field 가 표시될 겁니다.



action.php file


<?
$html = "";
$html .= "<input type=range min=1 max=5 />";
echo utf8_encode ($html);
?>


slider () textinput ()메소드의 순서는 상관 없습니다. 이 두 메소드는 trigger ("create") method 를 call 하는걸로 대체할 수 있습니다.


Using the create event to create the slider by Ajax


$.ajax (


  url : "action.php", 

  complete : function (xhr, result)

  {

    if (result != "success") return;

    var response = xhr.responseText;

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

    

    $("#home").trigger ("create");

  }

});

>

action22.php

tistory528_01.html




반응형

Comment


Turning an HTML element into a jQuery Mobile slider




지난 글에서 다룬 예제를 Firebug로 보겠습니다. jQuery Mobile 이 변환시킨 코드입니다.





<input> element 에 data-type="range" attribute 가 있습니다. 그리고
type attribute는 "number"입니다. 이것은 slider 전에 있는 input field 와 관계가 있습니다. <div> element 에는 ui-slider class 가 있고 그 안에
ui-slider-handle class 가 포함돼 있는 <a> link 가 있습니다. 이것은 slider 의 축을 오가는 버튼을 꾸며 줍니다.


반응형

Comment

  1. ㅎㅎㅎ 어떤 이유라도,,, 투표율은 많이 늘어야죠...

    • 솔웅 2012.12.11 18:27 신고

      예 재외국민 투표율도 70%가 넘었네요.
      한국 본토에서는 80% 가 넘을 수 있겠죠? ^^


slider를 만드는 것은 jQuery methods 들을 사용해서 이뤄 집니다.
slider () method 는 슬라이더를 사용할 수 있도록 하는 jQuery Mobile 에 추가 된 메소드 입니다. 슬라이더는 표slider component 와 연계 돼 있습니다.




Dynamically create a slider



slider는 <input> element에 type attribute "range"로 넣어서 생성합니다.  data-role="slider" or data-type="range" attributes 들도 사용할 수 있습니다. min and max attributes 들은 슬라이더의 최소값과 최대값을 세팅하는 경우에 필수로 들어가야 하는 항목들 입니다.


Dynamic creation of a slider


<!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> Indicate the number of rooms: </span><br />

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<input type=range min=1 max=5 />";

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


</script>






tistory521_01.html



jQuery Mobile 에서 slider 는 축을 따라서 버튼을 움직일 때의 슬라이더 값을 표시하는 input field 와 항상 같이 있다는 점을 유념해 주세요. 이 input field 를 표시하지 않을 수도 있습니다.

이 부분은 다음에 다룰께요.




반응형

Comment

switch 관련 예제들

2012. 12. 7. 12:18 | Posted by 솔웅


Examples of manipulation of switches




switch 의 값을 서버로 전달하고 다른 윈도우를 display 합니다.

여기서 서버로 클릭된 스위치의 값을 전달할 겁니다. 그러면 서버는 그 값을 가지고 있는 새 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> Would you like an apartment: </span>
<select data-role=slider>
<option value=no> No </option>
<option value=yes> Yes </option>
</select>
</div>
</div>

</body>
</html>

<script>

var value = $("select").val ();
$("select").bind ("change", function (event)
{
if (value == $(this).val ()) return;
value = $(this).val ();

var data = { };
data["value"] = value;

$.mobile.changePage ("action.php", { data : data } );
});

</script>




switch를 클릭할 때마다 서버를 call 해서 스위치의 값을 가지고 있는 새 window 를 보여줍니다. 초기 단계에 그 값이 이전것과 같은 것인지 아닌지를 체크합니다. 


action.php file


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

<!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> Switch value: <?= $value ?> </p>
</div>
</div>
</body>

</html>


   

스위치를 클릭하면 아래와 같은 화면을 보실 겁니다.





action20.php

tistory518_01.html



정보를 전달할 때 submit button 사용하기

스위치를 클릭할 때마다 정보를 전달하는 것이 아니라 사용자가 Submit 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> Would you like an apartment: </span>
<select data-role=slider name=switch>
<option value=no> No </option>
<option value=yes> Yes </option>
</select>
<input type=submit value=OK>
</form>
</div>
</div>

</body>
</html>

<script>

</script>


 

OK 버튼을 누르면 스위치가 form 에 insert 됩니다. 그리고 action.php 파일을 call 하죠. 자바스크립트 부분은 없습니다. 모든 프로세스는 jQuery Mobile 에 의해서 진행됩니다.

이전 예제랑 비교해서 반드시 해야 할 게 있습니다. 바로  <select> element  에  name attribute 를 명시해아 하는 겁니다. 이 attribute와 그 값이 서버로 전달이 될 것이기 떄문이죠.

action.php file 


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

<!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> Switch value: <?= $switch ?> </p>
</div>
</div>
</body>

</html>


action21.php

tistory518_02.html



반응형

Comment

Switch 커스터마이징 하기

2012. 12. 7. 11:54 | Posted by 솔웅



 

switch는 jQuery Mobile 에 의해 제공되는 CSS class들을 이용해서 customizing 할 수 있습니다. 우리는 아래 DOM tree 에 있는 CSS 들을 수정해서  switch Yes / No: 를 display 해 보겠습니다.




switch를 customizing 하기 위해 위 CSS 클래스들 중 일부를 사용하겠습니다. 특히  ui-slider class 는 switch 의 width 와 관련 일반적인 appearance 를 관리합니다.  ui-slider-label class 는 switch 에서 텍스트를 display 하기 위해 사용됩니다. 이 클래스가   ui-btn-active 와 같이 어울리면 switch 가 ON 인 상태에서의 appearance 를 관리합니다. 마지막으로  ui-slider-handle class 는 switch 의 cursor 를 움직이는 것과 관련 있습니다.


Use CSS classes to style the switch


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

    span.ui-slider-label {

      color : red;

      font-style : italic;

    }

    span.ui-slider-label.ui-btn-active {

      color : gainsboro;

    }

    .ui-slider-handle {

      background : grey;

    }

    .ui-slider {

      width : 50% !important; 

    }

  </style>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <span> Would you like an apartment: </span>

    <select data-role=slider>

      <option value=no> No </option>

      <option value=yes> Yes </option>

    </select>

  </div>

</div>


</body>

</html>



tistory517_01.html

ui-slider class width property를 할 때   !important 의 을 잘 요. 이것은 jQuery Mobile 이 CSS 안에서 이 프로퍼티를 redefine 하기 때문에 필요합니다. 만약  !important directive 가 있지 않다면 우리가 만든  CSS가 정의 되지 않을 겁니다.






반응형

Comment


Manage events on switches




change event는 switch 의 값이 바뀌면 이에 대해 알려줄 수 있도록 하는 기능이 있습니다. 이 이벤트는 스위치가 클릭 됐을 때 일어납니다. switch 의 왼쪽을 클릭했는지 오른쪽을 클릭했는지 상관없change event가 일어납니다.

주의 : jQuery Mobile 의 버전에 따라 switch 에 한번 클릭했는데 두번 change events 가 발생 할 수도 있습니다. switch 의 어느 부분을 클릭했느냐에 따라 다른데요. 이 문제를 해결하시려면 아래 예제를 잘 봐 주세요.


Retrieve the new value of the switch when clicked


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


아래 예제는 change event 를 사용해서 switch 를 클릭했을 때 이것을 어떻게 처리할지에 대한 예제 파일입니다. switch를 클릭할 때마다 그 값이 아래에 출력됩니다.


Manage the change event of a switch


<!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> Would you like an apartment: </span>

    <select data-role=slider>

      <option value=no> No </option>

      <option value=yes> Yes </option>

    </select>

    <div id=txt></div>

  </div>

</div>


</body>

</html>


<script>


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

{

  $("#txt").append ($(this).val () + ", ");

});


</script>






tistory506_03.html




반응형

Comment


Assign and retrieve the value of a switch



Switch already present in the HTML code


switch는  single <select> element 입니다. 이런 elements 들을 관리하는 것은 val (value) method를 사용합니다. selection list 에 값을 할당하거나  val () method를 사용해서 현재 select 된 값을 retrieve 하게 되는거죠. 두 경우 모두 <option> element 의 value attribute 에 정의된 값입니다.


Set the switch to Yes


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


Retrieve the current value of the switch


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


이 메소드를 사용해서 프로그램이 시작할 때 switch 를 Yes로 만들어 보죠.


Assign and retrieve the value of a switch


<!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> Would you like an apartment </span>

    <select data-role=slider>

      <option value=no> No </option>

      <option value=yes> Yes </option>

    </select>

  </div>

</div>


</body>

</html>


<script>


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

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


</script>



tistory505_01.html


Switch dynamically created


val (value) 와 val () methods 들도 이런 경우 사용할 수 있습니다. 아마 이 경우 값이 바뀐 후에도 switch display 가 refresh 되지 않아서 값이 바뀌지 않을 겁니다. 이럴 경우 slider ("refresh") method를 사용해서 refresh 합니다.


Set the switch to Yes


<!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> Would you like an apartment: </span>

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<select data-role=slider>";

html +=   "<option value=no> No </option>";

html +=   "<option value=yes> Yes </option>";

html += "</select>";


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


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

{

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

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

});


</script>



tistory505_02.html






윈도우가 생성될 때 한번 switch 를 HTML 코드로 생성할 수 도 있습니다.  (pagecreate event). 경우 HTML 은 jQuery Mobile에 의해 변환되서 jQuery Mobile 형식에 맞는 switch 를 display 하게 되죠. 이를 위해 <select> element 에서 slider () method 를 call 해야 합니다.


Create the switch 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> Would you like an apartment: </span>

  </div>

</div>


</body>

</html>


<script>


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

{

  var html = "";

  html += "<select data-role=slider>";

  html +=   "<option value=no> No </option>";

  html +=   "<option value=yes> Yes </option>";

  html += "</select>";

  

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

  

  $("select").slider ();

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

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

});


</script>



tistory505_03.html






반응형

Comment

Ajax로 switch 삽입하기

2012. 12. 4. 05:03 | Posted by 솔웅


Insert a switch by Ajax


HTML 이나 JavaScript 를 직접 사용해서 switch 를 만드는 것 보다 Server 쪽에 Ajax를 요청하고 응답을 받아서 만들 수 있습니다.


Create a switch 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> Would you like an apartment: </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").slider ();

  }

});  


</script>



slider () method는 switch 와 관련된 <select> element 에사용되고 서버로부터 switch를 display 할 HTML 코드를 받아서 HTML 코드를 변환시켜주는 역할을 합니다. 만약 이 메소드가 call 되지 않으면 simple selection list (<select> element 에 해당하는)가 display 됩니다.


action.php file


<?
$html = "";
$html .= "<select data-role=slider>";
$html .= "<option value=no> No </option>";
$html .= "<option value=yes> Yes </option>";
$html .= "</select>";
echo utf8_encode ($html);
?>


action19.php

tistory504_01.html






반응형

Comment

  1. Ajax 를 직접 실행하는 것은 너무 오래전에 해본것 같네요...
    요즘엔 프레임워크에서 다들 해주니...ㅎㅎㅎ


Turning an HTML element into a jQuery Mobile switch



이전 글에 있는 예제의 소스코드를 볼까요. Firebug로 보시면 jQuery Mobile이 그 소스코드를 어떻게 변환했는지 보실 수 있습니다.






<select> element는 항상 있습니다. 하지만 ui-slider CSS class가 있는
<div> element는 jQuery Mobile에 의해 생성됩니다.

그렇게 함으로서 <select> selection list가 다른 모습으로 보일 수 있도록 바뀌는 겁니다. 이 리스트는 이제 ui-slider-switch class를 가지고 있는 것을 보실 수 있을 겁니다. 이것은 <select> element를 숨길수 있도록 해 줍니다. (display property가 "none"으로 세팅되도록 정의된 CSS class)



반응형

Comment


switch 를 만드는 것은 주로  jQuery method들을 이용해서 만듭니다.
data-role="slider" attribute 가 있는 <select> element를 사용하면 switch 가 됩니다. 이것을 관리하기 위해서 jQuery Mobile에서는 slider () method를 제공합니다. switch는 standard slider component와 연결 돼 있습니다.



Dynamically create a switch


data-role="slider" attribute가 있는 <select> element 를 사용해서 switch 를 만듭니다. switch 의 두개 값을 나타내기 위해 두개의  <option> elements도 사용합니다.


Dynamic creation of a switch


<!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> Would you like an apartment: </span>

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<select data-role=slider>";

html +=   "<option value=no> No </option>";

html +=   "<option value=yes> Yes </option>";

html += "</select>";


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


</script>






tistory502_01.html



반응형

Comment