'분류 전체보기' 카테고리의 글 목록 (107 Page)

Radio button 에서 이벤트 관리하기

2012. 12. 1. 19:58 | Posted by 솔웅

jQuery Mobile은 radio 버튼에 대해 change event를 observe 할 수 있습니다. 이 이벤트는 레이디오 버튼을 클릭할 때마다 발생합니다. 그 레이디오 버튼이 selected 상태든지 아니든지 모두 발생하죠. click event도 있지만 이전에도 언급했듯이 직접적으로 사용되지는 않습니다.

Using the change event on radio buttons

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

    <div data-role=controlgroup>

      <label for=id1> 1 </label>

      <input type=radio id=id1 name=rooms />

      <label for=id2> 2 </label>

      <input type=radio id=id2 name=rooms />

      <label for=id3> 3 </label>

      <input type=radio id=id3 name=rooms />

      <label for=id4> 4 </label>

      <input type=radio id=id4 name=rooms />

      <label for=id5> 5 </label>

      <input type=radio id=id5 name=rooms />

    </div>

  </div>

</div>

</body>

</html>

<script>

$(":radio").bind ("change", function (event)

{

  alert ($(this).attr ("checked"));

});

</script>

tistory497_01.html

왜 click event 가 직접적인 방법으로 사용되지 않을까요. jQuery Mobile이 원래의 HTML 코드를 변환시킨다는 것을 기억해 보세요. 그러니까 그 click event를 받는 것은 <div> element내의 ui-radio CSS class 가 됩니다. 소스에 원래 있던 <input> element 가 아니죠. 그래서 <input> element에 있는
<div> element를 클릭하면 이 <div> element가 change event를 만들게 되는 것입니다.

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Ajax로 switch 삽입하기 (1)	2012.12.04
HTML 을 jQuery Mobile switch로 바꾸기 (0)	2012.12.04
다이나믹 하게 switch 만들기 (0)	2012.12.04
Radio 버튼 생성 예제들... (0)	2012.12.03
radio 버튼 커스터마이징 하기 (0)	2012.12.02
기존 리스트에 radio button 추가하기/지우기 (0)	2012.11.30
radio 버튼의 값 할당하거나 retrieve 하기 (7)	2012.11.29
Ajax 로 radio 버튼 insert 하기 (1)	2012.11.28
jQuery Mobile radio button 으로 HTML element 바꾸기 (1)	2012.11.28
다이나믹하게 radio button 생성하기 (0)	2012.11.28

My Shelter/tale

대한민국 18대 대통령 후보 평가 - 재외국민 투표자용 선거 홍보물을 보고.... -

2012. 11. 30. 22:42 | Posted by 솔웅

미국은 지난달에 대통령선거가 끝났죠.

역사상 처음으로 흑인 대통령이 된 오바마가 재선 됐습니다.

당연히 역사상 처음으로 흑인 대통령이 재선 된 거죠.

그리고 민주당의 승리였습니다.

오바마의 개방적인 이민정책이나 의료 보험 법 개정이 힘을 받아서 잘 진행 됐으면 좋겠습니다.

그리고 이제 한국도 대통령 선거 시즌입니다.

지금 선거운동이 한창 진행 중이겠죠?

저는 지난주에 재외국민 투표자들을 위한 대통령 후보 홍보물을 받았습니다.

오늘은 그 홍보물을 본 제 개인적인 생각을 정리해 볼께요.

제가 언론인도 아니고 뭐 명망있는 사람도 아니고...

객관적으로 생각할 이유가 하나도 없습니다.

어차피 투표는 개인적인, 주관적인 판단을 해서 나의 1표의 권한을 누군가에게 행사하는 거니까요.

제 개인적이고 주관적인 생각을 정리하는 거니까요. 이 글을 읽으시는 분들은 그냥 여러분 주관적으로 생각하시면 되요.

그리고 언론에서는 분명 1,2 번 후보만 집중이 될 테고 후보 전체를 소개할 때도 1번서부터 차례대로 소개할 테니까...

저는 반대로 7번서부터 소개할께요. ^^

(후보자가 7명이나 되네요. 와우...

이번 미국 대통령 선거도 버락 오바마와 밋 롬니 말고도 Libertarian Presidential Nominee 로 전 뉴 멕시코주 주지사인 Gary Johnson 이 있었습니다. )

7. 청소부 대통령 후보 김순자

07.pdf

직업이 청소노동자네요.

지난번 19대 국회의원 선거에서 진보신당 비례대표 후보자로 나왔구요.

소속 정당이 없어져서 무소속으로 나왔나 보네요.

모토가 노동자 대통령으로 진보진영 입니다.

공약은 모토인 노동자 대통령 답게 노동시간 줄이고(35시간) 최저임금을 높이겠다는 거군요. 노동조건 개선이 주요 내용입니다. 그리고 환경보호와 보편적인 복지 확대 등이 있습니다.

자신만의 이념과 그에 맞는 공약이 있어서 대통령이 되면 그 이념에 맞게 한국을 이끌어 나갈 거라는 예측이 가능한 후보입니다.

그런 사회를 바라시는 분은 이분을 선택할 수도 있겠네요.

저는 그것 보다는 정권교체가 더 필요하다고 생각해서 그 기준에 맞게 선택할 것 같습니다.

6. 청소년 지킴이 강지원 후보

06.pdf

TV에서 많이 보던 분이네요.

본인은 호남출신이고 부인은 영남출신이라는 점을 내세워 지역감정 해소의지가 눈에 띄네요.

그리고 기본적으로는 대기업엔 기업활동의 자유를 그리고 정부는 중기와 서민의 지원을 1번 공약으로 내세우고 있습니다. 정부가 중기와 서민을 적극적으로 지원하는데 한미 FTA 의 ISD 조항이 제약을 줄 것 같은데 이에 대한 대책은 없네요.

굳이 나누자면 이분은 중도보수쪽이라고 저는 생각합니다.

저는 우리나라가 오랫동안 군부독재와 냉전의 아젠다에 갇혀 있었기 때문에 그리고 10년의 민주당 집권에서 조차도 그 아젠다에서 조금도 벗어나지 못했기 때문에 우리나라는 조금 더 진보적인 권력이 집권을 해야 된다고 생각합니다.

5. 노동자 대통령 김소연 후보

05.pdf

7번 후보와 마찬가지로 노동자 대통령을 모토로 내걸었습니다.

'자본주의를 넘어서야 한다', '세상을 뒤엎는 날' 이라는 표현에서 볼 수 있듯이 좀 더 적극적인 표현을 하는 진보 진영 후보입니다.

개인적으로는 이런 좌파 진보진영이 정치세력화 해야 되는데 찬성합니다.

