jQuery Mobile Tisch Reflow funktioniert nicht

Ich habe eine Tabelle, aus der jQuery mobile website kopiert, die nicht verflüssigen, wenn der Browser Ändern der Größe:jQuery Mobile Tisch Reflow funktioniert nicht

<!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>

Warum wird nicht die Tabelle Reflow? Die Skripts sind gültige URLs und der Tabellencode wird direkt von jQuery Mobile übernommen.

Quelle

2017-02-20 Anthony

Durch Klicken auf View Source unter http://demos.jquerymobile.com/1.4.5/table-reflow/ wird eine Tabelle mit einer Klasse ui-responsive angezeigt. Das habe ich ursprünglich kopiert.

Wenn Sie jedoch in der Tabelle auf http://demos.jquerymobile.com/1.4.5/table-reflow/ sie prüfen hinzufügen tatsächlich zwei zusätzliche Klassen, ui-Tabelle und ui-table-Reflow:

diese zusätzlichen Klassen Hinzufügen von Fest das Problem. Unten ist die überarbeitete, funktionierende Seite:

<!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>

Quelle

2017-02-20 19:33:37 Anthony

Zur Verdeutlichung: nur ui-table-reflow ist unbedingt erforderlich. Ui-Tabelle fügt nur nicht-essentielle Styling hinzu. – Anthony

jQuery Mobile Tisch Reflow funktioniert nicht

Antwort

Verwandte Themen