programming/mobile web18 [mobile web] jquery mobile a tag hover 흉내내기 [mobile web] jquery mobile a tag hover 흉내내기 모바일에서 jquery mobile을 사용하면서 PC웹의 hover와 비슷하게 구현하는 방법에 대해서 구현해 보았습니다. 처음 $(function() {...});에서 메뉴영역에 대해서 jquery mobile의 tap 이벤트를 bind 하여터치로 메뉴를 선택하면 a 영역의 색깔이 바뀌도록 합니다.이벤트 적용 바로 다음에 setTimeout을 주어서 a 영역의 색깔을 원래대로 바꾸는 함수를 호출하는 것입니다. 간단하게 적용이 가능 할 것으로 보입니다. $(function(){ $(".comment li a").bind("tap", function(event) { $(".comment li a").addClass("test1").. 2013. 2. 20. [mobile web] 모바일웹 favicon 추가시 참고사항 [mobile web] 모바일웹 favicon 추가시 참고사항 모바일웹에서는 favicon의 사용을 안 하는 경우도 있는데 모바일 바탕화면에 바로가기 아이콘을 만들거나 할 경우 필요한게 favicon입니다. 그러므로 모바일웹 페이지에는 favicon 설정이 들어가야 합니다. 기본적으로 안드로이드, 아이폰 계열입니다. 1. favicon 1) 안드로이드 계열의 경우 ico 사용 사이즈: 128*128 2) 아이폰 계열의 경우 png 사용 사이즈(아이폰): 57*57 (자동 리사이즈 되므로 114*114 이용해도 됨) 사이즈(아이폰4): 114*114 사이즈(아이패드): 72*7257 (자동 리사이즈 되므로 114*114 이용해도 됨) 2. 홈화면에 추가시 1) 안드로이드 계열의 경우 Ico 적용 그대로 사.. 2012. 11. 8. [mobile web] jquery mobile에서 a tag에 유사 클래스 사용하기 [mobile web] jquery mobile에서 a tag에 유사 클래스 사용하기 로그인 화면에서와 마찮가지로 data-role=”none”을 주었을 때 Jquery mobie의 class가 자동으로 적용되지 않습니다. 1,2를 적용해 보았을 때 Jquery mobile을 사용하더라도 정상적으로 a tag에 유사클래스가 적용되어 동작합니다. 1. a tag에 data-role=”none” 적용 1- 1 2. 유사 클래스 적용 .test1:active, .test1:hover { color: #333333; background-color: #AACCAA; } .test2:active, .test2:hover { color: #FFCCAA; background-color: #DDCCAA; } 터치시에 색.. 2012. 11. 2. [mobile web] hash change 게시판 [mobile web] hash change 게시판 테스트된 페이지를 이용하면 hash change 게시판을 만들기에는 부족함이 없을 것으로 보입니다. ajax과 hash change를 이용하여 구현하여 보았습니다. 1. hash 값을 가진 url 호출 http://127.0.0.1/hashchange/hash/board.jsp#page5 처음에 board.jsp 안에 ajax으로 pageData를 가져와서 넣어주었습니다. id="firstPage" 만 있고 calss는 ui-page-active 상태입니다. [5 ] 2 page를 클릭했습니다. 브라우저의 url은 ~#page2로 변경되었습니다. id="firstPage"의 class에 ui-page-active가 사라지고 id="page2"가 생기면서.. 2012. 11. 1. [mobile web] Hash change의 GET, POST 방식 [mobile web] Hash change의 GET, POST 방식 1) Hash change POST 방식 $.mobile.changePage(url, { type: "post", data: $("form#pageForm").serialize() }); 2) Hash change GET 방식 $.mobile.changePage(url, "slidedown", "reverse"); [mobile web] Hash change의 GET, POST 방식 2012. 10. 30. [mobile web] 모바일웹 jquery mobile hash change 적용 게시판 [mobile web] 모바일웹 jquery mobile hash change 적용 게시판 모바일에서 게시판을 만들면서 기존 방식에서 벗어나 hash change를 이용한 게시판을 만들어 보았습니다. 테스트 로직은 기존 게시판의 로직을 그대로 이용하면서 data의 흐름쪽에서 변화를 가져왔습니다. 기존에는 get/post 방식으로 url 을 가지고 파라메터를 전달해서 쿼리를 수행하여 페이지 전체를 받아서 화면을 전환하는 방법이었다면 지금은 모바일에 맞추어서 전체 페이지는 처음에 로딩한 상태로 두고 ajax을 이용하여 게시물만 받아서 게시물영역만 교체해주는 방식입니다. 이 방식으로 바꾸고 페이지 전환시 다시 로딩이 필요없는 js, css, header, footer 영역의 data를 가져오지 않습니다. [그.. 2012. 10. 26. 이전 1 2 3 다음