원래는 수구 부패 세력인 새누리당은 완전 없어져야 되고 중도보수인 민주당과 이런 진보 세력이 양대 정치세력으로 우리나라 정치를 만들어 갔으면 하는 생각입니다.

이 김소연 후보는 재벌자산 몰수 라는 아주 급진적인 주장을 하고있고 금융 등 주요 산업을 사회화 한다는 사회주의적인 정책공약을 제시하고 있네요.

개인적으로는 이런 정책을 주장하는 것은 본인들의 자유 지만 이 세력들이 그동안 얼마나 대중적인 활동을 하고 대중의 마음을 얻었는지 궁금합니다.

사랑은 내 기준에서 상대방을 행복하게 만드는게 아니라 상대방의 입장에서 상대방을 행복하게 해 주는건데. 이 분들이 과연 그런 사랑의 입장에 있는지 비판적인 생각을 가지고 있습니다.

4. 무소속 박종선 후보

04.pdf

이 분은 사업을 하셨던 분으로 이번 대통령 후보중에 가장 고령(84세) 이시네요.

열심히 사셨고 우리나라 경제를 성장시킨 주역의 한 분이시라고 생각합니다.

(물론 이분 회사에서 일하셨던 노동자 분들도 우리나라 경제 성장의 같은 주역이시겠구요.)

공약은 따로 없습니다.

이제 미래를 보고 선진국을 만들자 가 전부 입니다.

굳이 공약을 들자면 국회 마크를 바꾸자 이구요.

연세도 있으시고 또 사업가 출신이신 전형적인 보수 진영 후보 입니다.

이 분에 대해서는 특별한 개인 의견 없습니다.

그냥 그동안 열심히 사셨고 그거에 대해서 감사드리고 훌륭한 대한민국을 만들어 주신 점 정말 고맙고 미래는 젊은이들이 만들어 나가도록 잘 지켜봐 주십사라고 말씀 드리고 싶네요.

3. 당당한 대통령 이정희 후보

03.pdf

자주와 평등을 포스터의 가장 중요한 자리에 위치시켰습니다.

FTA 폐기 및 노동조건 개선 및 6.15 선언과 10.4 선언 이행등의 민족문제 해결과 관련한 공약들이 있습니다.

또한 오랫동안 진보진영의 대표 정당으로 있었기 때문에 독일식 정당명부제 및 대선 결선투표제 같은 현실적인 정치제도개선에 대한 공약도 있구요.

(포스터만 봤을 때 같은 진보진영인 7번과 5번 후보보다 현실적인 정치제도 개선 공약이라는 의미입니다.)

개인적으로는 고등학교때 전국 모의고사 수석에 빛나는 수재라는 인상이 제 머릿속에 남아있는 후보입니다.

이 홍보물이 재외 국민 투표자를 대상으로 하기 때문에 특별히 재외동포 권익증진 대안이라는 공약들도 있습니다.

다른 후보들과 달리 이렇게 신경을 써 줘서 고맙네요.

제 개인적으로는 이 후보가 속한 정당이 대중에게 다가가는 정당이 아니라 정파정당이라는 이미지가 강합니다. (지난 국회의원 선거에서 보여줬던 모습들 때문일겁니다.)

저는 그 정파에 소속될 마음이 없으므로 이 후보를 지지하지는 않습니다.

제 지지가 필요없으시면 계속 그렇게 하시고 제 지지가 필요하시면 정파주의적인 모습을 버리시고 제대로 대중적인 정당으로 거듭나시기를 요구드립니다.

진보진영 중에서도 이 후보는 NL 진영일 텐데요. (예전 제가 대학 다닐때 기준으로 하면요.)

PD 진영이라고 얘기할 수 있는 5번 김소연 후보에게 했던 똑같은 말들을 하고 싶네요.

사랑은 내 기준에서 상대방을 행복하게 만드는 것이 아니라 상대방 기준의 행복을 이루어 주는 것이라고요.

PD 정파든 NL 정파든 본인들의 주장만 고집하고 일반 국민들에게 다가가는 노력이 부족해서 저는 지지를 못합니다.

2. 당신의 대통령 문재인 후보

02.pdf

제 1 야당의 후보이고 얼마전 안철수씨와 단일화를 한 후보죠.

포스터를 보면 재외국민 투표자들을 대상으로 한 홍보에 맞게 재외국민 보호를 위한 공약들로만 구성됐습니다.

홍보 대상자들에 맞게 내용을 구성한 후보는 총 7명의 후보중에 3번 이정희 후보와 2번 문제인 후보 딱 두 후보입니다.

이런 디테일한데까지 신경 써 주셔서 그 점에서는 두 후보 다 저의 점수를 따고 들어갔습니다. ^^

아쉬운 점은 문제인 후보는 포스터에 전부 재외국민들에 대한 공약 내용들로만 있네요.

해외에 살더라도 한국의 대통령 후보가 앞으로 한국을 어떻게 끌고 나갈거다 라는 것들을 알고 싶거든요.

그런 공약이 없어서 아쉽습니다.

이번에 제 투표 기준인 정권교체를 놓고 봤을 때는 가장 지지를 보내야 될 후보이긴 합니다만...

민주당이 과거의 모습이라는 이미지가 강해서 과연 개혁을 얼마나 이뤄 낼 수 있을까가 의문입니다.

국민의 한사람인 제가 단순히 정권교체가 목표일 수는 없거든요. 지금의 여당 후보는 진실성 없는 개혁 공약을 보여줬고 실제로 여당집권 5년간 개혁은 온데간데 없고 다시 과거로 회귀하는 모습만 보였으니까요.

문제는 개혁을 할 수 있느냐 인데....

여당 후보는 하는 척을 하기 위해서라도 이런 저런 사기성 개혁을 하고는 있는데.. 민주당은 그런 모습들조차도 안 보여줘서 많이 부정적입니다.

울며 겨자먹기로 민주당 후보를 찍어야 될지..

아니면 남은 기간동안 문재인 후보가 안철수 후보와 같이 확실하게 개혁을 이룰 인물이라는 점을 보여줘서 저도 기쁜 마음으로 한표를 던질 수 있을 지.....

후자의 모습을 보여주길 바랍니다.

1. 내 꿈이 이루어지는 나라 박근혜 후보

01.pdf

여당 후보인 박근혜 후보입니다.

내 꿈이 이루어지는 나라에서 '꿈' 부분에 말풍선이 달려서 'ㅂㄱㅎ' 라고 쓰여져 있네요.

대한민국이 박근혜의 꿈이 이루어지는 나라가 될지 그렇지 않을지...

불안한 마음으로 지켜보고 있습니다.

이 포스터에는 공약은 없습니다.

