<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Example</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 대화상자 페이지 -->
<div data-role="page" id="dialogPage" data-theme="a">
<div data-role="header">
<h1>대화상자</h1>
</div>
<div data-role="content">
<p>이것은 대화상자입니다.</p>
<a href="#mainPage" data-role="button" data-rel="back">닫기</a>
</div>
</div>
<!-- 메인 페이지 -->
<div data-role="page" id="mainPage">
<div data-role="header">
<h1>메인 페이지</h1>
</div>
<div data-role="content">
<a href="#dialogPage" data-role="button">대화상자 열기</a>
<!-- 액션시트 (팝업으로 구현) -->
<a href="#actionSheet" data-role="button" data-rel="popup">액션시트 열기</a>
<div data-role="popup" id="actionSheet">
<ul data-role="listview">
<li><a href="#">옵션 1</a></li>
<li><a href="#">옵션 2</a></li>
</ul>
</div>
<!-- 바/블록 레이아웃 -->
<div class="ui-grid-a">
<div class="ui-block-a"><a href="#" data-role="button">블록 A</a></div>
<div class="ui-block-b"><a href="#" data-role="button">블록 B</a></div>
</div>
</div>
<div data-role="footer">
<h4>페이지 푸터</h4>
</div>
</div>
</body>
</html>
1. **Dialog Page**:
- A separate page (`data-role="page"`, `id="dialogPage"`) is designed to function as a dialog. It has its header (`data-role="header"`) and a button (`data-role="button"`, `data-rel="back"`) to close the dialog, simulating the dialog's dismissal action by navigating back to the previous page.
- This approach leverages jQuery Mobile's page system to create modal-like dialogs that are part of the single-page application (SPA) flow, allowing for easy integration and navigation within the app.
2. **Main Page**:
- The primary interface of the application (`id="mainPage"`) includes a header, content area, and footer. The content area showcases the use of buttons to trigger different UI components.
- **Action Sheet Popup**: A popup (`data-role="popup"`, `id="actionSheet"`) is triggered by a button, containing a list (`data-role="listview"`) to simulate an action sheet. This popup provides options or actions to the user in a modal style, which is common in mobile interfaces for offering contextual actions.
- **Grid Layout**: Demonstrates a two-column grid layout (`class="ui-grid-a"`) with blocks labeled A and B, each containing a button. This grid layout is part of jQuery Mobile’s responsive grid system, designed to create flexible and adaptive layouts that work across various screen sizes.
3. **Navigation and Interactivity**:
- The document utilizes jQuery Mobile's AJAX navigation system, allowing users to move between the main page and the dialog seamlessly. This system enhances the user experience by enabling smooth transitions and maintaining the application's state.
- Interactive elements like buttons and popups are easily implemented with `data-role` attributes, showcasing jQuery Mobile's declarative approach to enhancing standard HTML elements with mobile-optimized behaviors and styles.
### Key Points:
- jQuery Mobile provides a comprehensive framework for developing mobile web applications, offering widgets and features such as dialogs, popups, and grid layouts, which are essential for creating rich, interactive mobile interfaces.
- The example highlights the framework's simplicity and efficiency in adding complex behaviors (like dialogs and action sheets) and layouts (like responsive grids) with minimal code, making it accessible for developers of all skill levels.
- By leveraging HTML5 data attributes (`data-*`), jQuery Mobile allows developers to create feature-rich pages that behave consistently across a wide range of devices and screen sizes, ensuring a good user experience in mobile web applications.
### Possible Improvements:
- **Enhanced User Experience**: Consider adding transitions or animations to improve the visual appeal and feedback of actions like opening/closing popups or navigating between pages.
- **Accessibility Enhancements**: Ensure all interactive elements are accessible by adding appropriate ARIA roles and labels, especially for dynamic content like popups and action sheets.
- **Custom Styling**: While jQuery Mobile provides a default theme, customizing the styles to match the brand or desired aesthetics can further refine the user interface and enhance the overall user experience.
- **Optimization and Performance**: Review and optimize the application for performance, especially for devices with limited resources, by minimizing dependencies and ensuring efficient JavaScript and CSS delivery.
'개념 > JQuery' 카테고리의 다른 글
| JQuery) Pie Chart Example with Chart.js (0) | 2025.03.09 |
|---|---|
| JQuery) jQuery Event Handling Example (0) | 2025.03.08 |
| JQuery) jQuery Mobile Advanced Grids and Collapsible Panel Example (0) | 2025.03.04 |
| JQuery) jQuery Mobile Input Types, Slider, and Switch Example (0) | 2025.03.03 |
| JQuery) jQuery Mobile Checkbox Buttons and Dialog-style Select Menus Example (2) | 2025.03.02 |