パネルにスタイルを使用できます。
次の例では、jQuery Mobileフレームワークでの_panel styling_の使用について説明します。
<!DOCTYPE html>
<html>
<head>
<title>Panel Styling</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<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.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
h2 {
color:#BF00FF;
}
.article {
background-color:rgb(192,192,192);
}
</style>
</head>
<body>
<div data-role = "page" id = "my_page">
<div data-role = "header">
<h2>Header</h2>
<a href = "#left-panel" data-icon = "grid"
data-iconpos = "notext">Right Panel</a>
</div>
<div role = "main" class = "ui-content">
<div class = "article">
<h2>jQuery Mobile</h2>
<p>Query Mobile is a touch-optimized web framework for creating mobile
web applications. jQuery Mobile works on all popular smartphones and
tablets. jQuery Mobile is built on top of the jQuery library, which makes
it easy to learn if you already know jQuery.</p>
</div>
</div>
<div data-role = "panel" id = "left-panel">
<ul data-role = "listview">
<li data-icon = "home"><a href = "#">India</a></li>
<li data-icon = "lock"><a href = "#">Srilanka</a></li>
<li data-role = "audio"><a href = "#">New Zealand</a></li>
</ul>
</div>
</div>
</body>
</html>上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-
