Comment créer dynamiquement un lien de site Web à l'aide de jQuery

Comment créer dynamiquement un lien de site Web à l’aide de jQuery

Comment créer dynamiquement un lien de site Web à l’aide de jQuery

Dans ce tutoriel, nous allons créer un Comment créer dynamiquement un lien de site Web à l’aide de jQuery. Ce tutoriel a pour but d’enseigner comment créer dynamiquement votre propre lien de site Web. Cela couvrira toutes les parties importantes pour créer un formulaire html pour générer un lien. Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel.

Ce tutoriel est facile à comprendre, il suffit de suivre mes instructions que j’ai fournies et vous pouvez le faire sans problème. Ce programme est utile si vous souhaitez mettre un lien vers votre site Web. Je ferai de mon mieux pour vous donner le moyen le plus simple de créer ce programme Comment créer dynamiquement un lien vers un site Web. Faisons donc le codage.

Avant de commencer :

Vous devez d’abord télécharger le jQuery brancher.

Voici le lien pour le jQuery que j’ai utilisé dans ce tutoriel https://jquery.com/.

Enfin, voici le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.

Création de l’interface

C’est ici que nous allons créer une interface simple pour notre application. Ce code affichera le formulaire html pour générer un lien url. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.

<!DOCTYPE html>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
<div class="col-md-6 well">
<h3 class="text-primary">How to Create a Website Link Dynamically</h3>
<hr style="border-top:1px dotted #ccc;"/>
<input type="text" placeholder="Website name" id="name" class="form-control"/>
<input type="text" placeholder="URL" id="url" class="form-control"/>
<button type="button" id="create" class="btn btn-success btn-block"><span class="glyphicon glyphicon-link"></span> Create Link</button>

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code stockera les données saisies et les affichera sous forme de lien vers un site Web. Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.

$(document).ready(function(){
$('#create').on('click', function(){
var name = $('#name').val();
var url = $('#url').val();

if(name == "" || url == ""){
alert("Required Field!");
}else{
$('#result').append("<a href="https://www.sourcecodester.com/tutorial/javascript/15918/"+url+"" target="_blank">"+name+"</a><br />");
$('#name').val('');
$('#url').val('');
}
});
});

Dans le code donné, nous appelons d’abord l’événement de base jQuery ready pour signaler que le DOM de la page est maintenant prêt à être utilisé. Après cela, nous lions le bouton pour déclencher certaines fonctions en utilisant le sur() fonction. Nous créons ensuite une variable qui contiendra les données html. Pour afficher le lien de notre site Web, nous ajoutons simplement les données de formulaire HTML saisies à la page à l’aide de jQuery. ajouter() fonction.

Production:

La Comment créer dynamiquement un lien de site Web à l’aide de jQuery le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.

Voilà, nous avons créé avec succès Comment créer dynamiquement un lien de site Web à l’aide de jQuery. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !

Plus de tutoriels pour le langage JavaScript

Tutoriels JavaScript

Télécharger ici

Lire Aussi Un package flutter qui peut être utilisé pour importer une chronologie datetime déroulante

Partager 0

Tweet

Partager

Partager

A propos de l'auteur