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

최근에 받은 트랙백

글 보관함

accordion menu Customizing 하기

2012. 12. 22. 02:19 | Posted by 솔웅


Customize accordion menus




이전 글에서 언급했던 CSS 를 이용해서 accordion menu 를 customizing 할 수 있습니다. title 과 content 두 부분 모두를 customizing 한 예제입니다.


Styling accordion menus


<!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-collapsible-heading span.ui-btn-text {

      font-style : normal;

      color : red;

    }

    .ui-collapsible-heading-collapsed span.ui-btn-text{

      font-style : italic;

      color : black;

    }

    .ui-collapsible-content {

      background : black;

      color : white;

      text-align : center;

    }

  </style>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <div id=id1 data-role=collapsible>

      <h1>Menu 1 : Click to open / close</h1>

      <p> Paragraph 1.1 </p>

      <p> Paragraph 1.2 </p>

      <p> Paragraph 1.3 </p>

    </div>

    <div id=id2 data-role=collapsible>

      <h1>Menu 2 : Click to open / close</h1>

      <p> Paragraph 2.1 </p>

      <p> Paragraph 2.2 </p>

      <p> Paragraph 2.3 </p>

    </div>

  </div>

</div>


</body>

</html>



tistory560_01.html




반응형

Comment


Test whether an accordion menu is open or closed




accordion menu 가 닫혔을 때 jQuery Mobile 은 그 안의 내용이 안 보이도록 ui-collapsible-content class 가 있는 <div> element 에 ui-collapsible-content-collapsed CSS class 를 추가 합니다. 이 추가된 CSS class 는 display CSS property 를 none으로 세팅합니다. 이것은 메뉴의 내용을 숨기도록 하죠.


또한 menu title 에도 ui-collapsible-heading-collapsed class를 할당합니다. 메뉴가 닫혔다는 것을 가리키기 위해서죠.


메뉴가 열렸는지 닫혔는지를 테스트 하려면 <h1> element가 title 을 defining 하고 있는지를 보던지 content 를 defining 하는 <div> element에 ui-collapsible-heading-collapsed (for title) or ui-collapsible-content-collapsed (for content) classes 가 있는지 없는지 살펴보면 됩니다. 이 클래스들 중 하나라도 있으면 메뉴는 닫혀있는 것이고 아니면 열려 있는 겁니다.


아래 예제는 버튼을 사용하는 window 의 accordion menu 의 상태를 display 하는 겁니다.


View the status of the accordion menu


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

    <div id=id1 data-role=collapsible>

      <h1>Menu 1 : Click to open / close</h1>

      <p> Paragraph 1.1 </p>

      <p> Paragraph 1.2 </p>

      <p> Paragraph 1.3 </p>

    </div>

    <div id=id2 data-role=collapsible>

      <h1>Menu 2 : Click to open / close</h1>

      <p> Paragraph 2.1 </p>

      <p> Paragraph 2.2 </p>

      <p> Paragraph 2.3 </p>

    </div>

    <a id=btn href=# data-role=button> Indicate the status of menus </a>

  </div>

</div>


</body>

</html>


<script>


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

{

  var txt = "";

  if ($("#id1 h1.ui-collapsible-heading-collapsed").length) 

    txt += "Menu 1: closed\n";

  else 

    txt += "Menu 1: open\n";

    

  if ($("#id2 h1.ui-collapsible-heading-collapsed").length) 

    txt += "Menu 2: closed\n";

  else 

    txt += "Menu 2: open\n";

    

  alert (txt);

});


</script>

tistory555_01.html


각 menu title 에 ui-collapsible-heading-collapsed class 가 있는지 여부를 가립니다. 만약 있으면 이 메뉴는 닫힌 상태고 그렇지 않으면 열린 상태입니다.







반응형

Comment


Open and close an accordion menu


accordion menu 를 열고 닫는 것은 title 부분을 클릭하면 됩니다. 그리고 trigger ("click") method를 사용해서 그 title  부분이 클릭된것 같은 이벤트를 만들어 낼 수도 있습니다.


<h1> title 내에는 ui-collapsible-heading CSS class 가 있고 <a> link 에는 ui-collapsible-heading-toggle class 가 있습니다.

이 두 element 들에 click event 를 사용해 보겠습니다.


