본문 바로가기

javascript62

jQuery Mobile - Split Button Lists(분할 버튼 리스트) 리스트 항목에서 하나 이상의 가능한 액션이 있을 경우, split 버튼은 두가지의 독립적은 클릭 가능한 항목(리스트 항목과 오른쪽의 작은 화살표 아이콘)으로 사용할 수 있습니다. Split list를 만들기 위해, 간단하게 li 태그안에 두번째 링크를 추가하고 프레임웍크는 화살표모양의 아이콘에 링크와 같은 스타일과 세로 구분선을 추가할 것입니다. 그리고 접근성을 위한 텍스트 링크에서 링크의 제목 속성을 셋팅합니다. Broken Bells Broken Bells Purchase album Warning Hot Chip Purchase album Wolfgang Amadeus Phoenix Phoenix Purchase album Of The Blue Colour Of The Sky Ok Go Purchas.. 2011. 6. 27.
jQuery Mobile - Numbered Lists (순위 리스트) List는 또한 정렬된 리스트를 만들 수 있습니다. 검색결과나 무비 큐와 같은 순서있는 아이템들을 표기할 때 유용합니다. 향상된 마크업을 리스트 뷰에 적용할 때, JQM은 첫번째로 CSS를 사용해 리스트에 숫자를 추가합니다. The Godfather Inception The Good, the Bad and the Ugly Pulp Fiction Schindler's List 12 Angry Men One Flew Over the Cuckoo's Nest Star Wars: Episode V - The Empire Strikes Back The Dark Knight The Lord of the Rings: The Return of the King Seven Samurai Star Wars: Episode .. 2011. 6. 26.
jQuery Mobile - Nested Lists(내장된 리스트) List 아이템 안에 ul 태그나 ol 태그를 사용해 nested list를 만들수 있습니다. 자식 list와 해당 list를 클릭할 때 프레임워크는 헤더에 부모의 제목과 하위 요소의 목록이 채워진 새로운 UI 페이지를 생성합니다. 이런한 동적 nested list는 네비케이션의 보조 레벨로서 b 테마의 스타일을 적용받게 됩니다. List는 여러 레벨의 깊이를 갖을수 있고 모든 페이지와 링크는 프레임웍크에 의해 자동적으로 처리됩니다 Animals All your favorites from aarkvarks to zebras. Pets Canary Cat Dog Gerbil Iguana Mouse Farm animals Chicken Cow Duck Horse Pig Sheep Wild animals Aa.. 2011. 6. 25.
jQuery Mobile - Basic Linked Lists(링크 리스트) List view는 data-role=”listview”속성을 갖는 linked list 아이템을 포함하는 비정렬된 리스트입니다. JQM은 오른쪽 화살표 지시자를 추가하고, 모바일 환경에 적합한 스타일을 적용하여, 브라우저창의 가로 길이를 최대로 사용합니다. 리스트의 아이템을 탭(터치)하면 해당 아이템의 링크를 클릭한 것 처럼 동작하고 AJAX방식으로 페이지를 요청합니다. 새로운 페이지는 DOM으로 페이지에 추가되고, 페이지 전환 애니메이션이 보여집니다. Acura Audi BMW Cadillac Chrysler Dodge Ferrari Ford GMC Honda Hyundai Infiniti Jeep Kia Lexus Mini Nissan Porsche Subaru Toyota Volkswagon Vo.. 2011. 6. 24.
jQuery Mobile - Form Plugin Methods(폼 플러그인 메소드) JQM이 사용자 정의 컨트롤의 폼 컨트롤러를 자동으로 변환해준 후, 플러그인 메소드를 통해 많은 속성들을 조작할 수 있습니다. 아래는 현재 사용가능한 메소드들입니다. Github을 통해 업데이트 상황을 확인할 수 있습니다. Selectmenu Methods open : $('select').selectmenu('open'); close : $('select').selectmenu('close'); refresh value : $('select').selectmenu('refresh'); refresh and force rebuild : $('select').selectmenu('refresh', true); enable : $('select').selectmenu('enable'); disable : $.. 2011. 6. 16.
jQuery Mobile - Ajax Form Submission(폼 전송) JQM에서 폼 전송은 Ajax를 사용하여 자동적으로 동작하고, form과 결과 페이지 간의 이동을 자연스럽게 만들어 줍니다. Form submit을 보장하기 위해 action 과 method properties가 폼 요소로 명시 되어져야 합니다. 명시되지 않을 경우 method는 디폴트인 get으로 action는 $.mobile.path.get()을 통해 현재 페이지와 관련된 경로를 디폴트로 갖게 됩니다. form들은 앵커 태그와 같은 전송을 위한 속성을 수용합니다. Data-transition=”pop”과 data-direction=”reverse” 처럼 Ajax를 사용하지 않고 폼을 전송하기도 합니다. 전역적으로 Ajax 사용을 disable할 수 있고, data-ajax=”false”속성을 통해 폼.. 2011. 6. 14.
jQuery Mobile - Native form elements & buttons(네이티브 요소와 버튼) 프레임웍에서 폼 요소와 버튼들을 touch input에 적합한 컨트롤들로 자동적으로 변환시켜 줍니다. Data-role=”none”속성을 사용하면 어떤 폼 요소나 버튼들을 프레임웍에서 변환하지 않고 기본 요소로 사용할 수 있습니다. 모든 기본 스타일링은 그대로 사용하기 때문에 사용자 정의 스타일을 사용할 필요가 있습니다. Text Input: Textarea: Search Input: Flip switch: Off On Slider: Choose as many snacks as you'd like: Cheetos Doritos Fritos Sun Chips Font styling: b i u Choose a pet: Cat Dog Hamster Lizard Layout view: List Grid Gal.. 2011. 6. 13.
jQuery Mobile - Form themes(폼 테마) 5가지 테마를 사용한 예제 입니다. Body swatch A Text Input: Flip switch: Off On Slider: Font styling: b i u Choose a pet: Cat Dog Hamster Lizard Choose shipping method: Standard: 7 day Rush: 3 days Express: next day Overnight Body swatch B Text Input: Flip switch: Off On Slider: Font styling: b i u Choose a pet: Cat Dog Hamster Lizard Choose shipping method: Standard: 7 day Rush: 3 days Express: next day Over.. 2011. 6. 10.
jQuery Mobile - Select menus(선택 매뉴) 선택매뉴는 기본 Select 요소와 좀 다릅니다. 하지만, 기본 select들은 뷰에 숨겨져 있으면서 JQM에 의해 스타일이 변경된 select 버튼으로 바뀝니다. 변화된 select들은 ARIA를 사용가능하며 데스크탑에서 키보드로 접근 할 수 있습니다. 선택버튼이 클릭되면, OS의 기본 select menu 선택자가 열리게 됩니다. Value가 매뉴에서 선택될 때, 사용자 지정 select 버튼은 새로운 선택과 일치하도록 업데이트 됩니다. 페이지에 select 위젯을 추가하기 위해, 표준 select요소와 option 요소의 셋을 생성하고, label 태그의 for속성에 select 태그의 id를 일치시킵니다. 그 후 div 태그로 감싸고 속성으로 data-role=”fieldcontain”을 추가합니.. 2011. 6. 9.
jQuery Mobile - Checkboxes(체크박스) Checkboxes checkbox들은 하나 이상의 아이템을 선택할 수 있는 옵션 목록을 제공합니다. 전형적인 checkbox는 터치 환경에 적합하지 않아서 jQuery Mobile에서는 label을 사용해 크고, 클릭하기 좋은 스타일로 만들어줍니다. 사용자 지정 아이콘을 사용하는 것도 가능합니다. Radio 버튼과 마찬가지로 input과 label 마크업을 사용하고, label 요소로 스타일을 제어하며 input 요소 위에 위치 되어집니다. 그래서, 만약, label의 이미지가 로드시 실패하더라도, input의 기능적인 제어는 가능합니다. 대부분의 브라우저에서는 label를 클릭하면 자동적으로 input이 클릭되게 되지만, 몇몇 모바일 브라우저에서는 수동적으로 해야 했습니다. Checkbox를 만들기 .. 2011. 6. 8.