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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

Ajax 로 slider 삽입하기

2012. 12. 11. 20: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




반응형