jQuery 모바일 테이블의 테드가 수정되었습니다.

지금 몇 시간 동안이 문제를 해결하려고했습니다. fixed thead에는 많은 플러그인이 있지만 jQuery Mobile과 함께 작동하지 않는 것은 아닙니다. 예를 들어jQuery 모바일 테이블의 테드가 수정되었습니다.

는 : 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 및 fixed theads에 대한 경험이 있습니까?

출처

2014-02-21 StefanCerdijn

? jsfiddle에 링크하면 jQuery 관련 태그 두 개를 사용하여 게시물에 태그를 추가했지만 jQuery는 전혀 볼 수 없습니다. – MattD

나는 floatThead의 저자입니다. jquery mobile에서 왜 작동하지 않는지 궁금합니다. 제 생각에는 그렇지만 jquery 모바일이 페이지를로드하는 방법과 플러그인을 초기화하는 방법에 대한 뉘앙스를 이해해야합니다. – mkoryak

@mkoryak 내 jQueryMobile 앱으로 플러그인을 사용해 보았습니다. 플러그인은 내 테이블 컨테이너의 div 외부 사이트를 만들었습니다. 그 div에 주어진 위치는 절대적이었다. 내 페이지를 스크롤하면 제드가 고쳐지지 않습니다. 귀하의 페이지에서 볼 때 div의 상단은 동적으로 업데이트되지만 .. 내 페이지에는 그렇지 않습니다. 아래 코드로 플러그인을 초기화했습니다 .. $ ("# tableItems") floatThead ( scrollContainer : function ($ table) { return $ table.closest ('# tableContainer'); } }}); –

mkoryak 그의 답변에 명시된 바와 같이, floatThead는 jQuery Mobile에서 작동합니다. 나는 방금 내 웹 사이트에 대한 필요성에 부딪쳤다. 나는 jQuery 2.1.1과 jQM 1.4.4를 사용했다. 여기

코드입니다 : jQuery를 당신이 시도하고 당신이하고자하는 일을하는 데 사용한 무엇

<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 모바일 테이블의 테드가 수정되었습니다.

답변

관련 문제