그냥 기호 4번의 최고령 후보자인 박종선 후보자 포스터 처럼 그냥 우리나라 잘 만들자 라는 추상적인 수사만 있습니다.

다만 4번 박종선 후보 보다는 좀 더 세련되게 그리고 젊은 층에 맞게 꾸민것만 다르네요.

분열과 대립을 없애고 국민을 행복하게 해 주고 원칙을 지키고 약속을 지키는 정치를 하겠다라는 내용이 다 입니다.

이 포스터가 박근혜 후보를 잘 나타내고 있는 것 같습니다.

머릿속 생각은 기호 4번 84세의 고령 후보와 같은 수준의 현실판단과 구체성 없는 비전을 가지고 있는데 꾸미기는 깔끔하게 젊게 잘 꾸미는......

너무 과거의 생각을 가지고 있는 과거의 인물이기 때문에 그렇지 않다는 것을 보여주기 위해서 그동안 개혁적인 이벤트를 많이 했었는데요.

지나놓고 보면 정말 순간적인 이벤트였을 뿐이라는 판단입니다.

이런 분이 진정 근본적인 개혁을 할 거라고는 믿지 않습니다.

현실인식 자체가 구린내나는 옛날 생각인데 어떻게 근본적인 개혁을 할 수 있겠습니까.

다만 환한 불에 몰려드는 불나비처럼 권력에 모여드는 여러 젊은 인재들에 의해서 그 구린내나는 생각을 감추고 산뜻하게 꾸며질 뿐입니다.

============ o ============= o ========== o ============ o =========== o ============

이렇게 이번 대통령 후보 총 7분에 대한 제 개인적인 평가와 의견이었습니다.

제 주위에 있는 한국분들은 대부분 재외국민 투표에 참여하시더군요.

투표장소가 차타고 1시간 정도밖에 안 걸려서 많이 신청 했나봅니다.

여기에 제가 아는 한국분들은 몇 분 안 계시지만 모두 정권교체를 바라고 있습니다.

재외국민 투표는 12월 5일 수요일 부터 12월 10일 월요일까지 6일간 진행이 되는데요.

저는 휴일인 8일 토요일에 투표하러 갈 겁니다.

한국에서도 많은 분들이 투표에 참여해서 5년간의 MB 정권을 심판하고 이를 바로 잡을, 정권교체를 이룰, 그리고 근본적인 개혁을 해 나갈 수 있는 후보를 선택하셨으면 좋겠습니다.

저작자표시 비영리 동일조건

'My Shelter > tale' 카테고리의 다른 글

18대 대통령 선거 보스턴 지역 투표 현황 (2)	2012.12.06
현재 문재인이 앞서 나가고 있는 것일 수 있다.... (2)	2012.12.05
저는 문재인을 지지합니다. 안철수와 만들 새정치를 기대합니다. (0)	2012.12.04
프레이저 보고서 - 한국의 경제성장 이렇게 이뤄 졌다... (15)	2012.12.03
미국 직장 생활 영어를 다룬 새 블로그를 개설했어요. (0)	2012.12.02
우리 이쁜 수지의 이쁜 트위터 글... (0)	2012.11.27
한반도... 독재자의 아들,딸이 말아먹도록 놔 둬야 되나? (0)	2012.11.15
계속되는 박근혜의 악수... 이건 능력이 없어서다... (0)	2012.11.06
언론, 방송사에 압력 가하는게 일상인 새누리당 (0)	2012.11.05
Cloud Atlas 를 보고 (0)	2012.11.05

jQuery Mobile/JQM Tutorial

기존 리스트에 radio button 추가하기/지우기

2012. 11. 30. 09:03 | Posted by 솔웅

Insert and delete a radio button in an existing list

radio button을 삽입하거나 지우기 위해서 jQuery 의 standard method 를 사용합니다.

Insertion and removal of radio buttons

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

    <div data-role=controlgroup>

      <label for=id1> 1 </label>

      <input type=radio id=id1 name=rooms />

      <label for=id2> 2 </label>

      <input type=radio id=id2 name=rooms />

      <label for=id3> 3 </label>

      <input type=radio id=id3 name=rooms />

      <label for=id4> 4 </label>

      <input type=radio id=id4 name=rooms />

      <label for=id5> 5 </label>

      <input type=radio id=id5 name=rooms />

    </div>

  </div>

</div>

</body>

</html>

<script>

var html = "";

html += "<label for=id0> Studio </label>";

html += "<input type=radio id=id0 name=rooms />";

$("input#id1").after (html);

$("input#id1, label[for=id1]").remove ();

</script>

tistory495_01.html

이 방법이 항상 통하는 건 아닙니다. 이 예제에서는 제대로 작동합니다. 왜냐하면 radio 버튼이 삽입되고 지워질때 jQuery Mobile 에 의해 HTML 이 변환되지 않아서 그렇습니다. 즉 그 때 JQM 에 의해서 HTML 이 변환되면 제대로 작동 안한다는 거죠. 그럴 땐 다른 방법을 사용해야 합니다.

Insertion and removal of radio buttons in a window already 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 the number of rooms: </span>

    <div data-role=controlgroup>

      <label for=id1> 1 </label>

      <input type=radio id=id1 name=rooms />

      <label for=id2> 2 </label>

      <input type=radio id=id2 name=rooms />

      <label for=id3> 3 </label>

      <input type=radio id=id3 name=rooms />

      <label for=id4> 4 </label>

      <input type=radio id=id4 name=rooms />

      <label for=id5> 5 </label>

      <input type=radio id=id5 name=rooms />

    </div>

  </div>

</div>

</body>

</html>

<script>

$("#id1").bind ("checkboxradiocreate", function (event)

{

  var html = "";

  html += "<label for=id0> Studio </label>";

  html += "<input type=radio id=id0 name=rooms />";

  $(this).parent ("div.ui-radio").after (html);   // insertion

  $(this).parent ("div.ui-radio").remove ();      // suppression

  $("#id0").checkboxradio ();

  $("div:jqmData(role=controlgroup)").controlgroup ();

});

</script>

tistory495_02.html

첫번째 radio button 을 manipulate 하기 위해서 checkboxradiocreate event 에 의해 생성되는 과정을 기다려야 합니다. HTML 코드는 jQuery Mobile 에 의해 변환 됐습니다. 이 radio 버튼은 이제 ui-radio CSS class 가 있는 <div> element 로 그룹화 해야 합니다. radio button 을 삽입하려면 checkboxradio () method 를 사용해야 합니다. 그리고 그룹화를 위해서
<div> element에 controlgroup () method 를 사용하는 것도 필요하구요.

새로운 radio button 을 생성하기 위해 create event 를 사용할 수도 있습니다. 이것을 사용하고 난 다음엔 display 된 element들을 refresh 해야 됩니다.