아래 예제에는 버튼을 달아서 열고 닫고 하는 동작을 하도록 합니다.


Open / close accordion menus managing the click on the <h1> element


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

    <div id=id1 data-role=collapsible>

      <h1>Menu 1 : Click to open / close</h1>

      <p> Paragraph 1.1 </p>

      <p> Paragraph 1.2 </p>

      <p> Paragraph 1.3 </p>

    </div>

    <div id=id2 data-role=collapsible>

      <h1>Menu 2 : Click to open / close</h1>

      <p> Paragraph 2.1 </p>

      <p> Paragraph 2.2 </p>

      <p> Paragraph 2.3 </p>

    </div>

    <a id=btn href=# data-role=button> Open / close menus </a>

  </div>

</div>


</body>

</html>


<script>


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

{

  $("h1.ui-collapsible-heading").trigger ("click");

});


</script>


tistory554_01.html




<h1> element 내부에서 jQuery Mobile 에 의해 <a> element 를 생성하는데요. 그 부분에서 click 을 simulate 하겠습니다.


Simulate the click on the <a> element with ui-collapsible-heading-toggle class


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

{

  $("a.ui-collapsible-heading-toggle").trigger ("click");

});



반응형

Comment

Ajax 로 accordion menu 삽입하기

2012. 12. 19. 13:33 | Posted by 솔웅


Insert accordion menus by Ajax



Ajax를 이용해서 accordion menu 를 retrieve 하실 수 있습니다.


Retrieve two accordion menus 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> This is an accordion menu </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);

    

    $("#id1, #id2").collapsible ();

  }

}); 


</script>



collapsible () method는 original HTML 코드를 jQuery Mobile 형식의 accordion menu 로 display 할 수 있도록 해 주는 jQuery Mobile 메소드 입니다.


action.php file


<?
$html = "";
$html .= "<div id=id1>";
$html .=   "<h1>Menu 1 : Click to open / close </h1>";
$html .=   "<p> Paragraph 1.1 </p>";
$html .=   "<p> Paragraph 1.2 </p>";
$html .=   "<p> Paragraph 1.3 </p>";
$html .= "</div>";
$html .= "<div id=id2>";
$html .=   "<h1>Menu 2 : Click to open / close </h1>";
$html .=   "<p> Paragraph 2.1 </p>";
$html .=   "<p> Paragraph 2.2 </p>";
$html .=   "<p> Paragraph 2.3 </p>";
$html .= "</div>";
$html .= "</div>";
echo utf8_encode ($html);
?>


action25.php

tistory552_01.html


collapsible () method를 call 하는 부분을 빼 먹으면 accordion menu는  jQuery Mobile 과는 상관없는 그냥 간단한 HTML element 로 display 될 겁니다.





collapsible () method를 call 하는 대신에 create event를 발생시켜서 같은 효과를 내실 수 있습니다.


Create accordion menus by calling the collapsible () method


$("#id1, #id2").collapsible ();


이 부분을 아래와 같이 하시면 됩니다.


Create accordion menus triggering create event on the window


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




반응형

Comment


Turning an HTML element into a jQuery Mobile accordion menu




이전 글에서 다룬 accordion menu 예제 파일을 실행 시킨 후 Firebug 로 jQuery Mobile에 의해 생성된 HTML 코드를 봅시다.




메뉴 title 을 가리키는 <h1> element 에는 ui-collapsible-heading-toggle class 를 가지고 있는 <a> child element 가 생성됐습니다.

이것은 title element가 클릭되면 버튼 처럼 처리 될 겁니다. 

data-role="collapsible" attribute 가 있는 <div> element 는
ui-collapsible-content CSS class 가 있는 새로운 <div> element 안에 그룹화 되었습니다?



반응형

Comment

  1. 박준희 2013.07.04 18:48

    글 잘보고갑니다! ㅎㅎ 제이쿼리모바일에 관한 정보가 많군요, 보고 참고 많이하겠습니다 빠이팅!


Accordion menus도 jQuery 메소드에 의해 관리 됩니다. 그리고 jQuery Mobile에 의해 추가된 collapsible () method도 사용됩니다. 그리고 jQuery Mobile 에 의해서 두개의 새로운 이벤트(expand and collapse)도 추가 됐습니다. Accordion menus는 collapsible standard component 연결돼 있습니다.


