- Accordion
- AJAX Navigation
- Autocomplete
- Buttons
- Checkboxes
- Collapsibles
- Controlgroup
- Dialogs
- Fixed toolbars
- Flip switch toggle
- Footer toolbar
- Form elements
- Grids
- Header toolbar
- Icons
- Links
- Listviews
- Loader overlay
- Navbar
- Navbar, persistent
- Pages
- Panels New
- Popup
- Radio buttons
- Select
- Slider, single
- Slider, dual range New
- Table, column toggle New
- Table, reflow New
- Text inputs & textarea
- Transitions
- Collapsibles
- Dynamic collapsible
- Controlgroups
- Dynamic controlgroup
- Listviews
- Grid Listview
- Autodividers Linkbar
- Autodividers Selector
- Navigation
- Backbone and Require.js example
- Redirection with server-side support
- Panels
- Panel styling
- Open panel on swipe
- Popups
- Dynamic popup
- Popup with arrow
- Responsive Tables
- Reflow: Custom styles
- Reflow: Heading groups
- Reflow: Refresh method
- Column toggle: Customization options
- Column toggle: Heading groups
- Column toggle: Refresh method
- Column toggle demo: Phone comparison
- Sliders
- Tooltip extension
- Swipe
- Swipe to navigate
- Swipe to delete list item
- Forms
- Why won't my CSS styles apply correctly to a widget?
- Updating the value of enhanced form elements does not work.
- My HTML 5 inputs look different across devices and browsers.
- My range or search inputs are being change to number/text.
- Sometimes my custom select shows as a popup other times its a dialog.
- Disabling a button does not work.
- Controls in my fixed header or footer are not responding or behave erratically.
- Pages
- Why aren't my scripts and styles loading?
- Why isn't DOM ready working for my scripts?
- How do I load a page?
- Why is only the first page of my multi page document loaded?
- I'm trying to pass query params to a page but it's not working?
- I'm trying to pass information via the hash but it's not working?
- I'm trying to use the application cache but it's not working.
- Content injected into a page is not enhanced.
- Triggering create on injected HTML does not work.
- How can I stop JQM from auto-enhancing an element?
- How can I stop JQM from enhancing a block of elements?
- How do I control page titles?
- How do I load a page?
- Events
- How do I use touch and mouse events?
- Theme and styling
- How does theming work?
- Apps
- How do I need to configure PhoneGap/Cordova?
Table Reflow: Heading groups
This table will stack the data into label value pairs at narrow widths. The grouped column headings are displayed as subheadings between data sets. The screen needs to be wide before it shows the tabular format so the media query is set to 72em (1,152px). There are custom styles for the first row to set the background to dark gray with white text and hide the label so it looks more like a section divider.
| Q1 2012 | Q2 2012 | Q3 2012 | Q4 2012 | YTD Totals | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Store | Income | Profit | Change | Income | Profit | Change | Income | Profit | Change | Income | Profit | Change | Income | Profit | Change |
| Boston | 2,898 | 739 | -5.8% | 3,647 | 1,354 | +5.8% | 4,981 | 2,246 | +13.4% | 3,457 | 1,259 | -3.9% | 12,463 | 6,234 | +5.9% |
| Chicago | 2,898 | 739 | -5.8% | 3,647 | 1,354 | +5.8% | 4,981 | 2,246 | +13.4% | 3,457 | 1,259 | -3.9% | 12,463 | 6,234 | +5.9% |
| NYC | 2,898 | 739 | -5.8% | 3,647 | 1,354 | +5.8% | 4,981 | 2,246 | +13.4% | 3,457 | 1,259 | -3.9% | 12,463 | 6,234 | +5.9% |