Tweet
Chers tous,
J'ai créé « mod_custom_alphabet » à partir de la copie de « mod-custom » dans « modules ».
Dans le fichier tmpl, j'ai transformé default.php en
Dans le fichier mod-custom_alphabet, j'ai créé le dossier js, qui contient le fichier script.js que j'ai aussi créé :
Enfin, dans le fichier mod_custom_alphabet j'ai créé le dossier css qui contient le fichier styles.css que j'ai aussi créé :
Or, il faut maintenant installer le module créé et j'aurais besoin d'aide s'il vous plaît, car je ne sais pas comment faire.
J'ai créé « mod_custom_alphabet » à partir de la copie de « mod-custom » dans « modules ».
Dans le fichier tmpl, j'ai transformé default.php en
Code:
<?php defined('_JEXEC') or die; ?>
<link rel="stylesheet" href="<?php echo JURI::base() . 'modules/mod_custom_alphabet/css/styles.css'; ?>" type="text/css" />
<div id="alphabet">
<!-- Votre HTML pour afficher l'alphabet -->
<ul class="letters">
<li><a href="#" class="letter">A</a></li>
<li><a href="#" class="letter">B</a></li>
<li><a href="#" class="letter">Z</a></li>
</ul>
</div>
<div id="wordList">
<!-- La liste des mots correspondants sera affichée ici -->
<ul id="wordsContainer">
<!-- Les mots correspondants seront insérés ici -->
</ul>
</div>
<script src="<?php echo JURI::base() . 'modules/mod_custom_alphabet/js/script.js'; ?>"></script>
Code:
// Exemple de mots correspondants pour chaque lettre (simulation de données)
const words = {
'A': ['auie', 'aiueauie', 'auieauieaiue'],
'B': ['bépo', 'bépobépo'],
'Z': ['zjld'],
// ... Ajoutez d'autres lettres et leurs mots correspondants ici
};
// Fonction pour afficher les mots correspondants à la lettre sélectionnée
function renderWords(letter) {
const wordsContainer = document.getElementById('wordsContainer');
wordsContainer.innerHTML = ''; // Efface la liste actuelle des mots
const filteredWords = words[letter] || []; // Récupère les mots correspondants à la lettre sélectionnée
// Ajoute chaque mot à la liste
filteredWords.forEach(function(word) {
const li = document.createElement('li');
li.textContent = word;
wordsContainer.appendChild(li);
});
}
// Événement pour gérer le clic sur les lettres de l'alphabet
document.addEventListener('DOMContentLoaded', function() {
const alphabet = document.querySelector('#alphabet');
alphabet.addEventListener('click', function(event) {
if (event.target.classList.contains('letter')) {
const letter = event.target.textContent;
renderWords(letter); // Appel à la fonction pour afficher les mots correspondants
}
});
});
Code:
/* Styles pour l'alphabet */
#alphabet {
margin-bottom: 20px;
}
.letters {
list-style: none;
padding: 0;
}
.letters li {
display: inline-block;
margin-right: 5px;
}
/* Styles pour la liste de mots */
#wordList {
/* Ajoutez des styles personnalisés */
}
Commentaire