본문 바로가기

JQM60

jQuery Mobile - Inline Buttons 디폴트 버튼의 가로 길이는 스크린을 꽉 채운 형태입니다. 만약, 작은 버튼을 만들고자 한다면, 버튼 속성으로 data-inline=”true” 를 추가해 주면 됩니다. Button 만약, 같은 라인에 여러 버튼을 나열하고 싶은때는 버튼 태그를 data-inline=”true” 속성을 추가한 상위 div 태그로 감싸줍니다. Cancel Save 하지만 실제로 해보니 아직은 적용이 안되네요. 버젼이 올라가면 가능해질 것 같습니다. 불편하지만 현재까지는 각 태그별로 속성을 추가하여야 합니다. Cancel lalalaalal Save 이렇게 말이죠.^^ 2011. 5. 18.
jQuery Mobile - Custom icon 사용자 아이콘을 사용하기 위해, data-icon 값(ex, myapp-daeson)을 유일한 이름으로 설정하면 버튼 플러그인이 data-icon 값 앞에 ui-icon-을 붙여 class를 생성합니다. 사용자는 ui-icon-myapp-daeson class 속성을 타겟으로 css를 구현 가능하며, 일관성을 유지하기 위해 18x18 pixels와 PNG-8의 알파 투명도 규격으로 사용합니다. Test Custom icon html파일에 추가할 css 파일을 link 하고, 아래와 같이 배경색과 아이콘의 가로길이 사이즈를 설정해봅니다. .ui-icon-cheolwoo { background-color : red; width : 2em; } 테마 A의 아이콘 버튼 My button 테마 B의 아이콘 버튼 .. 2011. 5. 17.
jQuery Mobile - Button icons 버튼에 아이콘을 추가할 수 있습니다. JQM 프레임웍은 모바일 앱에서 자주 사용되는 아이콘을 포함하고 있습니다. 저용량 다운로드 JQM버젼에는 모든 배경색에 훌륭하게 대비될 수 있는 검정색의 반투명 원모양위에 하얀색 아이콘을 포함하고 있습니다. Ex1. Delete Ex2. 버튼 태그에 아이콘 추가하기(버튼 태그에는 아이콘이 아직 제대로 적용이 안되네요^^) delete icon Button Ex3. Input type=”submit” 태그에 아이콘 추가하기 그외에도 아래와 같이 많은 아이콘들이 사용 가능합니다. 아이콘의 위치 아이콘의 디폴트 위치는 왼쪽입니다. 아이콘의 위치 설정 속성은 data-iconpos=[right, top, bottom] 입니다. right position icon Delete.. 2011. 5. 17.
jQuery Mobile - Button markup options 버튼들은 앵커 태그를 사용하는 링크와 같은 네비게이션의 용도와 폼을 전송하기 위한 용도로 많이 사용됩니다. -링크를 버튼 스타일로 만들기 링크를 위한 앵커 태그에 [data-role=”button”] 속성을 추가하면, 프레임웍에서 해당 링크를 버튼 스타일로 보이도록 css를 생성해 줍니다. link bar -폼 버튼 편리한 스타일링을 위해 프레임웍에서 자동적으로 버튼 태그를 변환해줍니다. Input 타입이 submit, reset, button, image들도 [data-role=”button”] 속성이 없더라도 버튼 처럼 자동으로 변환해줍니다. 기본 버튼 임의의 버튼 태그에 강제로 속성을 추가해 스타일을 셋팅해 보려하니 적용이 되지 않았습니다. 그래서, 프레임웍에서 자동으로 변환하는 소스를 보니 아래와.. 2011. 5. 16.
jQuery Mobile - Theming toolbars 해더와 풋터는 페이지의 스타일의 중요한 역할을 하기 때문에 기본적으로 ‘a’ 테마가 적용될 것입니다. 다른 테마를 적용하기 원한다면 data-theme 속성에 원하는 테마를 a~e까지 셋팅하면 해당 테마가 적용됩니다 a테마 기본 예제입니다. Cancel Bar theme "a" Save 해더와 풋더에 각각 테마를 적용한 예제입니다. left right up down a테마 부터 e테마까지 위 예제를 이용해 변경해본 화면입니다. 각 태그 마다 개별 테마를 지정할 수도 있으니 이쁘게 꾸며 보세요^^ 2011. 5. 16.
jQuery Mobile - Persistent footer navbar 페이지의 풋터에 페이지가 이동되어도 유지되는 가로 네비게이션 바를 생성할 수 있습니다. 풋터의 다른 네비게이션 링크를 클릭하면 페이지가 이동되어지면서도 풋터는 고정되어있는 것을 볼 수 있습니다. 연관된 페이지들의 풋터는 같은 data-id 속성을 가지고 있기 때문에 새로운 페이지로 이동되어도 풋터가 고정됩니다. 고정 풋터의 페이지가 보여질때 활성화된 버튼이 남아 있도록 하고 싶다면 ui-btn-active와 ui-state-persist의 class를 추가하면 됩니다. Friends Albums Emails 네비바의 Friends를 클릭하면 페이지는 해당 링크를 따라 이동 되어지고, 네비바는 고정된 것 처럼 보이게 됩니다. 페이지 이동시 네비바에서 선택된 부분의 활성화를 위해서는 하드코딩을 하거나 스크립.. 2011. 5. 13.
jQuery Mobile - Fixed or Fullscreen toolbar Fixed toolbars “fixed” 해더와 풋터를 알아보겠습니다. 가식적인 스크롤 스크립팅 대신에 자연스런 스크롤을 사용할수록 더욱더 자연스러운 페이지 컨텐트의 흐름이 가능합니다. 해더와 풋터가 시야에서 사라지게 되면, 여러분은 화면은 터치하여 다시 보여지게 할 수 있습니다. 다시 화면을 터치하거나 페이지를 스크롤 하면 페이지 뒤로 사라질 것입니다. 이를 위해 툴바 컨테이너에 data-position=”fixed” 속성을 추가해 줍니다. Fixed toolbars 아래 처럼 페이지의 맨 위에 해더가 고정되어있고, 페이지의 맨 아래에 풋터가 고정되어 있습니다. 스크롤을 해보면 아직 브라우저별로 차이는 있겠지만 아래와 같이 해더와 풋터가 같이 움직입니다. 화면을 클릭 혹은 터치를 하게 되면 해더와 풋터.. 2011. 5. 13.
jQuery Mobile - navbar JQM은 보통 header나 footer 안에 존재하는 바에 옵션 아이콘 5개 버튼까지 제공하는데 유용한 기본적인 navbar 위젯을 가지고 있습니다. Navbar는 data-role=”navbar”를 가지는 컨테이너 엘리먼트로 감싸져 있는 링크들의 리스트로 코드화되어 있습니다. 엥커 태그에 class=”ui-btn-active” 속성을 추가 하면 링크들중 하나를 active(seleted) 상태로 셋팅하게 됩니다. 다음 예제는 footer내에 두개의 버튼으로 이루어진 navbar에서 “One” 버튼을 활성화 하였습니다. One Two Navbar의 아이템들은 균일하게 공간을 나누어 셋팅됩니다. 이 경우 브라우저의 가로길이의 반씩을 차지하게 됩니다. Navbar는 최대 5개의 아이템들을 수용할 수 있습니.. 2011. 5. 12.
jQuery Mobile - Footer bar Footer bar는 data-role이 footer 값인것 외에 header 와 같은 구문을 사용합니다. Footer content footer 툴바 역시 기본적으로 a 테마를 적용받으며, 쉽게 테마를 변경할 수 있습니다. 옵션 및 설정하는 개념이 header 와 매우 비슷합니다. 가장 큰 차이는 footer는 header보다 비교적 덜 구조적이며 유연하기에 왼쪽이나 오른쪽으로 자동 정렬을 하지 않습니다. Adding buttons Footer에 추가된 어느 링크나 버튼 마크업은 자동적으로 버튼 으로 변경되어 집니다. 공간 절약을 위해 문구와 아이콘의 길이만큼 inline 스타일을 셋팅합니다. 툴바의 이동버튼이나 위젯들 사이에는 어떤 패딩값도 없기 때문에 패딩을 적용하고 싶다면 class=”ui-bar.. 2011. 5. 12.
jQuery Mobile - Header bars Header structure 해더는 화면 가장 위에 나타나는 툴바입니다. 보통은 화면의 타이틀 문구와 왼쪽이나 오른쪽에 화면이동이나 어떤 행동을 하기 위한 버튼이 보여 질 수 있습니다. 타이틀 문구로는 일반적으로 태그를 사용합니다. 그러나 h1~h6까지 유연하게 사용도 가능합니다. 예를들어, 여러 페이지를 포함하는 화면에서 메인 페이지에는 H1를, 두번째 페이지에서는 H2를 사용합니다. 모든 해더레벨은 기본적인 태그별 스타일이 적용됩니다. Page Title Default header features 해더 툴바의 디폴트 테마는 검정색의 ‘a’ 테마이며, 사용자가 쉽게 테마 변경이 가능합니다. 그리고, 이전 페이지로 돌아가기 편리하도록 프레임웍에서 뒤로가기 버튼을 자동으로 만들어 줍니다. 만약 뒤로 가는.. 2011. 5. 11.

티스토리툴바