Using standard methods on the components (first way)

$("#id0").checkboxradio ();
$("div:jqmData(role=controlgroup)").controlgroup ();

이전 예제에서 윗 부분을 주석 처리하고 아래 코드를 넣어보세요.

Use the create event on the window (2nd way)

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

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

HTML 을 jQuery Mobile switch로 바꾸기 (0)	2012.12.04
다이나믹 하게 switch 만들기 (0)	2012.12.04
Radio 버튼 생성 예제들... (0)	2012.12.03
radio 버튼 커스터마이징 하기 (0)	2012.12.02
Radio button 에서 이벤트 관리하기 (0)	2012.12.01
radio 버튼의 값 할당하거나 retrieve 하기 (7)	2012.11.29
Ajax 로 radio 버튼 insert 하기 (1)	2012.11.28
jQuery Mobile radio button 으로 HTML element 바꾸기 (1)	2012.11.28
다이나믹하게 radio button 생성하기 (0)	2012.11.28
체크 박스 생성 예제들 (0)	2012.11.27

Corona SDK/Corona Doc

physics engine (물리엔진)의 새로운 기능 event.contact 소개

2012. 11. 29. 19:23 | Posted by 솔웅

Posted on November 27, 2012. Written by Brent Sorrentino

오늘의 튜토리얼은 코로나의 physics contact에 대해 소개해 드리려고 합니다. 이 기능은 physics engine 에 최근에 implement 됐습니다. 개략적으로 말하자면 physics contact 는 막 일어나려는 특정 collision (충돌) 을 말하는 겁니다.

개발자들에겐 아마도 physics pre-collision이 친숙할텐데요. 아마도 이 physics contact 하고 뭐가 다른지 의문이 드실 겁니다. physics contact 는 대부분의 경우 pre-collision event 중에 사용됩니다. 그럼에도 이 두가지는 중요한 차이점이 있습니다.

Pre-collision Event

두 object 사이의 pre-collision (or any collision) 이 일어날 경우 Corona는 Lua ID에 의해 각각의 object 에 접근할 수 있도록 합니다. 이 방법을 통해 어떤 object (객체) 에 어떤 action 을 구현할 수 있을 겁니다. 예를 들어 dl pre-collision에서 한 object 를 센서로 바꿔서 다른 object 가 이 object를 통과할 수 있도록 만들 수도 있구요 아니면 둘 중 하나는 터지도록 만들 수도 있을 겁니다. 또는 여기에 force를 더 줄 수도 있고 혹은 다른 많은 action 들을 부여할 수 있습니다. 이 기능은 Corona 에서 오래 전부터 제공해 왔죠. 그런데 여기에는 몇가지 제한이 있었습니다. 그리고 physics contact로 그 제한을 해결할 수 있게 됐습니다.

One-Sided Platforms

2D side-view games 에서 자주 요구되어지는 것 중 하나가 “one-sided platform” 입니다. (수퍼 마리오를 비롯해 다른 수 많은 2D platform games 에서 이 기능이 사용되고 있습니다.) character 가 platform 아래에서 점프를 할 수 있고 이 platform 을 통과 할 수도 있죠. 그리고 그 platform 위에 사뿐히 착지하게 됩니다. 코로나에서는 이전에 점프할 때 character를 sensor 로 바꿔서 해결했습니다. 그리고 그 platform 위에서 character 는 다시 일반적인 object로 전환 됐죠.

대부분의 경우 이 방법으로 해결이 가능했습니다. 그런데 한가지 중요한 문제점이 있었죠. 만약에 enemy “goomba” 가 platform 위에서 걸어가고 있는 경우에는 어떻게 될까요? 이 character 가 그 enemy “goomba” 하고 부딪힐 때도 여전히 sensor 인 상태가 되죠. 그러다가 platform 위로 올라가게 되는 순간 두 object 의 충돌이 인식되서 “bounce” 가 일어나지 않는 등의 문제가 생길 수 있습니다.

Introducing the Physics Contact

위 문제는 새로 도입된 physics contact로 해결 할 수 있습니다. 위에서 언급한대로 특정 reference 에 대해 막 일어나려고 하는 충돌의 경우 알 수가 있습니다. pre-collision event listener 가 사용되고 있는 사이에 physics contact 와 4개의 properties에 접근할 수 있습니다. 이전에는 ㅇ접근할 수 없었던 것이죠.

one-sided platform 예제를 한번 더 생각해 볼까요. character 가 점프하고 아래쪽에서 platform 에 충돌 했을 때 코로나는 character 의 머리와 platform의 밑부분이 충돌하려고 한다는 것을 알 수가 있습니다. physics contact를 사용해서 곧 일어날 temporary access를 알아채서 코로나에게 여러분이 하고 싶은 일을 하라고 얘기할 수 있습니다. 혹은 이것을 완전히 무시하라고 얘기할 수도 있죠.

아래에 pre-collision event listener를 사용해서 어떻게 physics contact에 어떻게 접근하는지에 대한 예제가 있습니다.

function character:preCollision( event )
   print( event.contact )  --"event.contact" is the physics contact "userdata"
   --the following properties of the collision can be accessed; the last three are settable!
   print( event.contact.isTouching )  --read-only: are the two objects touching?
   print( event.contact.isEnabled ) --'true' or 'false'; will the collision resolve?
   print( event.contact.bounce )  --get/set the bounce factor of the collision
   print( event.contact.friction )  --get/set the friction factor of the collision

end
character:addEventListener( "preCollision" )

 

physics contact 는 collision-specific properties 를 제공합니다. (이전에 traditional listener events 에서는 접근할 수 없었던 것들이죠.) 간단한 condition 로직을 사용하셔서 (if문 같은) 해당 충돌을 완전 무시하거나 선택할 수 있습니다. 혹은 특정 충돌에 대해 bounce/friction factor(s)등에 변화를 줄 수 있죠. 해당 객체에 적용한 bounce/friction 을 override 하시면 됩니다.

one-sided platform 을 위해서는 physics contact 메소드를 사용하는 것이 훨씬 좋습니다. 처음에 플랫폼의 프로퍼티를 “pass through” (or any other term)로 설정하고 그 다음에 conditional logic (if 문 같은)을 사용해서 코로나에게 만약 그 플랫폼이 “passthru” type 이면 해당 충돌을 무시하라고 얘기하실 수 있습니다. 아래 예제에서 처럼요.

local platform = display.newImage( "platform.png" )
platform.collType = "passthru"
physics.addBody( platform, "static", { bounce=0.0, friction=0.3 } )

function character:preCollision( event )

   local collideObject = event.other
   if ( collideObject.collType == "passthru" ) then
      event.contact.isEnabled = false  --disable this specific collision!
   end
