Мобильный стол JQuery

Может ли кто-нибудь указать мне какой-либо образец или предоставить образец таблицы Jquery Mobile, пожалуйста?

Я видел демонстрации на их веб-сайте и не нашел таблиц.

Мне нужно иметь возможность создать таблицу, которая будет хорошо смотреться на мобильных устройствах/iPad.


jquery-mobile mobile-website
person Satch3000    schedule 19.04.2011    source источник
comment
Что вы хотите помимо <table>...</table>?   -  person Matt Ball    schedule 20.04.2011
comment
Я в основном хочу, чтобы это было в стиле JQuery Mobile.   -  person Satch3000    schedule 20.04.2011
comment
Рассмотрите возможность использования чего-то вроде списка вместо таблицы. .   -  person Matt Ball    schedule 20.04.2011
comment
Я думал об этом, но в моем проекте мне нужны заголовки (THEAD) и столбцы, поэтому я подумал об использовании таблиц.   -  person Satch3000    schedule 20.04.2011

Ответы (3)


arrow_upward
10
arrow_downward

Попробуйте этот макет

<ul>
<li> <!--first item -->
    <table>
        <tr>
            <td>Heading1</td>
            <td>Meaning1</td>
        </tr>
        <tr>
            <td>Heading2</td>
            <td>Meaning2</td>
        </tr>
        <tr>
            <td>Heading3</td>
            <td>Meaning3</td>
        </tr>
    </table>
</li>
<li> <!-- second item -->
    <table>
        <tr>
            <td>Heading1</td>
            <td>Meaning1</td>
        </tr>
        <tr>
            <td>Heading2</td>
            <td>Meaning2</td>
        </tr>
        <tr>
            <td>Heading3</td>
            <td>Meaning3</td>
        </tr>
    </table>
</li>
</ul>

и CSS

ul {
    width: 100%;    
    margin-left: 0px;
    padding: 0px; 
}

ul li {
    list-style-type: none;
    border-bottom: 1px dashed gray;
    margin-top: 10px; 
}

* исправлены небольшие ошибки, но необходимо добавить это, чтобы внести существенные изменения

person Alex    schedule 21.07.2011

arrow_upward
14
arrow_downward

http://jquerymobile.com/demos/1.0a4.1/#docs/forms/../../docs/content/content-html.html щелкните правой кнопкой мыши и просмотрите исходный код:

<table summary="This table lists all the JetBlue flights."> 
  <caption>Travel Itinerary</caption> 
  <thead> 
    <tr> 
       <th scope="col">Flight:</th>  
      <th scope="col">From:</th>  
      <th scope="col">To:</th>  
    </tr> 
  </thead> 
  <tfoot> 
    <tr> 
      <td colspan="5">Total: 3 flights</td> 
    </tr> 
  </tfoot> 
  <tbody> 
  <tr> 
    <th scope="row">JetBlue 983</th> 
    <td>Boston (BOS)</td> 
    <td>New York (JFK)</td> 
  </tr> 
  <tr> 
    <th scope="row">JetBlue 354</th> 
    <td>San Francisco (SFO)</td> 
    <td>Los Angeles (LAX)</td> 
  </tr> 
<tr> 
    <th scope="row">JetBlue 465</th> 
    <td>New York (JFK)</td> 
    <td>Portland (PDX)</td> 
  </tr> 
  </tbody> 
</table>

CSS

<style type="text/css"> 
    table { width:100%; }
    table caption { text-align:left;  }
    table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
    table th, td { text-align:left; padding:6px;} 
</style>

Обновление ссылок:

person Phill Pafford    schedule 19.04.2011
comment
Таблица отображается без стилей темы jQM. Так что это только доказывает, что OP не может использовать таблицу. - person Potatoswatter; 19.12.2012
comment
@Potatoswatter это то, что jQM предоставляет для таблиц (в настоящее время) jquerymobile. com/demos/1.2.0/docs/content/content-html.html ( просмотреть исходный код ) Планируется выпуск релиза в будущем: jquerymobile.com/branches/swipe/docs/tables/index.html - person Phill Pafford; 19.12.2012

arrow_upward
1
arrow_downward

И если вам нужна сумасшедшая альтернатива, вы всегда можете создать список с сетками. Это может выглядеть интересно.

person naugtur    schedule 20.04.2011
comment
К сведению: этот подход в спешке превращается в один из самых уродливых и неуправляемых HTML-кодов, которые вы когда-либо видели. - person Nick Daniels; 26.08.2011
comment
Это может быть правдой в вашем случае. Я использовал эту идею (но наоборот — сетку со списками) на странице, и я был доволен результатом. - person naugtur; 30.08.2011