<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta charset="viewport" content="width = device-width, initial-scale=1.0">
<title></title>
<link rel = "stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id = "page1">
<div data-role="header" data-position="fixed">
<h1>title</h1>
<div data-role="navbar">
<ul>
<li><a href="#page1" class="ui-btn-active ui-state-persist">page1</a></li>
<li><a href="#page2">page2</a></li>
<li><a href="#page3">page3</a></li>
</ul>
</div>
<div data-role="content">
<p>content section</p>
<h1>first page</h1>
</div>
<div data-role="footer" data-position="fixed" data-id="footerid1">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="plus">add</a></li>
<li><a href="#" data-icon="minus">delete</a></li>
<li><a href="#" data-icon="check" class="ui-btn-active ui- state-persist">check</a></li>
</ul>
</div>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed">
<h1>page title</h1>
<div data-role="navbar">
<ul>
<li><a href="#page1" data-direction="reverse">page1</a></li>
<li><a href="#page2" class="ui-btn-active ui-stage-persist">page2</a></li>
<li><a href="#page3">page3</a></li>
</ul>
</div>
</div>
<div data-role="content">
<p>content section</p>
<h1>second page</h1>
</div>
<div data-role="footer" data-position="fixed" data-id="footerid1">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="plus">add</a></li>
<li><a href="#" data-icon="minus">delete</a></li>
<li><a href="#" data-icon="check" class="ui-btn-active ui- state-persist">check</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header" data-position="fixed">
<h1>page title</h1>
<div data-role="navbar">
<ul>
<li><a href="#page1" data-direction="reverse">page1</a></li>
<li><a href="#page2" class="ui-btn-active ui-stage-persist">page2</a></li>
<li><a href="#page3">page3</a></li>
</ul>
</div>
</div>
<div data-role="content">
<p>content section</p>
<h1>third page</h1>
</div>
<div data-role="footer" data-position="fixed" data-id="footerid2">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="plus">add</a></li>
<li><a href="#" data-icon="minus">delete</a></li>
<li><a href="#" data-icon="check" class="ui-btn-active ui- state-persist">check</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>1. **Page Structure**:
- The document contains three `div` elements, each with a `data-role="page"`. These represent individual pages (`#page1`, `#page2`, `#page3`) within the application.
- Each page contains a header (`data-role="header"`), a content section (`data-role="content"`), and a footer (`data-role="footer"`), showcasing a consistent design pattern across pages.
2. **Navigation**:
- Inside the headers and footers, `div` elements with `data-role="navbar"` contain unordered lists for navigation links. These links use anchors (`<a>`) with `href` attributes pointing to the IDs of the pages (`#page1`, `#page2`, `#page3`), facilitating navigation among them.
- The `class="ui-btn-active ui-state-persist"` class is used on one of the navigation links in each navbar to indicate the currently active page or the currently selected footer option.
3. **Content and Styling**:
- Each page's content section includes a paragraph (`<p>`) and a heading (`<h1>`) describing the page. This is a placeholder for where the application's actual content would be placed.
- The application utilizes jQuery Mobile's CSS for styling, which is designed to be responsive and mobile-friendly. This ensures that the application looks good on various device sizes and orientations.
4. **Header and Footer**:
- The headers and footers are marked as `data-position="fixed"`, meaning they will remain in place at the top and bottom of the screen, respectively, as the user scrolls through the content.
- The footer on each page is associated with a `data-id`, indicating that footers across different pages with the same `data-id` will maintain their active state when moving among pages. This feature supports a consistent user experience across the application.
5. **jQuery Mobile Framework**:
- The document includes jQuery Mobile's JavaScript and CSS files from a CDN, enabling the rich set of mobile-optimized widgets and features offered by the framework, such as touch-optimized layouts and AJAX-powered navigation.
### Key Points:
- This template demonstrates a fundamental approach to building multi-page applications with jQuery Mobile, highlighting the framework's ease of use for creating mobile-friendly web apps.
- The structure emphasizes reusable components (headers, footers, navbars) and consistent UI across different "pages" within a single HTML document, leveraging jQuery Mobile's ability to dynamically show and hide these pages based on user interaction.
- Navigation is managed through simple anchor tags, making the application easy to extend with additional pages or content as needed.
### Possible Improvements:
- **Dynamic Content Loading**: For applications requiring more content, consider dynamically loading page content using AJAX to reduce initial load times and improve performance.
- **Enhanced User Interface**: While jQuery Mobile provides a solid base, custom CSS can be added to further refine the look and feel, tailoring the application to specific branding requirements.
- **Accessibility Enhancements**: Ensure that all interactive elements are accessible, including adding proper ARIA labels and roles where necessary, to support users with disabilities.
- **Optimization**: Review and optimize the application for performance, particularly if intending to add more complex functionalities or content.
'개념 > JQuery' 카테고리의 다른 글
| JQuery) jQuery Mobile Complex Feature Integration (0) | 2025.03.14 |
|---|---|
| JQuery) jQuery Mobile Advanced List View Example (0) | 2025.03.13 |
| JQuery) Interactive To-Do List with jQuery (0) | 2025.03.11 |
| JQuery) Bubble Chart Example with Chart.js (0) | 2025.03.10 |
| JQuery) Pie Chart Example with Chart.js (0) | 2025.03.09 |