end

 

physics contact 충돌하는 두 객체의 reference 는 아닙니다. 다만 충돌 그 자체의 reference 입니다.그 충돌을 다시 적용시키기 위해 override 하실 수 있습니다. physics contact properties 를 세팅하면 두 객체 모두에 이 프로퍼티가 계속 적용되는 것이 아닙니다. 코로나는 그 특정 충돌에 대해서만 해당 프로퍼티를 사용할 겁니다. 그리고 나서는 그 프로퍼티를 무시합니다. 예를 들어 physics contact 의 “bounce” factor 를 바꾼다면 두 객체의 core bounce 에 대해서는 set/reset을 하지 않습니다.

코로나에서 physics contact (and its properties)는 어떤 타입의 충돌 리스너에서든지 가리지 않고 사용할 수 있습니다.(pre-, post-, or standard). 대부분의 경우 pre-collision를 많이 사용하죠. 왜냐하면 프로퍼티에 접근하고 세팅하고 하는 작업은 그 충돌이 일어나기 전에 필요한 거니까요.

Other Possibilities

physics contact 를 사용해야 하는 one-sided platform 이외의 경우를 한번 볼까요. 핀볼 게임 아시죠? 이 게임을 위해서 아래와 같은 conditional logic(if문 등)을 사용하실 수 있을 겁니다.

Silver balls collide with red bumper for extreme bounce (set physics contact bounce to 1)
Silver balls collide with blue bumper for no bounce (set physics contact bounce to 0)
Gold balls collide with red bumper for no bounce (opposite of the first case)
Gold balls collide with blue bumper for medium bounce

See it in Action

“one-sided platform” method를 사용하신 경우롤 보시려면 demo project를 다운 받아서 참조하세요.

In Summary…

새로만든 physics contact는 네가지 새로운 프로퍼티들을 제공합니다.

event.contact.isTouching — read only: are the two objects touching?
event.contact.isEnabled — read/write: ‘true’ or ‘false’; should the collision resolve?
event.contact.bounce — read/write: get or set the bounce factor of the collision
event.contact.friction — read/write: get or set the friction factor of the collision

특정 상황에서 이 프로퍼티들은 기본적인 충돌 이벤트와 충돌 필터들을 사용해서 이전에는 구현할 수 없었던 정교한 콘트롤을 할 수 있도록 해 줍니다. 이 프로퍼티들을 다음 physics-based project에서 사용해 보세요.

질문이나 의견이 있으시면 저 위 본문 시작하는 제목에 걸린 링크를 클릭하세요.

원문페이지기 있는데요. 거기다가 댓글로 질문 하시면 됩니다.

영어로 하셔야 되는데요.

영어가 어려우시면 이 글 밑에 댓글로 달아 주세요.

제가 여건이 되는대로 대신 질문 전달하고 답변 받으면 이 블로그에 공유해 드릴께요.

저작자표시 비영리 동일조건

'Corona SDK > Corona Doc' 카테고리의 다른 글

내 앱에 애플의 iAds 광고 달기 (0)	2013.01.03
코로나의 Holiday Gifts : Android Push Notification 등 등 (0)	2012.12.30
iOS 에 구글 맵이 돌아왔다. (Corona의 구글 맵 지원 기능 소개) (2)	2012.12.19
간단하게 Device 분별하는 예제 (0)	2012.12.13
다양한 디바이스 해상도에 맞게 이미지 표시하기 - config.lua file- (0)	2012.12.06
새 위젯 사용하기 Part 1 (0)	2012.11.08
Blend Modes 사용해서 Creative Effects 내기 (1)	2012.11.01
원근감을 주는 parallax scrolling 구현하기 (0)	2012.10.18
Sprite 로 애니메이션 표현하기와 그 methods 들 (0)	2012.10.11
코로나에서 외부 모듈은 어떻게 작동 될까? (0)	2012.08.29

jQuery Mobile/JQM Tutorial

radio 버튼의 값 할당하거나 retrieve 하기

2012. 11. 29. 09:34 | Posted by 솔웅

Assign and retrieve the value of a radio button

Radio button already present in the HTML code

radio button 을 선택하거나 해제하기 위해 <input> element에서 checked attribute 를 사용합니다. 만약 radio 버튼이 선택되면 같은 그룹안의 다른 radio 버튼들은 자동적으로 해제 됩니다. (한 그룹안에서는 오직 한개만의 radio 버튼이 선택될 수 있습니다.)

attr ("checked", "checked") method는 <input> element 상에서 사용되어 지는데요, radio 버튼을 선택할 때 사용합니다. (그러면 그 그룹안의 다른 radio 버튼은 해제 됩니다.) 그리고 attr ("checked", "") method 는 radio 버튼을 해제할 때 사용됩니다.
attr ("checked") method는 checked attribute 의 값을 retrieve 하는데 사용되어 집니다. return 값은 jQuery 의 버전에 따라 다른데요. jQuery 1.5 에서는 버튼이 선택되면 true가 반환되고 나머지는 false가 반환됩니다. jQuery 1.6 에서는 선택되면 "checked"가 그렇지 않으면 undefined가 반환됩니다.

Select the "2 rooms" radio button

$("input#id2").attr ("checked", "checked");

Deselect the "2 rooms" radio button

$("input#id2").attr ("checked", "");

Is the "2 rooms" radio button selected?

alert ($("input#id2").attr ("checked"));
// true / "checked" (selected), false / undefined (not selected)

아래 예제에서는 위에서 언급된 메소드들을 사용했습니다.

Selecting and deselecting a radio 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 the number of rooms: </span>

    <div data-role=controlgroup>

      <label for=id1> 1 </label>

      <input type=radio id=id1 name=rooms />

      <label for=id2> 2 </label>

      <input type=radio id=id2 name=rooms />

      <label for=id3> 3 </label>

      <input type=radio id=id3 name=rooms />

      <label for=id4> 4 </label>

      <input type=radio id=id4 name=rooms />

      <label for=id5> 5 </label>

      <input type=radio id=id5 name=rooms />

    </div>

  </div>

</div>

</body>

</html>

<script>

$("#id2").attr ("checked", "checked");

alert ($("#id2").attr ("checked"));     // Displays true or checked

alert ($("#id3").attr ("checked"));     // Displays false or undefined

</script>

tistory493_01.html

Radio button dynamically created

attr ("checked") 와 attr ("checked", "checked" / "") methods 들은 radio 버튼에 값을 할당하거나 그 값을 retrieve 할 때 사용합니다. 그리고 checkboxradio ("refresh") method 로 refresh 할 수 있습니다.

