Maison > Article > interface Web > Tutoriel jQuery : Comment charger et animer du contenu à l'aide de jQuery
Tutoriel jQuery : Comment charger et animer du contenu à l'aide de jQuery
- 王林original
- 2023-09-03 21:21:071436parcourir
Cliquer sur n'importe quel lien sur une page Web chargera généralement le contenu de cette URL dans notre navigateur. C’est ainsi que fonctionnent la plupart des liens et sites Web sur Internet. Cependant, vous pouvez également modifier ce comportement par défaut avec du code pour charger le contenu de la nouvelle URL dans un élément spécifique de la page Web actuelle sans recharger la page entière.
Cela peut être réalisé avec un peu d'aide de JavaScript. Nous utiliserons la bibliothèque jQuery pour effectuer le gros du travail lié à l'animation et au chargement du contenu AJAX.
Vous pouvez également charger et animer du contenu en utilisant du JavaScript simple.
Prêt à marquer
Nous utiliserons une page Web très simple pour démontrer comment fonctionne l'effet. Cependant, les principes que vous apprenez ici s’appliquent également à d’autres sites Web. Il s'agit du balisage de la page d'accueil du site Web que nous allons charger et animer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="team.html">Our Team</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<span class="loader"></span>
<section id="content">
<img src="dog.svg" / alt="Tutoriel jQuery : Comment charger et animer du contenu à l'aide de jQuery" >
<h1>Embrace Pawsitivity, Transform Lives!</h1>
<p>Welcome to Pawsitive Care Foundation, a dedicated organization working towards the well-being and protection of animals.</p>
<p>Our animal Welfare NGO provides a range of services to support animal welfare:</p>
<ol>
<li>Rescue and rehabilitation of abused and abandoned animals</li>
<li>Adoption programs to find loving homes for animals in need</li>
<li>Education and awareness campaigns to promote responsible pet ownership</li>
<li>Lobbying and advocacy for stronger animal protection laws</li>
<li>Collaboration with local communities to implement spay/neuter programs</li>
</ol>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="load-content.js"></script>
</body>
</html>
La balise renvoie au fichier style.css, qui contient le CSS utilisé pour styliser toutes les pages Web. Le corps de la page Web contient la classe nav 元素，其中包含用户可以访问的链接列表。有一个 span 元素和 loader. Chaque fois que l'utilisateur clique sur l'un des liens de la navigation, nous afficherons et masquerons cet élément de chargement. Le chargeur indiquera que la page est en cours de chargement.
Après cela, nous avons une balise section 元素，其中 id 设置为 content。我们网站的每个网页都会有此部分。本节中的内容是我们将使用 AJAX 加载的内容。我们在 body 元素末尾附近还有两个 script 标签。第一个 script qui charge jQuery et une deuxième balise qui charge notre propre fichier JavaScript.
Avec l'aide de quelques CSS, notre page ressemble à ceci :
Vous pouvez créer des pages similaires nommées about.html, team.html et contact.html.
Styling des chargeurs et du contenu
Nous allons maintenant apprendre à utiliser CSS pour animer un chargeur afin qu'il tourne lors du chargement d'un nouveau contenu. C'est le CSS qui fait tourner notre chargeur.
.loader {
background: white;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 2rem;
top: 1.2rem;
animation: 0.5s infinite spin;
border-radius: 50%;
border-top: 5px solid black;
border-bottom: 5px solid gray;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Il y a quelques points à noter ici. Premièrement, les chargeurs ont un positionnement absolu. Cela le sort du flux normal du document afin que nous puissions le placer où nous voulons sans interrompre le flux des autres contenus.
Nous animons le chargeur en continu en utilisant animation 属性根据 spin valeurs d'images clés, où chaque boucle d'animation se termine en 0,5 seconde.
Utilisez border-radius: 50% pour arrondir notre chargeur car il a la même largeur et la même hauteur. L’utilisation de couleurs de bordure différentes en haut et en bas n’est qu’une préférence de style.
Nous utiliserons également le CSS suivant pour nous assurer que le contenu que nous chargeons couvre toute la largeur du corps.
section#content {
width: 100% !important;
}
Cela deviendra important lorsque nous animerons le contenu principal.
La façon dont vous souhaitez styliser le contenu général de toutes ces pages dépend de vous.
Gestion des clics sur les liens et du chargement du contenu
Si vous chargez une page Web à ce moment-là, vous remarquerez une chose que le chargeur continuera à apparaître. Nous voulons qu'il apparaisse uniquement lors du chargement du contenu. Une fois notre page prête, nous pouvons utiliser le chargeur code-behind suivant :
$(document).ready(function () {
$(".loader").fadeOut();
});
Puisque nous voulons contrôler ce qui se passe lorsque l'utilisateur clique sur un lien dans le menu de navigation, nous devons attacher un écouteur à ces liens. La fonction de gestionnaire de l'écouteur contiendra tout le code que nous souhaitons exécuter à chaque fois que vous cliquerez sur le lien. Voici le code de notre gestionnaire de clics :
$("nav li a").on("click", function(event) {
event.preventDefault();
const loadURL = `${$(this).attr("href")} #content`;
$("#content").hide("fast", function() {
loadContent(loadURL);
});
$(".loader").fadeIn("normal");
window.location.hash = $(this).attr("href").slice(0, -5);
});
La première chose que nous faisons dans le gestionnaire de clics est d'empêcher l'action par défaut de se produire. L'action par défaut dans cet exemple consiste pour l'utilisateur à accéder à l'URL liée.
Puisque nous avons bloqué le chargement de l'URL liée dans le navigateur, il est de notre responsabilité de charger manuellement ce contenu pour le spectateur. Pour ce faire, nous récupérons d’abord le href 属性的值。我们还在 URL 末尾附加 #content du lien cliqué puisque c’est ce que nous voulons réellement charger.
Nous utilisons la méthode hide() 方法来隐藏 #content 部分。我们隐藏此部分是因为它当前包含用户尝试离开的页面的标记。 hide() dans jQuery qui accepte une chaîne ou un nombre comme premier paramètre. Cette valeur détermine le temps nécessaire pour masquer l'élément sélectionné. Réglez-le sur Rapide pour masquer le contenu en 200 millisecondes.
hide() 方法会对所选元素的宽度、高度和不透明度进行动画处理，直到它们变为 0。一旦它们达到零，display 属性就会设置为 none.
Le deuxième paramètre est une fonction de rappel, qui est déclenchée une fois l'animation de masquage terminée. On appelle loadContent() dans la fonction de rappel.
接下来，我们使用 fadeIn() 方法使我们的 loader 元素在加载页面内容时可见。我们还更新页面的 URL 以添加反映当前单击的链接的哈希值。
现在，我们将定义 loadContent() 函数，该函数接受您要加载的 URL 作为其参数。 loadContent() 函数使用另一个名为 showNewContent() 的辅助函数，如下所示：
function loadContent(url) {
$("#content").load(url, function() {
showNewContent();
});
}
function showNewContent() {
$("#content").show("fast", function() {
$(".loader").fadeOut("fast");
});
}
loadContent() 方法使用 jQuery 中内置的 load() 方法来加载 #content 元素中指定 URL 的内容。加载完成后执行回调函数。
我们使用回调函数来执行另一个名为 showNewContent() 的函数。还记得我使用 hide() 方法来隐藏 #content 元素吗？现在，我们将借助 show() 方法使其再次可见。
show() 方法基本上与 hide() 方法相反。它将通过逐渐增加所选元素的宽度、高度和不透明度来使所选元素可见。
在上一节中，我使用了一些 CSS 来确保内容元素的宽度始终保持在 100%。这样做是为了抵消 show() 和 hide() 更新所选元素宽度的影响。在我看来，保持宽度不变，同时对高度和不透明度进行动画处理看起来更好。
最终想法
在本教程中，我们学习了如何使用流行的 jQuery 库中的内置方法来加载我们网站上不同网页的内容并为其设置动画。
如果您想在网站上重现效果，请记住一些事项。首先，标记应该有一个内容元素，您可以在 AJAX 请求的帮助下动态加载新内容。其次，所有链接的单击处理程序应防止导航到单击的链接的默认行为。第三，您尝试以这种方式加载的网页最好属于同一域、子域等。这是因为它们将受到同源策略的约束。
如果您不打算使用 jQuery，也可以使用纯 JavaScript 实现相同的效果。
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!