Maison > Article > interface Web > HTML, CSS et jQuery : créez une belle interface de favoris

HTML, CSS et jQuery : créez une belle interface de favoris

王林original: 2023-10-27 13:02:09778parcourir

À l'ère moderne de la navigation Web, les favoris sont devenus un outil important permettant aux utilisateurs de sauvegarder et d'organiser leurs pages Web préférées. Une interface de favoris belle et facile à utiliser est essentielle pour améliorer l’expérience utilisateur. Cet article vous expliquera comment utiliser HTML, CSS et jQuery pour créer une belle interface de favoris et fournira des exemples de code spécifiques.

Tout d'abord, nous devons créer un fichier HTML principal pour créer l'interface des favoris. Ce qui suit est une structure HTML simple :

<!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>

Dans la structure HTML ci-dessus, nous avons introduit un fichier CSS externe (styles.css) et un fichier JavaScript externe (script.js), ces fichiers nous aideront à embellir et à rendre l'interface des favoris interactive. .

Ensuite, définissons quelques styles CSS pour embellir notre interface de favoris. Voici l'exemple de code du fichier 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;
}

Dans le code CSS ci-dessus, nous définissons quelques styles de base pour embellir l'interface des favoris. Nous avons utilisé une disposition en grille pour créer une disposition des favoris en forme de cascade. Chaque collection a un fond blanc, des bordures arrondies et un effet d'ombre.

Maintenant, nous avons besoin de quelques données initiales sur les favoris. Ce qui suit est un simple tableau d'objets JavaScript qui simule les données de favoris obtenues à partir du backend :

var bookmarksData = [
   {
       title: "Google",
       url: "https://www.google.com"
   },
   {
       title: "GitHub",
       url: "https://www.github.com"
   },
   {
       title: "Medium",
       url: "https://www.medium.com"
   }
];

Ensuite, nous devons écrire du code JavaScript pour générer dynamiquement l'interface des favoris en fonction des données initiales et implémenter la fonction d'ajout de nouveaux favoris. . Voici l'exemple de code du fichier 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);
   });
}

Dans le code JavaScript ci-dessus, nous utilisons la fonction ready de jQuery pour garantir que le code pertinent est exécuté après le chargement de la page. Nous définissons une fonction generateBookmarks pour générer l'interface des favoris basée sur les données des favoris. Nous avons également utilisé la fonction click de jQuery pour implémenter la fonction d'ajout de nouveaux favoris.

Maintenant, lorsque nous ouvrons le fichier HTML, nous devrions voir une belle interface de favoris, et nous pouvons cliquer sur le bouton "Ajouter des favoris" pour ajouter de nouveaux favoris.

Pour résumer, cet article vous présente comment utiliser HTML, CSS et jQuery pour créer une belle interface de favoris. Nous utilisons la disposition en grille et certains styles CSS pour embellir l'interface, et utilisons jQuery pour générer dynamiquement l'interface des favoris et ajouter de nouveaux favoris. J'espère que cet article pourra vous aider à créer votre propre interface de favoris.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript jquery css html JS 对象

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer une playlist vidéo réactive en utilisant HTML, CSS et jQueryArticle suivant：Comment créer une playlist vidéo réactive en utilisant HTML, CSS et jQuery

Articles Liés

Voir plus