jQuery 에 의해 다이나믹하게 생성된 여러개의 radio 버튼이 있다고 가정합시다. checkboxradiocreate event 에서 2 rooms를 선택할 겁니다.

Select "2 rooms" in the 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 the number of rooms: </span>

  </div>

</div>

</body>

</html>

<script>

var html = "";

html += "<div data-role=controlgroup>";

html +=   "<label for=id1> 1 </label>";

html +=   "<input type=radio id=id1 name=rooms />";

html +=   "<label for=id2> 2 </label>";

html +=   "<input type=radio id=id2 name=rooms />";

html +=   "<label for=id3> 3 </label>";

html +=   "<input type=radio id=id3 name=rooms />";

html +=   "<label for=id4> 4 </label>";

html +=   "<input type=radio id=id4 name=rooms />";

html +=   "<label for=id5> 5 </label>";

html +=   "<input type=radio id=id5 name=rooms />";

html += "</div>";

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

$("#id2").bind ("checkboxradiocreate", function (event)

{

  $(this).attr ("checked", "checked").checkboxradio ("refresh");

});

</script>

tistory493_02.html

여기서는 checkboxradio ("refresh") method 가 필요한데요. radio 버튼이 window 가 생성된 다음에 할당됐기 때문입니다. (checkboxradiocreate event 에서 생성됐죠). 생성 되기도 전에 change 하면 아무 소용 없겠죠. 그리고 이런 경우 Firebug 에서 보면 jQuery error 를 보실 수 있습니다. 그래서 refresh 해 줄 필요가 있습니다.

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

다이나믹 하게 switch 만들기 (0)	2012.12.04
Radio 버튼 생성 예제들... (0)	2012.12.03
radio 버튼 커스터마이징 하기 (0)	2012.12.02
Radio button 에서 이벤트 관리하기 (0)	2012.12.01
기존 리스트에 radio button 추가하기/지우기 (0)	2012.11.30
Ajax 로 radio 버튼 insert 하기 (1)	2012.11.28
jQuery Mobile radio button 으로 HTML element 바꾸기 (1)	2012.11.28
다이나믹하게 radio button 생성하기 (0)	2012.11.28
체크 박스 생성 예제들 (0)	2012.11.27
체크박스 customize 하기 (5)	2012.11.27

jQuery Mobile/JQM Tutorial

Ajax 로 radio 버튼 insert 하기

2012. 11. 28. 21:28 | Posted by 솔웅

Insert radio buttons by Ajax

이전 글에서 처럼 Radio 버튼을 HTML 코드로 곧바로 생성하는 것 대신에 Ajax를 통해서 서버로부터 HTML 코드를 받는 방법도 있습니다.

Insert radio buttons 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 the number of rooms: </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);

    $("input").checkboxradio ();

    $("input").closest ("div:jqmData(role=controlgroup)").controlgroup ();

  }

});  

</script>

checkboxradio () 와 controlgroup () methods를 잘 보세요. checkboxradio () method 는 <input> 과 <label> elements 들을 jQuery Mobile 의 radio button 형식인 radio button (class ui-radio) 이 적용되는 <div> element 로 HTML 코드를 바꿔 줍니다. wrapping <div> element에서 controlgroup () method 를 call 한 것은 single visual set 로 radio 버튼을 그룹화 할 수 있도록 합니다.

action.php file

<?
$html = "";
$html .= "<div data-role=controlgroup>";
$html .=   "<label for=id1> 1 </label>";
$html .=   "<input type=radio id=id1 name=rooms />";
$html .=   "<label for=id2> 2 </label>";
$html .=   "<input type=radio id=id2 name=rooms />";
$html .=   "<label for=id3> 3 </label>";
$html .=   "<input type=radio id=id3 name=rooms />";
$html .=   "<label for=id4> 4 </label>";
$html .=   "<input type=radio id=id4 name=rooms />";
$html .=   "<label for=id5> 5 </label>";
$html .=   "<input type=radio id=id5 name=rooms />";
$html .= "</div>";
echo utf8_encode ($html);
?>

action16.php

tistory492_01.html

checkboxradio () 와 controlgroup () method 를 call 하는 대신에
create event를 triggering 함으로서 이 기능을 대신 할 수도 있습니다.

Using standard methods of the components (first way)

$("input").checkboxradio ();

$("input").closest ("div:jqmData(role=controlgroup)").controlgroup ();

그래서 위 코드 대신에 아래 코드를 넣어도 똑 같습니다.

Using the create event on the window (2nd way)

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

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Radio 버튼 생성 예제들... (0)	2012.12.03
radio 버튼 커스터마이징 하기 (0)	2012.12.02
Radio button 에서 이벤트 관리하기 (0)	2012.12.01
기존 리스트에 radio button 추가하기/지우기 (0)	2012.11.30
radio 버튼의 값 할당하거나 retrieve 하기 (7)	2012.11.29
jQuery Mobile radio button 으로 HTML element 바꾸기 (1)	2012.11.28
다이나믹하게 radio button 생성하기 (0)	2012.11.28
체크 박스 생성 예제들 (0)	2012.11.27
체크박스 customize 하기 (5)	2012.11.27
체크박스에서 이벤트 관리하기 (0)	2012.11.26

jQuery Mobile/JQM Tutorial

jQuery Mobile radio button 으로 HTML element 바꾸기

2012. 11. 28. 05:29 | Posted by 솔웅

Turning an HTML element into a jQuery Mobile radio button

이전 글에서 작성한 예제를 Firebug 로 보겠습니다. radio button 이 inclusion 된 이후 jQuery Mobile 에 의해 생성된 HTML 코드 입니다.

radio 버튼들을 감싼 <div>에 ui-controgroup CSS class 가 생겼습니다. 그리고 각각의 radio button 들은 <div> element가 생겼고 그 안에 ui-radio class 가 들어갔습니다. 그 안에 여러 <span> elements 가 있는 <label> element 가 있고 또 <input> element 가 있습니다.

모두 checkbox의 경우와 같습니다. 단지 ui-checkbox class가 ui-radio class로 바뀐 것 말고는요.

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

radio 버튼 커스터마이징 하기 (0)	2012.12.02
Radio button 에서 이벤트 관리하기 (0)	2012.12.01
기존 리스트에 radio button 추가하기/지우기 (0)	2012.11.30
radio 버튼의 값 할당하거나 retrieve 하기 (7)	2012.11.29
Ajax 로 radio 버튼 insert 하기 (1)	2012.11.28
다이나믹하게 radio button 생성하기 (0)	2012.11.28
체크 박스 생성 예제들 (0)	2012.11.27
체크박스 customize 하기 (5)	2012.11.27
체크박스에서 이벤트 관리하기 (0)	2012.11.26
리스트에 체크박스 삽입/삭제 하기 (0)	2012.11.25

