ホームページ >ウェブフロントエンド >jsチュートリアル >HTML、CSS、jQuery: 美しいお気に入りインターフェイスを構築する
HTML、CSS、jQuery: 美しいお気に入りインターフェイスを構築する
- 王林オリジナル
- 2023-10-27 13:02:09909ブラウズ
HTML、CSS、jQuery: 美しいお気に入りインターフェイスを構築する
Web ブラウジングの現代において、お気に入りはユーザーが自分のコンテンツを保存して整理するための重要なツールとなっています。お気に入りのウェブページ。美しく使いやすいお気に入りインターフェイスは、ユーザー エクスペリエンスを向上させるために非常に重要です。この記事では、HTML、CSS、jQuery を使用して美しいお気に入りインターフェイスを構築する方法を紹介し、具体的なコード例を示します。
まず、お気に入りインターフェイスを構築するためにメイン HTML ファイルを作成する必要があります。以下は単純な HTML 構造です:
<!DOCTYPE html> <html> <head> <title>我的收藏夹</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script> </head> <body> <h1>我的收藏夹</h1> <div id="bookmarks"></div> <button id="addBookmark">添加收藏</button> </body> </html>
上記の HTML 構造では、外部 CSS ファイル (styles.css) と外部 JavaScript ファイル (script.js) を導入しました。これらのファイルには次のようなヘルプがあります。お気に入りのインターフェースを美しくし、操作します。
次に、お気に入りのインターフェイスを美しくするためにいくつかの CSS スタイルを定義しましょう。以下は、styles.css ファイルのサンプル コードです。
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
text-align: center;
color: #333;
}
#bookmarks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
margin: 20px;
}
.bookmark {
background-color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.bookmark .title {
font-weight: bold;
margin-bottom: 5px;
}
.bookmark .url {
color: #666;
}上記の CSS コードでは、お気に入りインターフェイスを美しくするためにいくつかの基本スタイルを定義します。グリッド レイアウトを使用して、ウォーターフォール スタイルのお気に入りレイアウトを作成しました。各コレクションには、白い背景、丸い境界線、および影の効果があります。
次に、初期のお気に入りデータが必要です。以下は、バックエンドから取得したお気に入りデータをシミュレートする単純な JavaScript オブジェクト配列です:
var bookmarksData = [
{
title: "Google",
url: "https://www.google.com"
},
{
title: "GitHub",
url: "https://www.github.com"
},
{
title: "Medium",
url: "https://www.medium.com"
}
];次に、初期データに基づいてお気に入りインターフェイスを動的に生成し、新しいお気に入り関数を追加する JavaScript コードを記述する必要があります。 。以下は、script.js ファイルのサンプル コードです。
$(document).ready(function() {
// 生成初始的收藏夹界面
generateBookmarks(bookmarksData);
// 添加收藏夹
$("#addBookmark").click(function() {
var title = prompt("请输入收藏夹标题:");
var url = prompt("请输入收藏夹链接:");
var bookmark = {
title: title,
url: url
};
bookmarksData.push(bookmark);
generateBookmarks([bookmark]);
});
});
function generateBookmarks(bookmarks) {
var bookmarksContainer = $("#bookmarks");
bookmarks.forEach(function(bookmark) {
var bookmarkHtml = '<div class="bookmark"><div class="title">' + bookmark.title + '</div><a class="url" href="' + bookmark.url + '">' + bookmark.url + '</a></div>';
bookmarksContainer.append(bookmarkHtml);
});
}上記の JavaScript コードでは、jQuery の Ready 関数を使用して、ページが読み込まれた後に関連コードが実行されるようにしています。お気に入りデータに基づいてお気に入りインターフェイスを生成するためのgenerateBookmarks関数を定義します。また、jQueryのクリック機能を利用して、お気に入りを新規追加する機能も実装しました。
これで、HTML ファイルを開くと、美しいお気に入りインターフェイスが表示され、[お気に入りの追加] ボタンをクリックして新しいお気に入りを追加できます。
要約すると、この記事では、HTML、CSS、jQuery を使用して美しいお気に入りインターフェイスを構築する方法を紹介します。グリッド レイアウトといくつかの CSS スタイルを使用してインターフェイスを美しくし、jQuery を使用してお気に入りインターフェイスを動的に生成し、新しいお気に入りを追加します。この記事が独自のお気に入りインターフェイスの構築に役立つことを願っています。
以上がHTML、CSS、jQuery: 美しいお気に入りインターフェイスを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。