Jqtouch의 고정 헤더

Question

jqtouch의 basic theme에서 고정 헤더 (+ footer maybe ...)를 변경하려면 어떻게해야합니까? 위치를 고정 시키려고 시도했지만 아무 것도 작동하지 않았습니다 ...

Answer 1

모바일 Safari는 위치를 고정적으로 지원합니다 (적어도 웹 개발에 유용하지는 않음).

또는 당신은 아이폰에서 실행되는 모바일 사파리의 현재 버전에서이에 대한 지원은 없다에서 토마스는 지적 this javascript solution

Answer 2

을 구현하기 위해 시도 할 수 있습니다.

어쨌든 jQTouch를 사용하는 경우 최신 다운로드와 함께 제공되는 "floaty"확장 프로그램을 살펴보십시오. 약간의 지연에도 불구하고 스크롤과 함께 움직이는 부동 div가 추가됩니다. 이 동작은 모바일 Gmail 인터페이스의 "아카이브"막대와 매우 유사합니다.

여기에 뜨는 언급 jQTouch의 확장 페이지는 다음과 같습니다 http://code.google.com/p/jqtouch/wiki/Extensions

그냥 최신 번들을 다운로드하고 모든 것을 거기에있다. 완벽한 솔루션은 아니지만 아무것도없는 것보다 낫습니다. jQTouch이 플러그인

Answer 3

체크 아웃 - http://code.google.com/p/jqtscroll/

Answer 4

이 사이트를 살펴 보자은 별도의 사업부를 사용하는 http://demo.lvengine.net/mobileuplink

참고 :

<div id="jqt"> 

는 자바 스크립트를 살펴 보자를 및이 사이트에서 CSS. 저자는 원래 수정 된 jqtouch 스크립트를 약간 수정했습니다.

"고정"바닥 글의 경우. 탭 표시 줄, 당신은 단순히 DIV #의 jqt와 같은 수준에서 추가 사업부를 추가

<div id="other"> 
    <div class="tabbar"> 
     <ul> 
      <li class="two"><a href="first.html">first tab</a></li> 
      <li class="two"><a href="two.html">second tab</a></li> 
     </ul> 
    </div> 
</div> 

그런 다음 .tabbar에 대한 CSS를 코드입니다. 예를 들어 내 사용

.tabbar 
{ 
    position: absolute; 
    bottom:0px; 
    width:100%; 
    height:48px; 
    border-top:1px solid #444; 
    overflow:hidden; 
    padding: 0; 
    margin: 0; 
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); 
} 

.tabbar li 
{ 
    float: left; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: smaller; 
    display: block; 
    text-align: center; 
    border-right:1px solid #333; 
    border-left:1px solid #6a6a6a; 
} 

.tabbar li:first-child 
{ 
    border-right:1px solid #333; 
    border-left:0; 
} 

.tabbar li:last-child 
{ 
    border-right:0; 
    border-left:1px solid #6a6a6a; 
} 

.tabbar ul 
{ 
    border: 0; 
    margin: 0; 
    list-style: none; 
} 

.tabbar a 
{ 
    padding: 0; 
    margin: 0; 
    display:block; 
    text-decoration:none; 
    font-size: 0.8em; 
    color:#eee; 
    line-height:1.6em; 
} 

.tabbar li.two  {width: 50%;} 

Answer 5

이 DataZombies jQtouch Fork에서보세요 - 자신의 향상된 기능은 정말 멋진 고정 머리글과 바닥 글을 포함!

는 =>Tabbar Demo

그가 독립적으로도 사용 될 수 iScroll, 사용 보인다.

Answer 6

내가 jQtouch 에 http://www.itabbar.com

을 고정 TabBar의를 추가, 내 버전에서 일하고 있어요 그것의 jQtouch, iScroll 및

여기 iTabbar와 함께 작업 online demo (데스크톱 브라우저에서만 사파리와 크롬)