修復了jQuery Mobile表中的ddr

我試圖解決這個問題幾個小時了。有很多固定的插件，但他們似乎沒有與jQuery Mobile一起工作。修復了jQuery Mobile表中的ddr

例如： http://mkoryak.github.io/floatThead/

我也試過用CSS來解決這個問題，而這個作品或多或少。但th列的寬度與td的寬度不同。

HTML：

<div data-role="header" data-theme="a" data-position="fixed" data-tap-toggle="false"> 
<h1>test</h1> 
</div> 
<div data-role="content"> 
<table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a"> 
    <thead> 
     <tr class="ui-bar-d"> 
     <th data-priority="2">Rank</th> 
     <th>Movie Title</th> 
     <th data-priority="3">Year</th> 
     <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th> 
     <th data-priority="5">Reviews</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <th>1</th> 
     <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td> 
     <td>1941</td> 
     <td>100%</td> 
     <td>74</td> 
     </tr> 
     <tr> 
     <th>2</th> 
     <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td> 
     <td>1942</td> 
     <td>97%</td> 
     <td>64</td> 
     </tr> 
     <tr> 
     <th>3</th> 
     <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td> 
     <td>1972</td> 
     <td>97%</td> 
     <td>87</td> 
     </tr> 
     <tr> 
     <th>4</th> 
     <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td> 
     <td>1939</td> 
     <td>96%</td> 
     <td>87</td> 
     </tr> 
     <tr> 
     <th>5</th> 
     <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td> 
     <td>1962</td> 
     <td>94%</td> 
     <td>87</td> 
     </tr> 
     <tr> 
     <th>6</th> 
     <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td> 
     <td>1964</td> 
     <td>92%</td> 
     <td>74</td> 
     </tr> 
     <tr> 
     <th>7</th> 
     <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td> 
     <td>1967</td> 
     <td>91%</td> 
     <td>122</td> 
     </tr> 
     <tr> 
     <th>8</th> 
     <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td> 
     <td>1939</td> 
     <td>90%</td> 
     <td>72</td> 
     </tr> 
     <tr> 
     <th>9</th> 
     <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td> 
     <td>1952</td> 
     <td>89%</td> 
     <td>85</td> 
     </tr> 
     <tr> 
     <th>10</th> 
     <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td> 
     <td>2010</td> 
     <td>84%</td> 
     <td>78</td> 
     </tr> 
     <tr> 
     <th>10</th> 
     <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td> 
     <td>2010</td> 
     <td>84%</td> 
     <td>78</td> 
     </tr> 
     <tr> 
     <th>10</th> 
     <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td> 
     <td>2010</td> 
     <td>84%</td> 
     <td>78</td> 
     </tr> 
     <tr> 
     <th>10</th> 
     <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td> 
     <td>2010</td> 
     <td>84%</td> 
     <td>78</td> 
     </tr> 
     <tr> 
     <th>8</th> 
     <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td> 
     <td>1939</td> 
     <td>90%</td> 
     <td>72</td> 
     </tr> 
     <tr> 
     <th>9</th> 
     <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td> 
     <td>1952</td> 
     <td>89%</td> 
     <td>85</td> 
     </tr> 
     <tr> 
     <th>10</th> 
     <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td> 
     <td>2010</td> 
     <td>84%</td> 
     <td>78</td> 
     </tr> 
     <tr> 
     <th>10</th> 
     <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td> 
     <td>2010</td> 
     <td>84%</td> 
     <td>78</td> 
     </tr> 
     <tr> 
     <th>10</th> 
     <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td> 
     <td>2010</td> 
     <td>84%</td> 
     <td>78</td> 
     </tr> 
     <tr> 
     <th>10</th> 
     <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td> 
     <td>2010</td> 
     <td>84%</td> 
     <td>78</td> 
     </tr> 
     <tr> 
     <th>8</th> 
     <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td> 
     <td>1939</td> 
     <td>90%</td> 
     <td>72</td> 
     </tr> 
     <tr> 
     <th>9</th> 
     <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td> 
     <td>1952</td> 
     <td>89%</td> 
     <td>85</td> 
     </tr> 
     <tr> 
     <th>10</th> 
     <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td> 
     <td>2010</td> 
     <td>84%</td> 
     <td>78</td> 
     </tr> 
     <tr> 
     <th>10</th> 
     <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td> 
     <td>2010</td> 
     <td>84%</td> 
     <td>78</td> 
     </tr> 
     <tr> 
     <th>10</th> 
     <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td> 
     <td>2010</td> 
     <td>84%</td> 
     <td>78</td> 
     </tr> 
     <tr> 
     <th>10</th> 
     <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td> 
     <td>2010</td> 
     <td>84%</td> 
     <td>78</td> 
     </tr> 
    </tbody> 
    </table> 
