<!DOCTYPE html>
<html>
<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="home">
<div data-role="header">
<h1>smart page link</h1>
</div>
<div data-role="content">
<h2>output program link</h2>
<ul data-role="listview" data-inset="true">
<li><a href="mailto:asdb2020@hs.ac.kr">Email link</a></li>
<li><a href="tel:010-1234-1234" target="_blank">tel link</a></li>
<li><a href="sms:0101-2345-2345" target="_blank">SMS letter link</a></li>
<li><a href="http://maps.google.com/maps?q=37.511611.127.098293&h1=ko" target="_blank">address</a></li>
<li><a href="gttp://maps.google.com/maps?q=대한민국+서울특별시+강남구+삼성1동+159-1&h1=ko" target="_blank">address 2</a></li>
</ul>
</div>
<div data-role="footer" class="ui-bar" data-position="fixed">
<a href="index.html" data-icon="grid" rel="external">index</a>
</div>
</div>
</body>
</html>- `<!DOCTYPE html>`: Declares the document type and version of HTML being used (HTML5 in this case).
- `<html>`: The root element of the HTML document.
- `<head>`:
- `<meta charset="utf-8">`: Specifies the character encoding for the HTML document.
- `<meta charset="viewport" content="width = device-width, initial-scale=1.0">`: Defines the viewport to ensure the site scales correctly on different devices. However, there's a mistake in the attribute name; it should be `name="viewport"`.
- `<title></title>`: The title of the web page, which appears in the browser tab. It is left blank in this example.
- `<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">`: Links to the jQuery Mobile stylesheet, which provides the framework's default styling.
- `<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>`: Includes jQuery library, a prerequisite for jQuery Mobile.
- `<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>`: Includes the jQuery Mobile library, enabling mobile-friendly features and interfaces.
- `<body>`:
- `<div data-role="page" id="home">`: Defines a jQuery Mobile page with the `id` of "home".
- `<div data-role="header">`: Specifies the header section of the page.
- `<h1>smart page link</h1>`: Sets the header text, typically used for the title of the page or section.
- `<div data-role="content">`: Denotes the primary content area of the page.
- `<h2>output program link</h2>`: Provides a subtitle or heading for the content below.
- `<ul data-role="listview" data-inset="true">`: Creates a list view with inset styling, a common design pattern in mobile interfaces for listing items.
- Multiple `<li><a href="...">...</a></li>`: List items containing hyperlinks to various types of links (email, telephone, SMS, and addresses). Each `<a>` tag includes a `href` attribute for different protocols (`mailto:`, `tel:`, `sms:`, `http:`) to handle different types of links.
- Note: There's a typo in the last address link (`gttp://` should be `http://`), and it attempts to link to a Google Maps location using query parameters.
- `<div data-role="footer" class="ui-bar" data-position="fixed">`: Defines a footer for the page with a fixed position, ensuring it stays at the bottom of the viewport.
- `<a href="index.html" data-icon="grid" rel="external">index</a>`: Provides a link back to the index page or home, with an icon indicated by `data-icon="grid"`.
This document showcases how to use jQuery Mobile to build a web page that is optimized for mobile devices, demonstrating features like responsive design, navigation links (including special links like email, telephone, and SMS), and the use of fixed headers and footers.
'개념 > JQuery' 카테고리의 다른 글
| JQuery) jQuery Mobile Page Transitions Example (0) | 2025.02.23 |
|---|---|
| JQuery) HTML Document with Mixed CSS Styling Methods (0) | 2025.02.21 |
| JQuery) Basic jQuery Mobile Page Template (1) | 2025.02.17 |
| JQuery) Bar Chart (0) | 2025.02.11 |
| JQuery) jQuery Line Chart Example (0) | 2025.02.10 |