본문 바로가기

제이쿼리 모바일4

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 페이지2 안녕하세요!! 이전 포스팅에서 jQuery Mobile의 페이지에 대해서 간략히 설명을 드렸었습니다. 내용이 너무 길어질듯해서 이렇게 단락을 잘라서 설명을 드리는점 양해 바랍니다. 아래 설명하는 내용은 페이지 이동입니다. 일단 소스를 보면서 설명드립니다. 나의 모바일 홈페이지 첫 번째 페이지입니다!! 두 번째 페이지 Copyright by makand123. All Rights Reserved. 나의 모바일 홈페이지 두 번째 페이지입니다!! 첫 번째 페이지 Copyright by makand123. All Rights Reserved. // 위 구문을 보면 ... 의 내용안에 과 이렇게 두개의 내용이 들어 있는것을 확인할 수 있습니다. 그리고 안의 내용은 header, content, footer 로 이.. 2013. 10. 28.