<div> 
<div data-role="footer" data-theme="a" data-position="fixed" data-tap-toggle="false" > 
<h1>test</h1> 
</div><!-- /footer -->

CSS：

* { 
    padding: 0; 
    margin: 0; 
} 
thead { 
    position: fixed; 
    top: 44px; 
    left: 15px; 
    background-color: white; 
} 
table { 
    margin-top: 25px; 
} 
.ui-table-columntoggle-btn { 
    display: none !important; 
}

jsfiddle

有更多的，但我沒有足夠的代表處發佈更多。

有沒有人有任何使用jQM和固定磁盤的經驗？

來源

2014-02-21 StefanCerdijn

什麼jQuery的你來嘗試做你想要做什麼？你鏈接到一個jsfiddle，並用兩個jQuery相關標籤標記了帖子，但我完全沒有看到jQuery。 – MattD

我是floatThead的作者 - 我很好奇你爲什麼認爲它不適用於jquery mobile？我認爲它確實如此，但你只需要瞭解jquery mobile加載頁面的細微差別，以及這對你如何初始化插件意味着什麼 – mkoryak

@mkoryak我用我的jQueryMobile應用程序試過了你的插件，插件創建了我的表容器的div outsite。該分區的位置是絕對的。當我滾動我的頁面時，我的老闆不會被修復。當我看到你的頁面div的頂部動態更新..但對於我的網頁它沒有。我已經使用下面的代碼初始化了插件。$（「＃tableItems」）。floatThead（{scrollRestainer：function（$ table）{ return $ table.closest（'＃tableContainer'）; } }）; –

由於mkoryak在他的回覆中指出，floatThead與jQuery Mobile協同工作。我只是跑到我的網站需求相同。我使用jQuery 2.1.1和jQM 1.4.4。

下面的代碼：

<html> 
    <head> 
    ... 
    </head> 
     <div data-role="page"> 
      <div data-role="header">...</div> 
      <!-- /header --> 

      <div id="contentContainer" class="ui-content"> 
       <div id="tableContainer"> 
        <table data-role="table" class="ui-responsive table-stroke table-stripe" id="tableItems"> 
         <thead> 
          <tr> 
           <th>COL 1</th> 
           <th>COL 2</th> 
           <th>COL 3</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td>FIELD 1A</td> 
           <td>FIELD 2A</td> 
           <td>FIELD 3A</td> 
          </tr> 
          <tr> 
           <td>FIELD 1B</td> 
           <td>FIELD 2B</td> 
           <td>FIELD 3B</td> 
          </tr> 
          <tr> 
           <td>FIELD 1C</td> 
           <td>FIELD 2C</td> 
           <td>FIELD 3C</td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
      <!-- /content --> 

      <div data-role="footer">...</div> 
      <!-- /footer --> 
     </div> 
     ... 
    </body> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#tableItems").floatThead({ 
       scrollContainer: function ($table) { 
        return $table.closest('#contentContainer'); 
       } 
      }); 
     }); 
    </script> 
</html>

來源

2014-10-02 21:30:03 Zac

我做了你所建議的，但沒有運氣..它不工作！會發生什麼是我的網頁頭上的流量，然後上升..可以請你建議，如果有任何額外的事情必須在配置中完成.. –

修復了jQuery Mobile表中的ddr

回答

相關問題