Dynamically create an accordion menu


accordion menu는 data-role="collapsible" attribute와 함<div> element를 사용해서 생성합니다. HTML title (eg <h1>)은 그 안에 있고 메뉴의 제목을 만들어 줍니다. 그 메뉴의 내용은 <div>안에 있는 다른 element들에 의해 표현 됩니다.


data-role="collapsible-set" attribute가 있는 다른 <div> element 안에 accordion menu 가 있다면 한 메뉴를 오픈하면 다른 메뉴들은 닫힐 겁니다. 그래서 한번에 한 메뉴만 열리게끔 만들죠. 역으로 만약 메뉴들이 data-role="collapsible-set" attribute가 있는 한개의 <div> element에 속해 있지 않으면 많은 메뉴들이 동시에 열려 있을 수 있습니다.


Create an accordion menu dynamically


<!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> This is an accordion menu </p>

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<div id=id1 data-role=collapsible>";

html +=   "<h1>Menu 1 : Click to open / close </h1>";

html +=   "<p> Paragraph 1.1 </p>";

html +=   "<p> Paragraph 1.2 </p>";

html +=   "<p> Paragraph 1.3 </p>";

html += "</div>";

html += "<div id=id2 data-role=collapsible>";

html +=   "<h1>Menu 2 : Click to open / close </h1>";

html +=   "<p> Paragraph 2.1 </p>";

html +=   "<p> Paragraph 2.2 </p>";

html +=   "<p> Paragraph 2.3 </p>";

html += "</div>";

html += "</div>";


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


</script>



tistory546_01.html




디폴트로 각 메뉴들은 닫혀있습니다. 열린 상태로 초기화 하려면 해당 <div> element에 data-collapsed="false" attribute를 추가하시면 됩니다.


반응형

Comment

slider 생성 관련 예제들..

2012. 12. 14. 12:54 | Posted by 솔웅


Examples of manipulation of sliders



Transmit the slider's value to the server


slider 의 값을 서버로 전달하는 것은 이전 글에서 봤듯이  change event에서 구현할 수 있습니다.  이 이벤트는 축에서 버튼을 움직일 때마다 무수히 많이 발생하게 됩니다 서버에 수없이 현재 값을 전달하게 되겠죠... 해결책은 뭘까요?


하나는 축에서 버튼의 움직임이 끝났을 때에만 즉 손가락이나 마우스가 slider에서 떠났을 때에만 서버로 그 값을 전달하는 방법이 있겠고 이렇게 change event가 아닌 다른 이트를 사용하는 방법이 있겠죠.


Transmit the value of the slider to the server 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 />

    <input type=range min=1 max=100 /><br />

</div>


</body>

</html>


<script>


$("input").live ("slidercreate", function ()

{

  $(".ui-slider").bind ("vmouseup", function (event)

  {

    var value = $("input").val ();

    $.ajax (

    

      url : "action.php", 

      data : { value : value },

      complete : function (xhr, result)

      {

        if (result != "success") return;

        var response = xhr.responseText;

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

      }

    });   

  });

});


</script>


change
event를 사용하는 대신에 슬라이더에서 손가락이 떠날때 발생하는
mouseup event를 사용했습니다.


action.php file


<?
$value = $_REQUEST["value"];
$html = "";
$html .= "Value: <span id=txt>$value</span><br />";
echo utf8_encode ($html);
?>



action23.php

tistory542_01.html


아래는 버튼을 몇번 옮기고 난 후의 화면입니다.





Use a submit button to transmit information


이제 서버에 slider이 값을 전달하기 위해 Submit button을 사용해 보겠습니다. slider의 값을 표시하는 새창에는 back 버튼을 표시하겠습니다.      


Use a submit button to transmit the value of the 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>

    <form action=action.php>  

      <span> Indicate the number of rooms: </span><br />

      <input type=range min=1 max=100 name=slider /><br />

      <input type=submit value=OK />

    </form>

  </div>

</div>


</body>

</html>



slider와 관계가 있는 <input> element 에는 이제 name attribute가 있는데요 이것은 서버로 슬라이더의 값을 전달할 때 사용될 겁니다.


action.php file


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

<!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> Value of slider : <?= $slider ?> </p>
  </div>
</div>
</body>

</html>


action24.php


tistory542_02.html


Change the opacity of an image with a slider


We would like to modify the opacity of an image using a slider. The minimum value is 0 (opacity of 0), the max is 100 (opacity of 1). Note that we do not change the value of the slider from 0 to 1, because it allows only two possible values for the following: 0 or 1.

이제 슬라이더를 이용해서 이미지의 투명도를 조절해 보겠습니다. 미니멈 값은 0이고 맥시멈 값은 100 입니다. 0에서 1이 아니라는 것을 유념해 주세요. 왜냐하면 그렇게 하면 오직 두개의 값만 표시될테니까요.

그런데 투명도의 범위는 0에서 1이니까 이것을 현재 값에서 100으로 나누겠습니다.


Use a slider for varying the opacity of an image


<!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> Change the opacity of the image: </span><br />

    <input type=range min=0 max=100 value=100 /><br /><br /><br />

    <img src=images/jquery.jpg height=50% />

  </div>

</div>


</body>

</html>


<script>


$("input").live ("slidercreate", function ()

{

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

  {

    $("img").css ( { opacity : $("input").val () / 100 } );

  });

});


</script>


tistory542_03.html



그 나는 값이 0.29가 되면 아래와 같이 표시될 겁니다.      




반응형

Comment

slider 를 customizing 하기

2012. 12. 14. 12:35 | Posted by 솔웅


Customize sliders



이전 글에서 jQuery Mobile 이 변환하는 것을 봤습니다.
<input> element 에 type="number" data-type="range" attributes 가 생기는 것도 봤는데요. 거기에다가 ui-slider class 가 있는 <div> element 도 생겼습니다. 거기에 ui-slider-handle class 가 있는  <a> link 도 생성됐죠. 이건 slider 의 축을 따라 움직이는 버튼을 만들기 위한 클래스였죠.


이 slider 를 다르게 display 하고 싶으면 이 CSS class 들을 수정하면 됩니다.


Change the styles associated with the 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>

  

  <style type=text/css>

    .ui-slider {

      width : 90% !important;

      background : yellow;

    }

    input.ui-slider-input {

      display : none !important;

    }

    .ui-slider-handle {

      background : red;

    }

  </style>

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

    <input type=range min=1 max=5 /><br />

</div>


</body>

</html>


tistory541_01.html





input field 부분의 ui-slider-input class 에 none으로 할당해서 input field 부분을 없앴습니다. 여기서 !important를 사용하는 것이 중요합니다. 왜냐하면 jQuery Mobile 이 이것을 보고 적용을 하거든요. 바로 jQuery Mobile 에게 이 클래스를 반드시 적용하라고 일러 주는 겁니다.


slider 의 축은 ui-slider class 에서 width property를 90%로 세팅했기 때문에 화면 대비 90% 크기로 보여질 겁니다. 여기에도 jQuery Mobile 에게 이것을 적용하도록 시키기 위해  !important이 반드시 필요합니다. 이 축은 노란 배경화면으로 세팅됐습니다.


마지막으로 ui-slider-handle class 에 해당하는 slider button은 빨간 배경 색으로 initialize 됐습니다.




반응형

Comment

slider 의 이벤트 관리하기

2012. 12. 14. 11:56 | Posted by 솔웅


Manage events on sliders




slider 는 .<input> input field 와 관련이 있죠. 그래서 slider에 어떤 변화가 오면 input field에 change event가 발생 됩니다.


것을 확인하기 위해 화면의 <span> element 에 slider 의 값을 display 해 보겠습니다.



Using the slider change events


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

    <input type=range min=1 max=100 /><br />

    Value : <span id=txt></span>  </div>

</div>


</body>

</html>


<script>


$("input").live ("slidercreate", function ()

{

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

  {

    $("#txt").text ($(this).val ());

  });

});


</script>


tistory540_01.html




여기서 중요한 점은 slider 의 change events 를 살펴보는 것은 그 slider 가 화면에 제대로 생성됐을 때만이 가능하다는 겁니다. 다시말해 오리지널 HTML 코드가 jQuery Mobile 에 의해 완전하게 변화된 이후라야 된다는 거죠. 그래서 우리는 slidercreate event 에change event 를 살펴보도록 코딩을 한 겁니다. 그렇지 않으면 제대로 작동하지 않을 겁니다.





