jqueryの携帯、固定ヘッダー/フッターは

Question

を働いていないので、私はこのようなJQM 1.1で固定ヘッダがあります。

を----編集を開始します----

要求ごととして、ここではより完全ですページの表示：

<div id="listPage" data-role="page" class="page-ovveride"> 

     <div data-role="header" id="applicationHeader" data-theme="b" data-position="fixed"> 
      <h1 class="ui-title" role="heading" aria-level="1">Mobile</h1> 
     </div> 

     <div data-role="content" id="applicationContent"> 
      <ul id='ListTable' data-role="listview" data-inset='false'> 
       <!-- Placeholder for list table -->   
      </ul> 
     </div> 

     <div data-role="footer" id="applicationFooter" data-theme="b" data-position="fixed"> 
      <div id="navbar" data-role="navbar" > 
       <ul> 
        <li class="ui-btn-active"><a href="#listPage" id="list" data-icon="grid" data-transition="none">List</a></li> 
        <li><a href="#StuffPage" id="stuff" data-icon="star" data-transition="none">Stuff</a></li> 
        <li><a href="#MaorStuffsPage" id="moar" data-icon="alert" data-transition="none">Moar</a></li> 
       </ul> 
      </div> 
     </div> 

    </div> <!-- end list page --> 

page-ovverrideクラスは次のようになります。何らかの理由で、JQMが問題の原因となっている上下にパッディングを挿入していたと思います。

.page-ovveride { 
    padding-top:0 !important; 
    padding-bottom:0 !important; 
} 

、これは私が

$List.append(
    $('<li>').attr('id', id).append(
     $('<a>').attr('href','#newPage').attr('data-transition', 'slide').append(
     $('<h3>').text(name), 
     $('<p>').text(description) 
    ))); 

、その後、ループの後、テーブルを移入しています方法です：

$List.listview('refresh'); 

---- ENDのEDITこれは、クラスは次のようになります----

しかし、何らかの理由で、これはすべてのブラウザで修正されたように見えることではありません。私は1.1の文書hereを見ていますが、それは動作していないようですか？誰が何が起こっているか考えているのですか？あなたがもっと情報を見る必要がある場合は私に教えてください！

ありがとうございます！

---

update：page-ovverrideクラスを削除しても、まだ動作しません。何が起こっている！？

Answer 1

私はそれを理解しました。私は非常に初期のJQM実装のレガシーファイルをインクルードしていましたが、ここではjquery.mobile.structure.cssファイルを含むテーマローラーを使用していました。これは、スタイルの多くをovverridingし、あらゆる種類の奇妙な行動を引き起こしていました。誰かを助けることを願って！

Answer 2

私のための作品：http://jsfiddle.net/XRKcX/1/。おそらくあなたは何かを含めることを忘れていますか？

Answer 3

はこれを試してみてください：

<div id="listPage" data-role="page" class="page-ovveride" data-fullscreen="true"> 
. 
. 
. 
. 
</div> 

Answer 4

はここで別の考えられる原因です：私は、動的に追加されたコンテンツをページのために働いていなかった固定ヘッダの問題を抱えていました。最初にページの内容がウィンドウより短い場合、jQueryMobileはヘッダーに「ui-fixed-hidden」クラスを追加していました。このクラスは、コンテンツがウィンドウよりも大きくなったときに削除されませんでした。

私はすぐにresultsdivというページ上のdivにコンテンツを書き込んだ後、次のコード行を追加することで、問題を硬化：

resultsdiv.parents('.ui-page').find('.ui-header').removeClass('ui-fixed-hidden'); 

をそれは恐ろしい低俗ハックだが、これまで取り組んできました。