<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Mobile Feature Integration</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>
<script>
$(document).ready(function() {
// Open the panel when the mouse moves to the left edge of the window
$(window).mousemove(function(e) {
if (e.pageX < 10) { // Adjust this value to increase/decrease sensitivity
$("#myPanel").panel("open");
}
});
});
</script>
</head>
<body>
<!-- Page with Tabs -->
<div data-role="page" id="tabbedpage">
<div data-role="header">
<h1>Page with Tabs</h1>
</div>
<div data-role="content">
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a href="#tab1" data-ajax="false">Tab 1</a></li>
<li><a href="#tab2" data-ajax="false">Tab 2</a></li>
</ul>
</div>
<div id="tab1" class="ui-body-d ui-content">
<h1>Tab 1 Content</h1>
<p>This is content for Tab 1.</p>
</div>
<div id="tab2" class="ui-body-d ui-content">
<h1>Tab 2 Content</h1>
<!-- Image Picker -->
<label for="image-picker">Select an Image:</label>
<input type="file" id="image-picker" name="image-picker">
</div>
</div>
</div>
<!-- Column Toggle Table -->
<div data-role="content">
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="1">ID</th>
<th>Name</th>
<th data-priority="2">Email</th>
<th data-priority="3">Phone</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>555-1234</td>
</tr>
<!-- More rows... -->
</tbody>
</table>
</div>
<!-- Page with Hidden Panel -->
<div data-role="page" id="pageWithPanel">
<div data-role="header">
<h1>Page with Hidden Panel</h1>
</div>
<div data-role="content">
<p>Move your mouse to the left edge of the screen to open the panel.</p>
</div>
<!-- Hidden Panel -->
<div data-role="panel" id="myPanel" data-display="overlay">
<h2>Hidden Panel</h2>
<p>This is a hidden side panel.</p>
<a href="#pageWithPanel" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a">Close Panel</a>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</div>
</body>
</html>
1. **Global Structure and Style**:
- Utilizes jQuery Mobile for a mobile-friendly, responsive design. The included CSS and JavaScript files from jQuery and jQuery Mobile provide the foundational styles and behaviors.
- The script defined in the `<head>` section listens for mouse movements near the left edge of the window to open a hidden panel, demonstrating an advanced interaction beyond typical touch events.
2. **Page with Tabs**:
- The document features a `data-role="page"` element containing a tabs widget. This widget facilitates content organization within a single page, allowing users to switch between tabs without loading a new page.
- Each tab (`#tab1` and `#tab2`) is implemented as a `<div>` containing distinct content. For example, `#tab2` includes an input for image file selection, illustrating how various form elements can be incorporated within tabs.
3. **Column Toggle Table**:
- Below the tabs, a table with `data-role="table"` and `data-mode="columntoggle"` demonstrates jQuery Mobile's approach to responsive tables. This feature allows certain columns to be hidden or shown based on the screen size or user preference, enhancing the table's usability on mobile devices.
- The table includes sample data with priorities set on columns (`data-priority`), indicating their importance and the order in which they should be hidden as the screen size decreases.
4. **Hidden Panel**:
- A hidden side panel (`data-role="panel"`) is configured to display overlay content when opened. This panel is meant to be a supplementary area for navigation, information, or any content that should be accessible without navigating away from the current view.
- The panel is linked to the page containing it by its ID (`#myPanel`) and can be shown or hidden based on user interactions, in this case, mouse movement near the screen's edge.
### Key Points:
- The example demonstrates the versatility of jQuery Mobile in creating complex, feature-rich mobile web applications with interactive elements like tabs, responsive tables, and hidden panels.
- It showcases how jQuery Mobile's data attributes (`data-role`, `data-mode`, etc.) can be used to declaratively define widgets and their behaviors, simplifying the development of mobile-friendly interfaces.
- The integration of advanced interaction techniques, such as triggering actions based on mouse movement, highlights the potential for creating dynamic and engaging user experiences within the constraints of mobile web applications.
### Possible Improvements:
- **Accessibility Enhancements**: Ensure all interactive components are accessible, including adding appropriate ARIA labels and roles, especially for dynamically shown/hidden content like the panel.
- **Content and Interaction Expansion**: Introduce more complex examples of content within tabs and panels, such as embedded maps or dynamic forms, to demonstrate handling more sophisticated use cases.
- **Performance Optimization**: Evaluate the application's performance on various devices, optimizing image loading and JavaScript execution to ensure a smooth user experience across all target devices.
- **User Feedback for Hidden Panel**: Provide visual cues or hints to new users that a hidden panel is available, ensuring that the feature's discoverability doesn't rely solely on accidental or informed mouse movements.
'개념 > JQuery' 카테고리의 다른 글
| JQuery) jQuery Mobile Advanced List View Example (0) | 2025.03.13 |
|---|---|
| JQuery) Multi-Page Mobile Web Application with jQuery Mobile (0) | 2025.03.12 |
| 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 |