javascript - jquery移动表格代码下载

Question

我查看了 jquery mobile 表.... 但不知道在哪里下载代码...... 你能告诉我在哪里可以下载示例代码吗...

http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/table-reflow.html

@media ( min-width: 40em ) {
    /* Show the table header rows and set all cells to display: table-cell */ 
    .my-custom-breakpoint td,
    .my-custom-breakpoint th,
    .my-custom-breakpoint tbody th,
    .my-custom-breakpoint tbody td,
    .my-custom-breakpoint thead td,
    .my-custom-breakpoint thead th {
        display: table-cell;
        margin: 0;
    }
    /* Hide the labels in each cell */ 
    .my-custom-breakpoint td .ui-table-cell-label,
    .my-custom-breakpoint th .ui-table-cell-label { 
        display: none;
    }
}

Answer 1

这是您提供的页面上代码的复制/粘贴。

检查页面源代码以查看页面的 HTML 代码(右键单击页面 > 查看页面源代码)。

<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke 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><b class="ui-table-cell-label">Rank</b>1</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external" class="ui-link">Citizen Kane</a></td>
      <td><b class="ui-table-cell-label">Year</b>1941</td>
      <td><b class="ui-table-cell-label">Rating</b>100%</td>
      <td><b class="ui-table-cell-label">Reviews</b>74</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>2</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external" class="ui-link">Casablanca</a></td>
      <td><b class="ui-table-cell-label">Year</b>1942</td>
      <td><b class="ui-table-cell-label">Rating</b>97%</td>
      <td><b class="ui-table-cell-label">Reviews</b>64</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>3</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external" class="ui-link">The Godfather</a></td>
      <td><b class="ui-table-cell-label">Year</b>1972</td>
      <td><b class="ui-table-cell-label">Rating</b>97%</td>
      <td><b class="ui-table-cell-label">Reviews</b>87</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>4</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external" class="ui-link">Gone with the Wind</a></td>
      <td><b class="ui-table-cell-label">Year</b>1939</td>
      <td><b class="ui-table-cell-label">Rating</b>96%</td>
      <td><b class="ui-table-cell-label">Reviews</b>87</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>5</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external" class="ui-link">Lawrence of Arabia</a></td>
      <td><b class="ui-table-cell-label">Year</b>1962</td>
      <td><b class="ui-table-cell-label">Rating</b>94%</td>
      <td><b class="ui-table-cell-label">Reviews</b>87</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>6</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external" class="ui-link">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
      <td><b class="ui-table-cell-label">Year</b>1964</td>
      <td><b class="ui-table-cell-label">Rating</b>92%</td>
      <td><b class="ui-table-cell-label">Reviews</b>74</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>7</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external" class="ui-link">The Graduate</a></td>
      <td><b class="ui-table-cell-label">Year</b>1967</td>
      <td><b class="ui-table-cell-label">Rating</b>91%</td>
      <td><b class="ui-table-cell-label">Reviews</b>122</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>8</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external" class="ui-link">The Wizard of Oz</a></td>
      <td><b class="ui-table-cell-label">Year</b>1939</td>
      <td><b class="ui-table-cell-label">Rating</b>90%</td>
      <td><b class="ui-table-cell-label">Reviews</b>72</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>9</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external" class="ui-link">Singin' in the Rain</a></td>
      <td><b class="ui-table-cell-label">Year</b>1952</td>
      <td><b class="ui-table-cell-label">Rating</b>89%</td>
      <td><b class="ui-table-cell-label">Reviews</b>85</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>10</th>
      <td class="title"><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external" class="ui-link">Inception</a></td>
      <td><b class="ui-table-cell-label">Year</b>2010</td>
      <td><b class="ui-table-cell-label">Rating</b>84%</td>
      <td><b class="ui-table-cell-label">Reviews</b>78</td>
    </tr>
  </tbody>
</table>

CSS - 使表格响应。

@media ( min-width: 40em ) {
/* Show the table header rows and set all cells to display: table-cell */ 
.my-custom-breakpoint td,
.my-custom-breakpoint th,
.my-custom-breakpoint tbody th,
.my-custom-breakpoint tbody td,
.my-custom-breakpoint thead td,
.my-custom-breakpoint thead th {
    display: table-cell;
    margin: 0;
}
/* Hide the labels in each cell */ 
.my-custom-breakpoint td .ui-table-cell-label,
.my-custom-breakpoint th .ui-table-cell-label { 
    display: none;
}
}