위의 방법과는 다른 방법을 사용할 수도 있습니다. slider 가 생성되 있지 않아도 되는 방법이죠.  change event가 발생했을 때 bind () method 대신에 live () method를 사용하는 겁니다. 그러면 jQuery Mobile 이 <input> field 를 생성할 때에도 live () method 에 의해서 그 변화가 observed 될 수 있습니다.  아래 예제를 보시겠습니다.


Observe the change event on the slider without waiting for 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> Indicate the number of rooms: </span><br />

    <input type=range min=1 max=100 /><br />

    Value : <span id=txt></span>  </div>

</div>


</body>

</html>


<script>


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

{

  $("#txt").text ($(this).val ());

});


</script>



tistory540_02.html


반응형

Comment


Assign and retrieve the value of a slider



Slider already present in the HTML code


slider는 <input> element와 연관이 있죠. 이것을 이용하면 간단하게 slide 바가 만들어 집니다.  축위에 버튼이 놓여질 위치를 정하기 위해서 val (value) method를 사용할 겁니다.  그리고 slider의 값 얻기위해 val () 메소드를 사용할 거구요.


Assign and retrieve the value of the 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 />

    <input type=range min=1 max=5 />

  </div>

</div>


</body>

</html>


<script>


$("input").live ("slidercreate", function (event)

{

  $("input").val (3);

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

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

});


</script>


tistory536_01.html


코드에 대해서는 약간의 설명이 필요한데요. 
val (value) 하게 되면 cursor 의 값에 영향을 미치게 됩니다. 사실은 이 메소드는 단지 그 slider 의 <input> input field 에 영향을 미치는 겁니다.slider 그 자체에 영향을 미치는 것은 아닙니다 그래서 slider ("refresh")를 실행해 줘야 하는 겁니다. 이 구문은 slider 가 생성되기 전에는 실행할 수 없기 때문에 slidercreate event를 사용하는 겁니다.



initial <input> element는 두개의 element들로 변환된다는 사실도 기억해 두세요. 하나는 <input> input field와 관계가 있고 그리고 또 하나는 slider 에 관계 된 ui-slider class를 가지고 있는 <div> element 입니다.


original <input> element (HTML 코드에 있는) 는 jQuery Mobile 에 의해서 없어지고 이 두개의 새로운 element 가 대체될 겁니다. 그렇기 때문에 반드시 bind ()가 아니라 live () method를 사용해야 합니다. 그래야 jQuery Mobile 에 의해 생성된 새 <input> element가 slidercreate event를 receive 할 수 있습니다.


또한 그 버튼을 축의 어느 한 지점에 위치하도록 할 수도 있습니다.





Slider dynamically created



이것을 위해서는 위에서 사용했던 val (value) val () methods 들을 여전히 사용합니다. 그리고 slider 의 버튼을 display 하기 위해 slider ("refresh") method를 사용해서 refresh 해야 합니다.


Assign and retrieve the value of the 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);


$("input").live ("slidercreate", function (event)

{

  $("input").val (3);

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

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

});


</script>


tistory536_02.html

권영길
경남 도지사 후보
공식 싸이트


이전 예제에서와 같은 이유로 live () instruction을 사용해서 slidercreate event를 통해 화면에 slider 가 생성되기를 기다립니다.


slider 를 생성할 때 이 코드를 이미 포함하고 있도록 만들려면 자바스크립트 코드를 약간 사용해야 합니다. 이 때는 slider () instruction 을 사용합니다.


Assign and retrieve the value of the slider, creating the slider by slider () method


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


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

{

  var html = "";

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

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

  

  $("input").slider ();

  $("input").val (3);

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

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

});


</script>


tistory536_03.html

이수호
서울시 교육감 후보
홍보 동영상


만약 slider () instruction 이 없다면 slider ("refresh") instruction 은 실행 될 수 없습니다. 왜냐하면 slider 자체가 없으니까 refresh 를 시킬 수 없게 되는거죠. 그리고 <input> element 에는 type="range" attribute가 없는걸 잘 보세요. 만약 이것이 있으면 jQuery Mobile 에 의해 변환되는 element 가 기대하지 않게 동작할 수도 있습니다. (예를 들어 slider 가 두개 나타난다던지 하는....)



반응형

Comment