반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 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

accordion menu에서 이벤트 관리하기

2012. 12. 21. 12:47 | Posted by 솔웅


Manage events on accordion menus



accordion menu 를 좀 더 쉽게 관리하기 위해 jQuery mobile 은 bind () method로 다룰 수 있는 두 가지 새로운 이벤트를 만들었습니다.

  • The expand event warns that accordion menu was opened (it is already open)

  • The collapse event warns that accordion menu was closed (it is already closed).


이 두 이벤트들은 <div> elements 에 accordion menu를 정의하면( data-role="collapsible" attribute) 사용할 수 있습니다.


Use the expand and collapse events on 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>

  </div>

</div>


</body>

</html>


<script>


$("#id1, #id2").bind ("collapsiblecreate", function (event)

{

  $(this).bind ("collapse", function (event)

  {

    alert ("Menu: closed");

  });

  $(this).bind ("expand", function (event)

  {

    alert ("Menu: open");

  });

});


</script>


tistory559_01.html


expand and collapse events 를 observation 하는 것은 jQuery Mobile 에 의해서 새로운 HTML 코드로 완전히 변환되고 난 후에 일어납니다.


Ajax에 의해 서버로 call 하는 동안에 accordion menu 를 생성해 보겠습니다.


Use the expand and collapse events in accordion menus retrieved 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 ();


    $("#id1, #id2").bind ("collapse", function (event)

    {

      alert ("Menu: closed");

    });

    $("#id1, #id2").bind ("expand", function (event)

    {

      alert ("Menu: open");

    });

  }

}); 


</script>


action.php file


<?
$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>";
echo utf8_encode ($html);
?>



action26.php

tistory559_02.html



반응형

'jQuery Mobile' 카테고리의 다른 글

accordion menu에서 이벤트 관리하기  (0) 2012.12.21

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

우아하게 화면 scroll 하기

2012. 12. 19. 12:55 | Posted by 솔웅


.animate()   와 .scrollTop()


웹 앱을 개발하다 보면 textfield 를 사용하는 경우가 많이 있습니다.

그리고 이 textfield 가 있는 화면을 모바일 디바이스에서 사용하려면 screen keyboard를 사용해야 되죠.
평상시에는 별 문제가 없는데 이걸 autocomplete 기능과 같이 사용하게 되면 문제가 발생할 수도 있습니다.

screen keyboard 가 리스트의 일부 아이템을 가려버려서 유저가 그 아이템을 클릭할 수 없게 될 수 있거든요.




화면 키보드 밑에 아이템이 깔려 있습니다.

이럴 경우 scroll 이 안되는 layout 하면이라면 유저가 많이 불편하겠죠.

이럴경우 jQuery 의 .animate() 과 .scrollTop() 함수를 사용하면 아주 우아하게 화면을 스크롤 업해서 유저 친화적인 인터페이스를 제공할 수 있습니다.
보통 자바스크립트의 window.scrollTo(x, y);를 사용하셔도 되는데요. 좀 더 자연스럽게 움직이도록 하기 위해 이 두 메소드를 사용하면 좋습니다.

저는 아래와 같이 사용했습니다.

$('body,html').animate({scrollTop: 160 }, 900);

textfield 에 focus 가 가서 키보드가 올라왔을 때.


$('body,html').animate({scrollTop: 0 }, 500);

키보드가 다시 내려갔을 때 화면을 다시 원상 복구 함.

숫자는 마음대로 넣으시면 됩니다.

이해를 돕기 위해 우선 .animate() 함수 예제를 볼까요?


<!DOCTYPE html>
<html>
<head>
  <style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="go">&raquo; Run</button>

<div id="block">Hello!</div>
<script>

/* Using multiple unit types within one animation. */

$("#go").click(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});
</script>

</body>
</html>


#go 를 클릭하면 width 가 화면의 70%로 늘어나고 투명도도 바뀌고 폰트 사이즈, border 굵기 등이 바뀝니다. 이 동작은 1.5초 동안 일어납니다.


tistory551_01.html


위 파일을 다운 받아서 실행해 보세요.

예제 하나 더 보면요.


<!DOCTYPE html>
<html>
<head>
  <style>
div {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>

<script>
$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
});

$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});

</script>

</body>
</html>


#right, #left 를 클릭하면 .block을 각각 50픽셀씩 오른쪽 혹은 왼쪽으로 움직이는 소스입니다.


tistory551_02.html

.scrollTop()에 대한 예제도 보죠.


<!DOCTYPE html>
<html>
<head>
 
<style>
div
.demo {
background
:#CCCCCC none repeat scroll 0 0;
border
:3px solid #666666;
margin
:5px;
padding
:5px;
position
:relative;
width
:200px;
height
:100px;
overflow
:auto;
}
  p
{ margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
 
</style>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div class="demo"><h1>lalala</h1><p>Hello</p></div>
<script>$("div.demo").scrollTop(300);
</script>

</body>
</html>

tistory551_03.html


이 예제를 실행하면 작은 화면안에 페이지가 위에서 300픽셀 내려간 부분이 중앙이 되도록 display 할 겁니다.


이 두개를 조합해서 사용한 예제도 하나 올릴테니까 다운 받아서 보세요.

scroll-to-top.zip


반응형

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