jQuery Mobile/JQM Tutorial

다이나믹하게 radio button 생성하기

2012. 11. 28. 05:17 | Posted by 솔웅

jQuery Mobile에서 radio button을 다루는 것은 체크박스를 다루는 것과 아주 비슷합니다. Radio button은 <input> element에 type="radio" attribute를 넣어서 사용합니다. jQuery Mobile 에 의해 추가된 checkboxradio () method 는 radio button을 manage 합니다. radio button은 checkboxradio standard component 를 사용합니다.

Dynamically create radio buttons

<input> element에 type="radio" attribute 를 넣으면 radio 버튼이 생성됩니다. 여기서 name attribute 는 반드시 들어가야 할 항목 입니다. 이
name attributes 가 같아야지 하나의 그룹으로 묶을 수 있습니다. 이 <input> element 에는 radio 버튼에 대한 text를 가지고 있는 <label> element 가 필요하고 그 <label> element 안에는 for attribute 가 있어서 고유의 id attribute 를 정해 줍니다.

이 single set 로 된 그룹 radio 버튼들은 <div> element 안에 있고 그 <div> element 에는 data-role="controlgroup" attribute 가 있습니다.

Creating dynamic radio buttons

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

  </div>

</div>

</body>

</html>

<script>

var html = "";

html += "<div data-role=controlgroup>";

html +=   "<label for=id1> 1 </label>";

html +=   "<input type=radio id=id1 name=rooms />";

html +=   "<label for=id2> 2 </label>";

html +=   "<input type=radio id=id2 name=rooms />";

html +=   "<label for=id3> 3 </label>";

html +=   "<input type=radio id=id3 name=rooms />";

html +=   "<label for=id4> 4 </label>";

html +=   "<input type=radio id=id4 name=rooms />";

html +=   "<label for=id5> 5 </label>";

html +=   "<input type=radio id=id5 name=rooms />";

html += "</div>";

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

</script>

tistory490_01.html

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Radio button 에서 이벤트 관리하기 (0)	2012.12.01
기존 리스트에 radio button 추가하기/지우기 (0)	2012.11.30
radio 버튼의 값 할당하거나 retrieve 하기 (7)	2012.11.29
Ajax 로 radio 버튼 insert 하기 (1)	2012.11.28
jQuery Mobile radio button 으로 HTML element 바꾸기 (1)	2012.11.28
체크 박스 생성 예제들 (0)	2012.11.27
체크박스 customize 하기 (5)	2012.11.27
체크박스에서 이벤트 관리하기 (0)	2012.11.26
리스트에 체크박스 삽입/삭제 하기 (0)	2012.11.25
체크박스에 값 할당/retrieve 하기 (0)	2012.11.24

jQuery Mobile/JQM Tutorial

체크 박스 생성 예제들

2012. 11. 27. 21:55 | Posted by 솔웅

Examples of manipulation of checkboxes

Transmit all checkboxes values on a server and then display another window

체크박스 중에 한가지라도 changed 되면 체크박스의 값들을 서버로 전달하는 예제를 만들겠습니다. 서버측에서는 값을 받으면 각 체크박스의 상태정보가 담긴 또 다른 window 를 보낼 겁니다.

Transmit the checkboxes values and display a new 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: </span>

    <div data-role=controlgroup>

      <label for=id1> 1 bedroom </label>

      <input type=checkbox id=id1 name=p1 />

      <label for=id2> 2 bedrooms </label>

      <input type=checkbox id=id2 name=p2 />

      <label for=id3> 3 bedrooms </label>

      <input type=checkbox id=id3 name=p3 />

      <label for=id4> 4 bedrooms </label>

      <input type=checkbox id=id4 name=p4 />

      <label for=id5> 5 bedrooms </label>

      <input type=checkbox id=id5 name=p5 />

    </div>

  </div>

</div>

</body>

</html>

<script>

$(":checkbox").bind ("change", function (event)

{

  var data = { };

  $(":checkbox").each (function (index)

  {

    data[this.name] = $(this).attr ("checked");

  });

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

});

</script>

체크박스를 클릭할 때마다 서버로 call 하게 됩니다. 그러면 서버에서 보내 준 화면을 보게 되는데 그곳에는 체크박스가 selected 됐는지 안 됐는지에 대한 정보가 있습니다.

여기서 우리는 필드 이름이 포함된 data property를 사용했고 값들을 transmit 했습니다.
Eg p1, set to "true" (or "checked") if checked, or "false" (or "undefined") if not checked.

action.php file

<?
$p1 = $_REQUEST["p1"];
$p2 = $_REQUEST["p2"];
$p3 = $_REQUEST["p3"];
$p4 = $_REQUEST["p4"];
$p5 = $_REQUEST["p5"];

function display_selected ($p)
{
   if ($p == "true" or $p == "checked")
     echo ("checked");
  else
     echo ("unchecked");
}
?>

<!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> 1 bedroom : <?= display_selected ($p1) ?> </p>
    <p> 2 bedrooms: <?= display_selected ($p2) ?> </p>
    <p> 3 bedrooms : <?= display_selected ($p3) ?> </p>
    <p> 4 bedrooms : <?= display_selected ($p4) ?> </p>
    <p> 5 bedrooms : <?= display_selected ($p5) ?> </p>
  </div>
</div>
</body>

</html>

action14.php

tistory489_01.html

몇번 체크박스를 선택하고 나면 아래 그림처럼 될 겁니다.

Use a submit button to transmit information

체크박스 중 한가지라도 change 했을 때 그 값을 전달하는게 아니라 submit button을 눌렀을 때 그 값을 전달하게도 만들 수 있습니다.

Send the checkboxes when you click on the 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> Choose an apartment: </span>

      <div data-role=controlgroup>

        <label for=id1> 1 bedroom </label>

        <input type=checkbox id=id1 name=p1 />

        <label for=id2> 2 bedrooms </label>

        <input type=checkbox id=id2 name=p2 />

        <label for=id3> 3 bedrooms </label>

        <input type=checkbox id=id3 name=p3 />

        <label for=id4> 4 bedrooms </label>

        <input type=checkbox id=id4 name=p4 />

        <label for=id5> 5 bedrooms </label>

        <input type=checkbox id=id5 name=p5 />

      </div>

      <input type=submit value=OK>

    </form>

  </div>

</div>

</body>

</html>

form 안에 OK button 과 checkbox들이 있습니다. 그리고 <form action=action.php>이 있어서 버튼을 누르면 action.php를 call 하게 될 겁니다.

이 action.php는 이전에 사용했던 php 와 거의 동일합니다.

action.php file

