|
|
@@ -0,0 +1,67 @@ |
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Page Title</title> |
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
|
|
|
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.min.css" /> |
|
|
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> |
|
|
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.min.js"></script> |
|
|
<style> |
|
|
html, body { padding: 0; margin: 0; } |
|
|
html, .ui-mobile, .ui-mobile body { |
|
|
height: 235px; |
|
|
} |
|
|
.ui-mobile, .ui-mobile .ui-page { |
|
|
min-height: 235px; |
|
|
} |
|
|
.ui-content{ |
|
|
padding:10px 15px 0px 15px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<div data-role="page" style="max-height:240px; min-height:240px;"> |
|
|
<div data-role="content"> |
|
|
<div data-role="popup" id="table-column-toggle-popup" class="ui-table-columntoggle-popup"> |
|
|
<fieldset data-role="controlgroup"> |
|
|
<label>Rank<input type="checkbox" checked data-cacheval="false" locked="true"></input></label> |
|
|
<label>Year<input type="checkbox" checked data-cacheval="false" locked="true"></input></label> |
|
|
<label>Rotten Tomato Rating<input type="checkbox" checked data-cacheval="false" locked="true"></input></label> |
|
|
<label>Reviews<input type="checkbox" checked data-cacheval="false" locked="true"></input></label> |
|
|
</fieldset> |
|
|
</div> |
|
|
<a href="#table-column-toggle-popup" class="ui-table-columntoggle-btn ui-btn ui-btn-b ui-corner-all ui-shadow ui-mini" data-rel="popup">Columns...</a> |
|
|
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" data-enhanced="true" class="ui-table ui-table-columntoggle" data-column-btn-theme="b"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th data-priority="2" data-colstart="1" class="ui-table-priority-2 ui-table-cell-visible">Rank</th> |
|
|
<th data-colstart="2">Movie Title</th> |
|
|
<th data-priority="3" data-colstart="3" class="ui-table-priority-3 ui-table-cell-visible">Year</th> |
|
|
<th data-priority="1" data-colstart="4" class="ui-table-priority-1 ui-table-cell-visible"><abbr title="Rotten Tomato Rating">Rating</abbr></th> |
|
|
<th data-priority="5" data-colstart="5" class="ui-table-priority-5 ui-table-cell-visible">Reviews</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr> |
|
|
<th class="ui-table-priority-2 ui-table-cell-visible">1</th> |
|
|
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td> |
|
|
<td class="ui-table-priority-3 ui-table-cell-visible">1941</td> |
|
|
<td class="ui-table-priority-1 ui-table-cell-visible">100%</td> |
|
|
<td class="ui-table-priority-5 ui-table-cell-visible">74</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th class="ui-table-priority-2 ui-table-cell-visible">2</th> |
|
|
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td> |
|
|
<td class="ui-table-priority-3 ui-table-cell-visible">1942</td> |
|
|
<td class="ui-table-priority-1 ui-table-cell-visible">97%</td> |
|
|
<td class="ui-table-priority-5 ui-table-cell-visible">64</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |