2012-01-09 6 views
8

PhoneGap 및 jQuery Mobile을 사용하여 iPhone 앱을 개발하려고합니다. 이 앱은 Fixed Footer입니다.jQuery 모바일 데이터 페이지 = '콘텐츠'만 전환

내가 직면 한 주된 문제는 내장 페이지 전환이 모든 페이지의 하단 코드 인 copy/paste을 필요로하는 전체 페이지를 변경한다는 것입니다.

물론이 방법을 사용하는 것은 아닙니다. 바닥 글의 작은 변경 사항은 10+ 페이지 (10+ 페이지의 경우)와 중복되어야합니다.

내 질문은 다음과 같습니다. 어떻게 페이지의 "콘텐츠"부분 만로드 할 수 있습니까? (슬라이드 전환 사용) 모든 페이지에서 바닥 글 코드를 사용해야 할 필요가 없습니까?

답변

5

그 기능은 아직 jQuery Mobile에서 사용할 수 없습니다. iOS 5 기기에서 "실제"고정 바닥 글 및 고정 헤더에 대해 touchOverflowEnabled 옵션을 켤 수 있지만 다른 기기에서는 사용할 수 없습니다.

진정한 고정 된 도구 모음을 얻으려면 브라우저가 지원 위치 : 고정 또는 오버플로 : 자동 중 하나가되어야합니다. 다행히도이 지원은 으로 모바일 플랫폼에 제공되므로 웹 표준을 통해이를 달성 할 수 있습니다. jQuery Mobile에서 우리는 이라는 전역 기능을 추가했습니다. 이는 iOS5와 같은 지원되는 플랫폼 인 에서 overflow : auto CSS 속성을 활용하는 touchOverflowEnabled를 추가했습니다. 이 기능을 사용하면 프레임 워크는 각 페이지를 내부 스크롤링 기능을 가진 컨테이너에 래핑합니다. 이를 통해 은 스크롤 바깥에 툴바를 배치하여 실제로 에 고정되어 있습니다.

출처 : http://jquerymobile.com/demos/1.0/docs/toolbars/bars-fixed.html

당신 그러나 설정하여 프로그래밍 영지에서 바닥 글보다는 하드 코딩 각 페이지 수 있습니다 http://jsfiddle.net/vNqaG/ (주의 : 여기에

//bind an event handler to the `pagecreate` event for all `data-role="page"` elements 
$(document).delegate('[data-role="page"]', 'pagecreate', function() { 

    //append a footer to this page (`pagecreate` is only called once per page added to the DOM so you don't have to worry about appending multiple footers to a single page 
    $(this).append('<div data-id="my-fixed-footer" data-position="fixed" data-role="footer">{THE HTML FOR YOUR FOOTER GOES HERE}</div>'); 
}); 

는 데모입니다 HTML 창에 하드 코딩 된 바닥 글이 없음)

-5

I 웹 애플리케이션에서 데이터베이스를 사용하고 있다면, footer html을 데이터베이스에 추가하고 모든 페이지마다 PHP로로드 할 수 있습니다. 처음에는 모든 페이지에 PHP를 하드 코딩해야하지만, 그 후에는 바닥 글을 변경하는 데 필요한 모든 작업 만 데이터베이스를 빠르게 편집하는 것입니다. MySQL/PHP를 찾는다.

+0

데이터베이스에 HTML을 저장하는 것은 좋지 않습니다. 데이터베이스는 HTML 뷰가 아닌 데이터 용입니다. 시간이 지남에 따라 서로 다른 관심사가 분리되고 분류되지 않아 유지하기 어려운 혼란이 생길 ​​수 있습니다. – ROFLwTIME

관련 문제