Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Demo of how a new listview-grid might work #5223

Closed
wants to merge 2 commits into from

4 participants

@KeithPepin

Demo of how a new listview-grid might work

Files Impacted:
css/structure/jquery.mobile.structure.css
docs/lists/lists-grid.html

Keith Pepin added some commits
Keith Pepin Update docs/lists/lists-grid.html
Demo of how a new listview-grid might work
e3bee33
Keith Pepin Update css/structure/jquery.mobile.structure.css
Demo of how a new listview-grid might work
43552aa
@gabrielschulhof

I don't believe this complies with jQuery HTML standards.

Collaborator

The thread about coding standards should contain all the relevant information. Not sure if it'll answer your questions, but I'm pretty sure we've agreed to those standards.

Collaborator

Here's a summary of the discussion.

@gabrielschulhof

We also don't specify type= for stylesheets.

@toddparker

This PR is for #4956

@jaspermdegroot
Collaborator

@KeithPepin - hi Keith, have you been able to work on a demo for this?

Update: Closing this PR because the demo should go in the new /demos folder using the demo template file including "source view", as discussed.

@KeithPepin
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 25, 2012
  1. Update docs/lists/lists-grid.html

    Keith Pepin authored
    Demo of how a new listview-grid might work
  2. Update css/structure/jquery.mobile.structure.css

    Keith Pepin authored
    Demo of how a new listview-grid might work
This page is out of date. Refresh to see the latest.
Showing with 404 additions and 146 deletions.
  1. +1 −1  css/structure/jquery.mobile.structure.css
  2. +403 −145 docs/lists/lists-grid.html
View
2  css/structure/jquery.mobile.structure.css
@@ -22,5 +22,5 @@
@import url( "jquery.mobile.forms.select.css" );
@import url( "jquery.mobile.forms.textinput.css" );
@import url( "jquery.mobile.listview.css" );
-@import url( "jquery.mobile.listview.grid.css" );
+/*@import url( "jquery.mobile.listview.grid.css" );*/
@import url( "jquery.mobile.forms.slider.css" );
View
548 docs/lists/lists-grid.html
@@ -1,151 +1,409 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Lists with Thumbnails</title>
- <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Lists Grid Demos</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link href="../_assets/css/jqm-docs.css" rel="stylesheet" type="text/css" />
+ <style type="text/css">
+ /* begin jqm-docs.css overrides */
+ .type-home .ui-content, .type-interior > .ui-content {padding: 1em;}
+ .type-interior .content-primary, .content-primary {float: none; width: auto; margin: 1em; padding: 0;}
+ .ui-controlgroup-horizontal .ui-controlgroup-label {display: inline-block; margin-right: 1em;}
+ /* begin jqm-docs.css overrides */
+
+ /* grid-default
+ ------------------------------------*/
+ /* clear floats */
+ .grid-default .ui-listview-grid:before, .grid-default .ui-listview-grid:after { content: ""; display: table; }
+ .grid-default .ui-listview-grid:after { clear: both; }
+ .grid-default .ui-listview-grid { zoom: 1; }
+
+ .grid-default .ui-listview-grid li.ui-li {
+ float: left;
+ width: 45%;
+ margin: .7em .75% 0;
+ border-width: 1px;
+ padding: .6em 0;
+ }
+
+ .grid-default .ui-listview-grid .ui-li {
+ text-align: center;
+ }
+ .grid-default .ui-listview-grid .ui-li-thumb {
+ position: static;
+ max-height: 8em;
+ max-width: 100%;
+ display: block;
+ border: 0;
+ float: none;
+ margin: 0 auto;
+ padding-bottom: 1em;
+ }
+ .grid-default .ui-listview-grid .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .grid-default .ui-listview-grid .ui-li-static.ui-li-has-thumb {
+ padding: 0 .6em;
+ margin: 0 40px;
+ }
+ .grid-default .ui-listview-grid .ui-li .ui-icon {
+ display: none;
+ }
+
+ .grid-default .ui-listview-grid .ui-btn-icon-left > .ui-btn-inner > .ui-icon, .grid-default .ui-listview-grid .ui-btn-icon-right > .ui-btn-inner > .ui-icon {
+ display: none;
+ }
+
+ .grid-default .ui-listview-grid .ui-li-has-alt .ui-icon{
+ display: block;
+ }
+ .grid-default .ui-listview-grid li.ui-li.ui-li-divider {
+ width: 100%;
+ clear: left;
+ text-align: left;
+ padding-left: 1em;
+ }
+
+ .grid-default .ui-li-has-alt {
+ margin: 0 40px;
+ }
+ .grid-default .ui-li-link-alt {
+ border-width: 0;
+ height: 40px;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ bottom: 0;
+ top: auto;
+ left: auto;
+ right: 0;
+ width: 40px;
+ z-index: 0;
+ background: none;
+ }
+
+ .ui-li-has-count .ui-link-inherit .ui-li-count {
+ position: static;
+ margin: 0 0 0 .5em;
+ vertical-align: middle;
+ display: inline-block;
+ }
+
+ .grid-default .ui-li-has-count.ui-li-has-thumb .ui-li-count {
+ position: absolute;
+ left: -30px;
+ bottom: 5px;
+ right: auto;
+ top: auto;
+ }
+
+ .grid-default .ui-li-has-arrow.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .grid-default .ui-li-static.ui-li-has-arrow.ui-li-has-count,
+ .grid-default .ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .grid-default .ui-li-static.ui-li-has-arrow {
+ padding: .5em 1em;
+ }
+
+ .grid-default .ui-li-aside {
+ float: none;
+ margin: 0;
+ padding: 0 0 .5em;
+ display: inline-block;
+ width: auto;
+ text-align: center;
+ }
+
+ @media (min-width: 50em) {
+ .grid-default .ui-listview-grid li.ui-li {
+ width: 28%;
+ }
+ }
+ @media (min-width: 70em) {
+ .grid-default .ui-listview-grid li.ui-li {
+ width: 21%;
+ }
+ }
+ @media (min-width: 85em) {
+ .grid-default .ui-listview-grid li.ui-li {
+ width: 18%;
+ }
+ }
+
+
+ /* grid-inline-block
+ ------------------------------------*/
+ </style>
- <script src="../../js/jquery.js"></script>
- <script src="../../docs/_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
+ <script src="../../js/jquery.js"></script>
-</head>
-<body>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
- <div data-role="page" class="type-interior" data-theme="c">
+ <script src="../../js/"></script>
- <div data-role="header" data-theme="f">
- <h1>Grid layout</h1>
- <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
- <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
- </div><!-- /header -->
+ <script type="text/javascript">
+ $(document).ready(function () {
+ $("#stylePicker input").click(function () {
+ var inputs = $("#stylePicker input").each(function () {
+ $("body").removeClass($(this).val());
+ });
+ $("body").addClass($(this).val());
+ });
+ });
+ </script>
- <div data-role="content">
- <div class="content-primary">
+ </head>
+ <body class="grid-default">
+ <div data-role="page" class="type-interior">
+ <div data-role="header" data-theme="f">
+ <h1>
+ Linked list samples</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">
+ Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">
+ Search</a>
+ </div>
+ <!-- /header -->
+ <div data-role="content">
+ <form>
+ <fieldset id="stylePicker" data-role="controlgroup" data-type="horizontal">
+ <legend>Select Grid Style</legend>
+ <input type="radio" name="radio-choice" id="radio-choice-1" value="grid-default" checked="checked" />
+ <label for="radio-choice-1">
+ Default</label>
+ <input type="radio" name="radio-choice" id="radio-choice-2" value="grid-inline-block" />
+ <label for="radio-choice-2">
+ Inline-block (center)</label>
+ </fieldset>
-
- <p>To use the grid layout option, you can specify the <code>data-layout="grid"</code> option on a listview.</p>
-
- <ul data-role="listview" data-layout="grid">
- <li><a href="index.html">
- <img src="images/album-bb.jpg" />
- <h3>Broken Bells</h3>
- <p>Broken Bells</p>
- </a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a></li>
- <li><a href="index.html">
- <img src="images/album-hc.jpg" />
- <h3>Warning</h3>
- <p>Hot Chip</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-p.jpg" />
- <h3>Wolfgang Amadeus Phoenix</h3>
- <p>Phoenix</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-ok.jpg" />
- <h3>Of The Blue Colour Of The Sky</h3>
- <p>Ok Go</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-ws.jpg" />
- <h3>Elephant</h3>
- <p>The White Stripes</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-rh.jpg" />
- <h3>Kid A</h3>
- <p>Radiohead</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-xx.jpg" />
- <h3>XX</h3>
- <p>XX</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-mg.jpg" />
- <h3>Congratulations</h3>
- <p>MGMT</p>
- </a></li>
-
- <li><a href="index.html">
- <img src="images/album-ag.jpg" />
- <h3>Ashes Grammar</h3>
- <p>A Sunny Day in Glasgow</p>
- </a></li>
-
- <li><a href="index.html">
- <img src="images/album-k.jpg" />
- <h3>Hot Fuss</h3>
- <p>Killers</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-af.jpg" />
- <h3>The Suburbs</h3>
- <p>Arcade Fire</p>
- </a></li>
- </ul>
-
- <div data-role="popup" id="purchase" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px;">
- <h3>Purchase Album?</h3>
- <p>Your download will begin immediately on your mobile device when you purchase.</p>
- <a href="index.html" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">Buy: $10.99</a>
- <a href="index.html" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>
- </div>
- </div><!--/content-primary -->
-
- <div class="content-secondary">
-
- <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
-
- <h3>More in this section</h3>
-
- <ul data-role="listview" data-theme="c" data-dividertheme="d">
-
- <li data-role="list-divider">Listviews</li>
- <li><a href="docs-lists.html">List basics &amp; API</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-autodividers.html">Autodividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li data-theme="a"><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">List formatting</a></li>
- <li><a href="lists-inset.html">Inset styled lists</a></li>
-
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter with dividers</a></li>
- <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-collapsible.html">Collapsible lists</a></li>
-
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p class="jqm-version"></p>
- <p>&copy; 2012 jQuery Foundation and other contributors</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+ <div class="content-primary">
+ <h2 style="margin: 1.2em 0 1.4em 0;">
+ Simple list</h2>
+ <ul data-role="listview" data-layout="grid">
+ <li>
+ <a href="index.html">
+ Acura</a></li>
+ <li>
+ <a href="index.html">
+ Audi</a></li>
+ <li>
+ <a href="index.html">
+ BMW</a></li>
+ <li>
+ <a href="index.html">
+ Cadillac</a></li>
+ <li>
+ <a href="index.html">
+ Ferrari</a></li>
+ </ul>
+ <h2 style="margin: 2.2em 0 1.4em 0;">
+ Count bubbles</h2>
+ <ul data-role="listview" data-layout="grid">
+ <li>
+ <a href="index.html">
+ Inbox
+ <span class="ui-li-count">12</span></a></li>
+ <li>
+ <a href="index.html">
+ Outbox
+ <span class="ui-li-count">0</span></a></li>
+ <li>
+ <a href="index.html">
+ Drafts
+ <span class="ui-li-count">4</span></a></li>
+ <li>
+ <a href="index.html">
+ Sent
+ <span class="ui-li-count">328</span></a></li>
+ <li>
+ <a href="index.html">
+ Trash
+ <span class="ui-li-count">62</span></a></li>
+ </ul>
+ <h2 style="margin: 2.2em 0 1.4em 0;">
+ Numbered list</h2>
+ <ol data-role="listview" data-layout="grid">
+ <li>
+ <a href="index.html">
+ The Godfather</a></li>
+ <li>
+ <a href="index.html">
+ Inception</a></li>
+ <li>
+ <a href="index.html">
+ The Good, the Bad and the Ugly
+ </a>
+ </li>
+ <li>
+ <a href="index.html">
+ Pulp Fiction</a></li>
+ <li>
+ <a href="index.html">
+ Schindler's List</a></li>
+ </ol>
+ <h2 style="margin: 2.2em 0 1.4em 0;">
+ Divided, formatted content</h2>
+ <ul data-role="listview" data-layout="grid">
+ <li>
+ <a href="index.html">
+ <h3>
+ Stephen Weber</h3>
+ <p>
+ <strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
+ <p>
+ Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+ <p class="ui-li-aside">
+ <strong>6:24</strong>PM</p>
+ </a>
+ </li>
+ <li>
+ <a href="index.html">
+ <h3>
+ jQuery Team</h3>
+ <p>
+ <strong>Boston Conference Planning</strong></p>
+ <p>
+ In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
+ <p class="ui-li-aside">
+ <strong>9:18</strong>AM</p>
+ </a>
+ </li>
+ </ul>
+ <h2 style="margin: 2.2em 0 1.4em 0;">
+ Icon list</h2>
+ <ul data-role="listview" data-layout="grid">
+ <li>
+ <a href="index.html">
+ <img src="images/gf.png" alt="France" class="ui-li-icon">France
+ <span class="ui-li-count">4</span></a></li>
+ <li>
+ <a href="index.html">
+ <img src="images/de.png" alt="Germany" class="ui-li-icon">Germany
+ <span class="ui-li-count">4</span></a></li>
+ <li>
+ <a href="index.html">
+ <img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain
+ <span class="ui-li-count">0</span></a></li>
+ <li>
+ <a href="index.html">
+ <img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland
+ <span class="ui-li-count">12</span></a></li>
+ <li>
+ <a href="index.html">
+ <img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway
+ <span class="ui-li-count">328</span></a></li>
+ <li>
+ <a href="index.html">
+ <img src="images/us.png" alt="United States" class="ui-li-icon">United States
+ <span class="ui-li-count">62</span></a></li>
+ </ul>
+ <h2 style="margin: 2.2em 0 1.4em 0;">
+ Thumbnail, split button list</h2>
+ <ul data-role="listview" data-layout="grid">
+ <li>
+ <a href="index.html">
+ <img src="images/album-bb.jpg" />
+ <h3>
+ Broken Bells</h3>
+ <p>
+ Broken Bells</p>
+ </a>
+ <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">
+ Purchase album
+ </a>
+ </li>
+ <li>
+ <a href="index.html">
+ <img src="images/album-hc.jpg" />
+ <h3>
+ Warning</h3>
+ <p>
+ Hot Chip</p>
+ </a>
+ <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">
+ Purchase album
+ </a>
+ </li>
+ <li>
+ <a href="index.html">
+ <img src="images/album-p.jpg" />
+ <h3>
+ Wolfgang Amadeus Phoenix</h3>
+ <p>
+ Phoenix</p>
+ </a>
+ <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">
+ Purchase album
+ </a>
+ </li>
+ </ul>
+ <h2 style="margin: 2.2em 0 1.4em 0;">
+ Thumbnail, split button list with counts</h2>
+ <ul data-role="listview" data-layout="grid">
+ <li>
+ <a href="index.html">
+ <img src="images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p>
+ <span class="ui-li-count">12</span>
+ </a>
+ <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">
+ Purchase album
+ </a>
+ </li>
+ <li>
+ <a href="index.html">
+ <img src="images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p>
+ <span class="ui-li-count">2</span>
+ </a>
+ <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">
+ Purchase album
+ </a>
+ </li>
+ <li>
+ <a href="index.html">
+ <img src="images/album-p.jpg" />
+ <h3>Wolfgang Amadeus Phoenix</h3>
+ <p>Phoenix</p>
+ <span class="ui-li-count">200</span>
+ </a>
+ <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">
+ Purchase album
+ </a>
+ </li>
+ </ul>
+ <h2 style="margin: 2.2em 0 1em 0;">
+ Divided, filterable list</h2>
+ <ul data-role="listview" data-filter="true" style="margin-bottom: 2em;" data-layout="grid">
+ <li data-role="list-divider">A</li>
+ <li>
+ <a href="index.html">Adam Kinkaid</a>
+ </li>
+ <li>
+ <a href="index.html">Alex Wickerham</a>
+ </li>
+ <li>
+ <a href="index.html">Avery Johnson</a>
+ </li>
+ <li data-role="list-divider">B</li>
+ <li>
+ <a href="index.html">Bob Cabot</a>
+ </li>
+ <li data-role="list-divider">C</li>
+ <li>
+ <a href="index.html">Caleb Booth</a>
+ </li>
+ <li>
+ <a href="index.html">Christopher Adams</a>
+ </li>
+ </ul>
+ </div>
+ </form>
+ </div>
+ <!-- /content -->
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p class="jqm-version">
+ </p>
+ <p>
+ &copy; 2012 jQuery Foundation and other contributors</p>
+ </div>
+ </div>
+ <!-- /page -->
+ </body>
+</html>
Something went wrong with that request. Please try again.