<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name = "viewport" content = "width = device - width, initial-scale=1.0">
<title>JQuery Mobile</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>
<!--page -> 링크로 연결하는 방법-->
<div data-role="page" id = "page1">
<div data-role = "header">
<h1> header section</h1>
</div>
<div data-role = "content">
<a href = "#page2"> page 2</a>
</div>
<div data-role = "footer">
<h4>footer section</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>header section</h1>
</div>
<div data-role="content">
<a href="#page1">page1</a>
</div>
<div data-role = "footer">
<h4> footer section </h4>
</div>
</div>
</body>
</html>1. **Page Structure**:
- The document is structured into two `<div>` elements, each with `data-role="page"`, signifying separate pages within the same HTML document (`id="page1"` and `id="page2"`).
- jQuery Mobile uses the `data-role` attribute to automatically apply mobile-optimized styles and behaviors to various parts of the page, such as headers, content sections, and footers.
2. **Navigation**:
- Navigation between pages is achieved through simple anchor (`<a>`) elements, where the `href` attribute points to the id of the target page (e.g., `href="#page2"` to navigate to `id="page2"`). jQuery Mobile enhances these links to enable Ajax-powered page transitions, providing a smoother user experience typical of native mobile applications.
3. **Headers and Footers**:
- Each page includes a header and a footer (`data-role="header"` and `data-role="footer"`), which are styled consistently across the application thanks to jQuery Mobile's automatic theming. The headers contain a title (`<h1>`), and the footers provide additional information or navigation (`<h4>`).
4. **Content Section**:
- The `data-role="content"` attribute is used for the main content area of each page, where the primary information and links are located. This section is where the bulk of page-specific content would be placed.
5. **Viewport Meta Tag**:
- The meta viewport tag (`<meta name="viewport" content="width=device-width, initial-scale=1.0">`) is crucial for ensuring the web application is displayed correctly across various devices. It controls the page's width and scaling on mobile devices, enhancing responsiveness and readability.
### Key Points:
- The template demonstrates the basic setup for creating a mobile web application with multiple internal pages using jQuery Mobile, showcasing how to structure content and navigate between pages within a single HTML document.
- jQuery Mobile's automatic enhancement of web page components (such as headers, footers, and navigation links) with mobile-optimized styles and behaviors is highlighted, illustrating the framework's ease of use for developing mobile web applications.
- The example serves as a foundation for more complex mobile applications, where developers can add additional content, styles, and functionality to each page as needed.
### Possible Improvements:
- **Enhanced Navigation**: Introducing more complex navigation patterns, such as a navbar or a panel for menu items, could improve usability and access to different sections of the application.
- **Custom Styling and Theming**: While jQuery Mobile provides a default theme, customizing the appearance of headers, footers, and buttons could enhance the visual appeal and brand consistency of the application.
- **Interactive Content**: Adding interactive elements such as forms, sliders, or collapsible sections to the content areas would make the application more engaging and functional for users.
'개념 > JQuery' 카테고리의 다른 글
| JQuery) jQuery Mobile External Page Navigation Example (0) | 2025.02.26 |
|---|---|
| JQuery) jQuery Mobile Single Page Template with External Link (0) | 2025.02.25 |
| JQuery) Basic jQuery Mobile Page with External and Internal Links (0) | 2025.02.24 |
| JQuery) jQuery Mobile Page Transitions Example (0) | 2025.02.23 |
| JQuery) HTML Document with Mixed CSS Styling Methods (0) | 2025.02.21 |