<?
$p1 = $_REQUEST["p1"];
$p2 = $_REQUEST["p2"];
$p3 = $_REQUEST["p3"];
$p4 = $_REQUEST["p4"];
$p5 = $_REQUEST["p5"];

function display_selected ($p)
{
   if ($p == "on")
     echo ("checked");
  else
     echo ("unchecked");
}
?>

<!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> 1 bedroom : <?= display_selected ($p1) ?> </p>
    <p> 2 bedrooms: <?= display_selected ($p2) ?> </p>
    <p> 3 bedrooms : <?= display_selected ($p3) ?> </p>
    <p> 4 bedrooms : <?= display_selected ($p4) ?> </p>
    <p> 5 bedrooms : <?= display_selected ($p5) ?> </p>
  </div>
</div>
</body>

</html>

action15.php

tistory489_02.html

다른 점은 체크박스가 selected 됐는지 안 됐는지를 확인 하는 부분입니다. 여기서는 value 가 "on"인지의 여부를 봅니다. "on"이면 체크 된 상황이죠. "on"이 아니면 체크된 상황이 아니구요.

저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

기존 리스트에 radio button 추가하기/지우기 (0)	2012.11.30
radio 버튼의 값 할당하거나 retrieve 하기 (7)	2012.11.29
Ajax 로 radio 버튼 insert 하기 (1)	2012.11.28
jQuery Mobile radio button 으로 HTML element 바꾸기 (1)	2012.11.28
다이나믹하게 radio button 생성하기 (0)	2012.11.28
체크박스 customize 하기 (5)	2012.11.27
체크박스에서 이벤트 관리하기 (0)	2012.11.26
리스트에 체크박스 삽입/삭제 하기 (0)	2012.11.25
체크박스에 값 할당/retrieve 하기 (0)	2012.11.24
Ajax 로 checkbox 만들어 넣기 (0)	2012.11.21

My Shelter/tale

우리 이쁜 수지의 이쁜 트위터 글...

2012. 11. 27. 20:22 | Posted by 솔웅

우리 이쁜 수지가 이쁜 트위터 글을 올렸네.

영화 '26년' 을 꼭 보라는 글 하고...

희생당했던 분들께 감사드린다고 하는....

역시 이쁜 수지....

광주는 나한테도 특별한 대상이야...

고3때 비디오를 보고 그동안 믿었던 나라, 정부에 대해서 다시 생각하게 하고...

이후 대학 생활 내내 그리고 20대 30대 내내 뭔가 불 붙은 가슴을 가지게 한....

거의 성인으로서의 내 인생 전체를 지배하며 정치, 사회를 보는 시각의 큰 밑거름으로서 항상 자리 했던 그런 대상이야....

내가 고 3 때 봤던 광주 비디오는 서독에서 만든건데 (당시 독일은 통일 되기 전이지...)...

마지막에 나레이터가 울먹이면서 말하는 장면이 아직도 기억이 나.. (물론 그 의미는 자막 보고 알아 들은 거지만...)

"한국 국민은 6.25 전쟁을 극복하고 놀랄만한 경제 성장을 보였습니다. 그것은 박정희라는 독재자가 있었기 때문이 아닙니다. 독재자 박정희가 있었음에도 불구하고 훌륭한 경제 성장을 보였습니다. 한국 국민들의 민주주의를 위한 이 희생도 헛되지 않을 겁니다. 한국 국민들은 반드시 아름다운 민주주의를 꽃피울 겁니다."

뭐 이런 내용을 그 서독 아나운서가 막 울먹이면서 얘기 했었어...

그 장면은 20년이 훨씬 지난 지금도 내 뇌리속에 박혀있지...

박정희라는 독재자가 있었기 때문이 아니라 박정희라는 독재자가 있었음에도 불구하고 이룩한 경제성장이라는...

그런 국민이기에 한국 국민들은 오늘의 희생을 헛되이하지 않고 반드시 민주주의를 꽃피울 거라고....

그 후 서독은 통일 되서 독일이 됐고 지금은 유럽에서 가장 강력한 경제적인 위치를 차지하는 나라가 됐고...

한국은.....

그 박정희라는 독재자의 딸이 박정희 시대를 찬양하며 다시 대통령이 되겠다고 나서고 있어....

무고한 시민을 죽인 전두환은 경찰의 호위를 받으며 골프치러 다니고...

뭔가 잘못되가고 있는 한국을 바로 잡자고...

이번 선거에서... 꼬옥~~~~~~~

저작자표시 비영리 동일조건

'My Shelter > tale' 카테고리의 다른 글

현재 문재인이 앞서 나가고 있는 것일 수 있다.... (2)	2012.12.05
저는 문재인을 지지합니다. 안철수와 만들 새정치를 기대합니다. (0)	2012.12.04
프레이저 보고서 - 한국의 경제성장 이렇게 이뤄 졌다... (15)	2012.12.03
미국 직장 생활 영어를 다룬 새 블로그를 개설했어요. (0)	2012.12.02
대한민국 18대 대통령 후보 평가 - 재외국민 투표자용 선거 홍보물을 보고.... - (0)	2012.11.30
한반도... 독재자의 아들,딸이 말아먹도록 놔 둬야 되나? (0)	2012.11.15
계속되는 박근혜의 악수... 이건 능력이 없어서다... (0)	2012.11.06
언론, 방송사에 압력 가하는게 일상인 새누리당 (0)	2012.11.05
Cloud Atlas 를 보고 (0)	2012.11.05
미국 작은 마을 할로윈 파티에서 울려 퍼지는 강남 스타일 (0)	2012.10.28

IT 기술 따라잡기

공지사항

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

'분류 전체보기'에 해당되는 글 1554건

Radio button 에서 이벤트 관리하기

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

대한민국 18대 대통령 후보 평가 - 재외국민 투표자용 선거 홍보물을 보고.... -

'My Shelter > tale' 카테고리의 다른 글

기존 리스트에 radio button 추가하기/지우기

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

physics engine (물리엔진)의 새로운 기능 event.contact 소개

Introducing Physics “event.contact”

Pre-collision Event

One-Sided Platforms

Introducing the Physics Contact

Other Possibilities

See it in Action

In Summary…

'Corona SDK > Corona Doc' 카테고리의 다른 글

radio 버튼의 값 할당하거나 retrieve 하기

Radio button already present in the HTML code

Radio button dynamically created

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Ajax 로 radio 버튼 insert 하기

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

jQuery Mobile radio button 으로 HTML element 바꾸기

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

다이나믹하게 radio button 생성하기

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

체크 박스 생성 예제들

Transmit all checkboxes values on a server and then display another window

Use a submit button to transmit information

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

우리 이쁜 수지의 이쁜 트위터 글...

'My Shelter > tale' 카테고리의 다른 글

티스토리툴바