본문 바로가기

----- IT -----111

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.
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.
jQuery Mobile - Radio buttons(라디오버튼) 라디오 버튼은 옵션 목록중에 하나의 항목을 선택 할 때 사용됩니다. 전형적인 라디오 버튼은 모바일 환경에서 클릭하기 어려움이 있어, jQuery Mobile에서는 크고, 클릭가능하도록 라벨 스타일로 보여지게 됩니다. 사용자 아이콘 셋을 라벨에 추가할 수도 있습니다. Radio 와 checkbox 컨트롤은 input과 label 마크업을 기본으로 사용합니다. Label 요소를 통해 스타일을 제어할 수 있는데 이는 실제 input 위에 위치 하게 됩니다. 그래서 만약, 라벨의 이미지가 로드하는데 실패했더라도 input의 기능적인 제어는 가능하게 됩니다. 대부분의 브라우저에서 라벨을 클릭하면 input이 자동적으로 클릭됩니다. 그러나 몇몇 모바일 브라우저에서는 수동적으로 해야 했습니다. Vertically g.. 2011. 6. 7.

티스토리툴바