본문 바로가기

jquery mobile13

jQuery Mobile 폼 안녕하세요!! 오늘 포스팅은 jQuery Mobile 폼에 대해서 설명하겠습니다. jQuery Mobile은 폼을 매우 쉽게 만들수 있습니다. Text Inputs - 텍스트 박스 Search Inputs - 검색 Radio Buttons - 라디오 버튼 Checkboxes - 체크박스 Select Menus - 선택 메뉴 Sliders - 슬라이더 Flip Toggle Switches - 플립 토글 스위치 등을 사용할 수 있습니다. 기본적인 소스는 아래와 같습니다. 이름 : // 기본적으로 html 형식과 사용법은 유사합니다. 위 소스를 실행시킨 화면의 모습입니다. 라벨을 숨기고 싶을 경우 이름 : 이렇게 변경하여 실행하면 위 이미지에서 "이름" 부분을 숨길수 있습니다. 또 한가지 팁이 있는데 -> 처.. 2013. 12. 3.
jQuery Mobile 리스트 두 번째 안녕하세요!! 간만에 오늘 휴가라 이렇게 블로그 포스팅을 편한 시간대에 하게 되었습니다. ㅎㅎ; 오늘 포스팅할 내용은 이전 포스팅에 이어서 jQuery Mobile 리스트에 대해서 조금더 알아보도록 하겠습니다. 이전 포스팅에선 단순히 텍스트만 나오는 리스트에 대해서 알아보았는데 오늘 포스팅에서는 이미지도 넣어서 함께 리스트에 뿌려 보도록 하겠습니다. 모바일 페이지 구축할때 유용하게 사용하시기 바랍니다. 기본적인 소스의 구조는 아래와 같습니다. // 안에 내용 을 삽입하여 만들면 됩니다. 정말 매우 간단합니다. 그럼 소스를 직접 만들어 보겠습니다. List With Thumbnails: // 위와 같이 소스코딩을 한 후 파일의 제목은 편하신대로 만들고(저는 test.html 로 만들어보았습니다!) 이미지는.. 2013. 11. 28.
jQuery Mobile 리스트(List Views) 안녕하세요!! 또 오랜만에 jQuery Mobile 관련 내용을 올립니다. 요즘 이직한 새로운 직장에서 일배우느라 정신이 정말 없습니다. 지금도 공부를 해야하는데도 불구하고 이렇게 블로그를 씁니다. 6개월 넘게 블로그를 쓰다보니 정말 애착이 갑니다. 또 많은 분들이 질문도 주시고 답변하면서 보람도 느낍니다. 어쨋든 오늘 포스팅할 내용은 jQuery Mobile List 입니다. jQuery Mobile 을 사용하여 리스트 화면을 만들어보겠습니다. jQuery Mobile 리스트를 만들경우 또는 을 사용하여 나타냅니다. 그리고 를 사용하여 리스트들을 만들면 됩니다. 즉, 아래 소스와 같이 만들어지게 됩니다. OL 리스트 UL 리스트 리스트 화면을 직접 만들어보겠습니다. OL 리스트 OL 리스트1 OL 리스.. 2013. 11. 26.
jQuery Mobile Collapsible(접고 펴는 기능) 안녕하세요!! 요즘 8년 다닌 직장을 그만두고 새로운 직장에 취업해서 서울 본사에서 일 배우느라 정신없어서 포스팅을 이제야 씁니다. 주말 빼고 하루에 하나씩 계속 쓰는게 목표인데 이게 정말 쉽지 않은것 같습니다. ^^; 그래도 오늘 힘내서 jQuery Mobile 접고 펴는 기능(Collapsible)에 대해서 한번 알아보겠습니다. 접고 펴는 기능은 버튼을 클릭하면 열렸다가 다시 버튼을 클릭하면 닫히는 기능을 말합니다. 이곳을 클릭하세요!! 내용을 입력하세요... 기본 소스는 위와 같습니다. 위 구문에서 중요한것은 collapsible 입니다. 버튼 안의 내용은 자동적으로 버튼이 되고 내용 은 내용을 넣으시면 됩니다. 일단 소스를 보면서 다시 설명드리겠습니다. Collapsible 접고 펴기 이곳을 클릭.. 2013. 11. 20.
jQuery Mobile 네비게이션 바(Navigation Bars) 안녕하세요!! 이번에 포스팅할 jQuery Mobile 는 네비게이션 바(Navigation Bars) 입니다. 일반적으로 한 페이지의 구성은 상단, 내용, 하단 이렇게 3개의 단위로 나뉘어 지는데 네비게이션 바의 역할은 그 중간에 버튼등을 삽입하여 다른 페이지로 이동을 하는 기능을 합니다. jQuery Mobile 은 최대한 부하를 줄이고 빠른 페이지 로딩을 추구하기 때문에 네비게이션 바 소스역시 매우 단순합니다. 일단 백번의 설명보다는 한번 소스를 보는게 낫겠지요. 기본적인 소스 구성은 아래와 같습니다. 홈 1 페이지 2 페이지 // data-role에서 navbar을 정의 하고 ... 으로 메뉴를 설정합니다. 정말 깔끔하고 단순합니다. 그럼 이제부터 위의 내용이 적용된 소스를 만들어보겠습니다. 나의.. 2013. 11. 15.
jQuery Mobile 툴바(Toolbars) 안녕하세요!! 이번 포스팅은 지난 포스팅에 이어서 jQuery Mobile 툴바에 대해서 설명하겠습니다. 오늘 설명드릴 내용은 툴바에 대한 스크롤 입니다. 스크롤은 마우스에 달려있는 위, 아래 내리고 올리는 기능을 하는 역할이죠. 그런데 jQuery Mobile의 스크롤은 모바일에서 하는 것이기 때문에 손가락을 이용해서 한다고 보시면 되겠습니다. 스크롤은 총 3가지 방법으로 할 수 있습니다. inline : 기본적으로 헤더와 푸터 내용이 함께 스크롤 됩니다. fixed : 헤더와 푸터 내용은 고정된체 그 안의 내용만 스크롤 됩니다. fullscreen : 내용을 클릭하면 헤더와 푸터는 나타났다 사라졌다를 반복합니다. 내용만 보고 싶을 경우 한번 클릭하면 헤더와 푸터의 내용은 사라지며 내용만 스크롤을 하면.. 2013. 11. 13.
jQuery Mobile 툴바(toolbars) 안녕하세요!! 이번 포스팅은 jQuery Mobile 의 툴바에 대해서 알아보겠습니다. 내용이 조금 많은듯 해서 다음 포스팅과 반반 나눠서 포스팅해야 할듯 합니다. ^^; 우선 오늘 포스팅은 헤더 바(hearder bars)와 푸터 바(footer bars)에 설명하겠습니다. 사실 헤더(hearder)는 일반적으로 페이지 제목, 로고, 그리고 버튼을 포함하는 내용을 많이 담고 있습니다. 지금 보여드릴 예제는 여러분들이 왼쪽과 오른쪽에 버튼을 추가하는 내용입니다. 예제를 보시기 바랍니다. Home 나의 모바일 홈페이지 Search // 붉은 글씨로 표시된 부분을 보면 태그 태그 태그로 나오는 것을 볼 수 있고 data-icon 은 home 과 search 를 넣어서 해당하는 아이콘이 나오게 한것을 알 수 .. 2013. 11. 11.
jQuery Mobile 아이콘 안녕하세요!! 이번에 포스팅할 jQuery Mobile 내용은 아이콘 입니다. jQuery Mobile 은 아주 쉽게 아이콘을 생성할 수 있습니다. 오늘 그 부분에 대해서 알아보겠습니다. 우선 아래 간단한 소스를 보면서 설명드리겠습니다. Left Arrow Button // 위 구문에서 중요하게 보아야 할 곳은 붉은색으로 표시된 부분입니다. data-icon="arrow-l" 입니다. 여기서 l 은 left 의 줄임말이라고 보면 되겠습니다. 위 구문을 실행하면 아래와 같은 화면이 나오게 됩니다. // 위 그림을 보면 좌측에 아이콘이 생긴것을 확인할 수 있습니다. 이렇게 아이콘을 만들고 싶은 경우 data-icon 을 이용하여 사용하고 싶은 아이콘을 적어주기만 하면 됩니다. 아래 내용은 기타 아이콘들에 대.. 2013. 11. 7.
jQuery Mobile 버튼 안녕하세요!! 오랜만에 jQuery Mobile 포스팅을 하는것처럼 느껴집니다. 요즘 정신도 없고 게으르고 하다보니 그런듯하네요. 아무튼 이번에 포스팅할 내용은 jQuery Mobile 에서 사용되는 버튼의 종류 및 사용방법에 대해서 설명드립니다. jQuery Mobile 은 3가지의 방법으로 버튼을 만들 수 있습니다. 첫번째 방법은 입니다. Button 두번째 방법은 입니다. 세번째 방법은 입니다. Button // 여기서 특이점은 붉은 글씨로 표현된 부분입니다. 그냥 단순히 href 를 사용하면 텍스트에 링크만 걸게 되기 때문에 data-role="button" 이라고 정의를 하여 버튼을 생성합니다. 기본적으로 버튼은 화면의 전체 너비를 차지합니다. 하지만 두 개 이상의 버튼을 만들고자 할 경우 da.. 2013. 10. 31.
jQuery Mobile 페이지2 안녕하세요!! 이전 포스팅에서 jQuery Mobile의 페이지에 대해서 간략히 설명을 드렸었습니다. 내용이 너무 길어질듯해서 이렇게 단락을 잘라서 설명을 드리는점 양해 바랍니다. 아래 설명하는 내용은 페이지 이동입니다. 일단 소스를 보면서 설명드립니다. 나의 모바일 홈페이지 첫 번째 페이지입니다!! 두 번째 페이지 Copyright by makand123. All Rights Reserved. 나의 모바일 홈페이지 두 번째 페이지입니다!! 첫 번째 페이지 Copyright by makand123. All Rights Reserved. // 위 구문을 보면 ... 의 내용안에 과 이렇게 두개의 내용이 들어 있는것을 확인할 수 있습니다. 그리고 안의 내용은 header, content, footer 로 이.. 2013. 10. 28.
jQuery Mobile 페이지 안녕하세요!! 이번에 포스팅할 내용은 jQuery Mobile의 간단한 페이지를 만들어 보겠습니다. 원래 모바일이란 기기가 많이 업그레이드 되고는 있지만 우리가 흔히 사용하는 개인용 PC 처럼 CPU, 메모리 등이 많이 높지는 않습니다. 그래서 가끔 모바일 홈페이지들중에 버벅거리는 현상이 나타나는 경우가 종종 있죠. 아마도 계속 모바일 기기도 사양이 높아지고 있는 추세고 광대역 LTE도 나오고 있어서 점점 그런 경우는 줄어들거라 생각하지만 jQuery Mobile은 사실 모바일에 최적화 되어 있기 때문에 적은 소스 내용으로 최적의 모바일 환경을 구축할 수 있다고 보면 되겠습니다. 그럼 예제로 어떻게 구성되는지 간단히 알아보겠습니다. 나의 모바일 홈페이지 자 이제 시작해봅시다!! Copyright by m.. 2013. 10. 25.
jQuery Mobile 인스톨(Install) 안녕하세요!! 이번에 포스팅할 내용은 jQuery Mobile 의 Install(인스톨) 입니다. 인스토이라고 해서 사실 거창한건 크게 없으니 안심하셔도 됩니다. 이전 포스팅에서도 잠깐 설명을 드렸었죠. jQuery Mobile 의 인스톨은 상단에 라이브러리 3줄의 내용만 있으면 끝입니다. 그리고 라이브러리를 직접 다운받아서 서버에 저장하여 사용해도 무관합니다. 인스톨을 하기 위해서 컴퓨터(서버)에 어떠한 설치도 요구하는건 없습니다. 라이브러리는 총 3개이며 하나의 CSS 파일과 두개의 자바스크립트(JS) 파일입니다. // 위 처럼 서버에 다운로드된 주소의 링크를 걸면 되겠습니다. 이제 인스톨을 했으니 다음 포스팅부터 jQuery Mobile 의 페이지를 만들어가며, 여러가지 기능에 대해서 알아보겠습니다.. 2013. 10. 21.
jQuery Mobile 소개 안녕하세요!! 오늘부터 jQuery Mobile에 대해서 포스팅을 하려고 합니다. 요즘은 누구나 스마트폰 하나씩은 가지고 다닙니다. 그리고 많은 사람들이 스마트폰을 이용하여 인터넷검색, 인터넷뱅킹, 게임, 교육 등을 하고 살고 있습니다. 지금부터 설명드릴 jQuery Mobile은 모바일 환경에 최적화된 웹 응용프로그램을 만들기 위한 프레임워크라고 생각하면 됩니다. 그리고 jQuery Mobile 을 사용하기 위해선 기본적으로 HTML, CSS, jQuery에 대한 어느정도 지식이 있어야 합니다. 하지만 지식이 없다고 너무 걱정하지 마시기 바랍니다. ^^ jQuery Mobile이 끝나는대로 html, css등에 대해서 포스팅하겠습니다. 일단 편하게 읽어보고 화면이 어떻게 구성되는지 확인하심 되겠습니다... 2013. 10. 18.

티스토리툴바