본문 바로가기

----- IT -----/jQuery Moblie66

jQuery Mobile - Text Formatting & Counts(텍스트와 리스트 카운트) 프레임웍크는 HTML 의미적 마크업을 통해 해더/설명, 보조정보, 카운트와 같은 일반적인 목록 패턴에 대한 텍스트 서식 규칙을 포함하고 있습니다. - 리스트 항목 오른쪽에 숫자 indicator를 추가하기 위해, ui-li-count의 class를 갖는 요소안에 number로 감쌉니다. - 텍스트 계층을 추가하려면, 제목의 폰트를 강조하고 강조를 사용하지 않는 구문을 사용합니다. - 보조 정보는 ui-li-aside의 class를 갖는 요소를 감싸서 리스트 항목의 오른쪽에 추가되어집니다. Friday, October 8, 2010 2 Stephen Weber You've been invited to a meeting at Filament Group in Boston, MA Hey Stephen, if y.. 2011. 6. 29.
jQuery Mobile - List dividers(리스트 구분자) List 항목은 구분선으로 나누거나 리스트 항목 그룹으로 만들 수 있습니다. 어떤 리스트 항목이더라도 data-role=”list-divider” 속성을 추가만 하면 됩니다. 이러한 항목은 b 테마로 스타일 되어지지만, data-dividertheme 속성을 리스트 요소(ul 혹은 ol)에 사용하여 구분자 테마를 지정할 수 있습니다. A Adam Kinkaid Alex Wickerham Avery Johnson B Bob Cabot C Caleb Booth Christopher Adams Culver James D David Walsh Drake Alfred E Elizabeth Bacon Emery Parker Enid Voldon F Francis Wall G Graham Smith Greta Pee.. 2011. 6. 28.
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 Beta 1 Released 오홋. 이제 알파 버젼이 아니라 베타 버젼으로 나왔네요. 따끈따끈 할 때 다시 봐야겠어요. 현재까지 올린 글들은 알파 버젼인데 이후 부터는 베타 버젼으로 올릴게 되겠네요.^^ 기존 알파 버젼에서 변경된 것들이 있으면 보면서 수정할께요. 2011. 6. 22.
jQuery Mobile - Datepicker(데이타 픽커) 터치 디바이스에 적합하도록 jQuery UI의 datapicker를 확장하려면 특정 파일을 추가하여야 합니다. 이 플러그인은 JQM에 기본적으로 내장되어 있지 않습니다. 그래서, 우리는 아래와 같은 파일을 추가해야 사용할 수 있습니다. datepicker는 type=”date” 속성을 가지고 있는 input 태그를 자동으로 변환해줍니다. Date Input: 보기 좋게 하기 위해서 label과 input 태그를 fieldcontain으로 감싸는 것을 추천합니다. 그리고 이러한 요소는 C-등급의 브라우저 접근을 위한 폼 요소 내부에 위치해야 합니다. 또한, native datapicker가 우리가 추가한 사용자화된 datapicker과 충돌하지 않도록, datapicker가 JQM에 의해 향상된 후에 da.. 2011. 6. 17.
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.

티스토리툴바