jQuery Mobile的表回流不起作用

我从jQuery mobile website调整浏览器时不会回流复制表：jQuery Mobile的表回流不起作用

<!DOCTYPE html> 
<html> 
<head> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> 

<title>Table Reflow</title> 

</head> 

<body data-role="page"> 

<h1>Table reflow</h1> 
<div class="ui-content"> 
<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive"> 
<thead> 
<tr> 
    <th data-priority="1">Rank</th> 
    <th data-priority="persist">Movie Title</th> 
    <th data-priority="2">Year</th> 
    <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th> 
    <th data-priority="4">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> 
</tbody> 
</table> 
</div> 
</body> 
</html>

为什么不表回流？脚本是有效的URL，表代码直接从jQuery Mobile中获取。

来源

2017-02-20 Anthony

点击查看源码http://demos.jquerymobile.com/1.4.5/table-reflow/显示一个表用户响应。这是我最初所复制的。

但是，如果检查上http://demos.jquerymobile.com/1.4.5/table-reflow/表他们实际上是增加了两个额外的类，UI表和UI表回流焊：

新增固定这些附加的类问题。以下是修订后的工作页面：

<!DOCTYPE html> 
<html> 
<head> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> 

<title>Table Reflow</title> 

</head> 

<body data-role="page"> 

<h1>Table reflow</h1> 
<div class="ui-content"> 
<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive ui-table ui-table-reflow"> 
<thead> 
<tr> 
    <th data-priority="1">Rank</th> 
    <th data-priority="persist">Movie Title</th> 
    <th data-priority="2">Year</th> 
    <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th> 
    <th data-priority="4">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> 
</tbody> 
</table> 
</div> 
</body> 
</html>

来源

2017-02-20 19:33:37 Anthony

澄清：只有ui-table-reflow是绝对必要的。 UI桌只是增加了非必要的样式。 – Anthony

jQuery Mobile的表回流不起作用

回答

相关问题