syntaxe
{up ajax-view=999 | btn-label=Voir un article}syntaxe
{up ajax-view=fichier.ext | btn-label=afficher un fichier}syntaxe
{up ajax-view=fichier.jpg | btn-label=[img src='photo-mini.jpg'][br]Cliquer pour voir l'image en grand | password=1234}- ajax_view: id article ou chemin vers fichier txt ou image
Style du bouton d'appel du contenu ajax
- btn-label = en=load content;fr=charger le contenu: texte sur le bouton appel
- btn-style = btn btn-primary: style et classe du bouton appel
- btn-tag = div: balise principale
Demande de mot de passe
- password: mot de passe pour télécharger le fichier
options secondaires
- HTML: 0= aucun traitement, 1=affiche le code, ou liste des tags à garder (ex: img,a)
- EOL: forcer un retour à la ligne
- ext-images = jpg,png,gif,webp: les extensions des fichiers images autorisés
Style
- id: identifiant
- main-tag (block) = div: balise principale
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
Un exemple simple : fichier HTML
{up ajax-view=images/actions-demo/ajax/fable.html}Ce shortcode affiche le bouton ci-contre qui permet de charger et d'afficher le contenu du fichier texte indiqué comme argument.
Si vous regardez le code de la page avec l'inspecteur de votre navigateur, vous constaterez que le texte est chargé seulement après le clic sur le bouton.
Nous verrons que cette action accepte également des fichiers HTML, des images, des articles Joomla ou des URL pour iframe.
Pour afficher le contenu texte et non sa représentation HTML, il suffit d'utiliser l'option HTML
{up ajax-view=images/actions-demo/ajax/fable.html
| HTML | EOL
| btn-label=voir le source du fichier HTML | btn-style=btn bd-vert
| class=bd-vert p1}HTML force l'affichage du code et EOL les sauts de lignes.
Les autres options permettent de styler le bouton et la zone de rendu.
Avec un fichier TXT
Cet exemple affiche le contenu d'un fichier texte.
{up ajax-view=images/actions-demo/ajax/dicton.txt
| btn-label=Voir un dicton sur l'informatique
| eol
| class=bd-rougeFonce ombreMax p1 mb2}Les options ajoutées permettent :
- btn-label : texte du bouton. BBCode accepté.
- eol : utile uniquement pour les fichiers textes, force les retour à la ligne
- class : habille le contenu qui sera affiché
Avec des images
Cliquer pour voir l'image en grand
Vous risquez d'être surpris par la demande d'un mot de passe qui est "1234".
Cette fonctionnalité, disponible pour tous les types de contenu, permet de réserver des informations aux seuls détenteurs du précieux sésame.
{up ajax-view=images/photos/Pingouins.jpg
| btn-label=[img src="/images/photos/Pingouins-mini.jpg"][br]Cliquer pour voir l'image en grand
| btn-style=btn bd-gris bd-arrondi bg-bleuPale p1 tc
| password=1234}- ajax-view : le chemin vers le fichier image
- btn-label : le contenu du bouton au format bbcode
- btn-style : les classes CSS pour le bouton
- password : la fameuse option contenant le mot de passe demandé
Avec un article Joomla!
Pour afficher l'article, nous utilisons ce shortcode avec l'id de l'article comme argument principal.
{up ajax-view=281
| btn-label=Charger et afficher l'article "exemple pour ajax-view" (id=281)
| class=bd-rougeFonce ombreMax p1 mb2}Personnellement, j'utilise une catégorie nommée "fragments" pour contenir tous ces articles.
box (1) upactionslist (1) flexauto (1) ajax-view (5) readmore (1) div (2) jcontent-info (1)