UP permet de réaliser de nombreuses actions dans les articles et modules personnalisés.
UP permet d'insérer des éléments comme une vidéo ou des prévisions météo, de modifier le comportement d'une table pour la rendre responsive, d'ajouter du code CSS/JS sans risque de suppression par les éditeurs wysiwyg.
A l'image du couteau suisse, UP très discret si on n'a pas besoin de lui (zéro octet sur la page), servira de chef d'orchestre pour lancer l'action demandée. Seuls les fichiers nécessaires à cette action seront chargés par le navigateur client.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graccho, eius fere, aequalí? Tum Quintus: Est plane, Piso, ut dicis, inquit. Duo Reges: constructio interrete. Illud dico, ea, quae dicat, praeclare inter se cohaerere. Quis hoc dicit? Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non deserat. Peccata paria.
Theophrasti igitur, inquit, tibi liber ille placet de beata vita? At, si voluptas esset bonum, desideraret. Nos cum te, M. Sed haec quidem liberius ab eo dicuntur et saepius. Stoici scilicet.
Quamquam te quidem video minime esse deterritum. Ita relinquet duas, de quibus etiam atque etiam consideret. Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. Quid autem habent admirationis, cum prope accesseris? Atque his de rebus et splendida est eorum et illustris oratio.
Tum Torquatus: Prorsus, inquit, assentior; Nobis aliter videtur, recte secusne, postea; Omnia contraria, quos etiam insanos esse vultis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Expectoque quid ad id, quod quaerebam, respondeas. Pauca mutat vel plura sane; Homines optimi non intellegunt totam rationem everti, si ita res se habeat. Ita multo sanguine profuso in laetitia et in victoria est mortuus. Miserum hominem! Si dolor summum malum est, dici aliter non potest. At ille pellit, qui permulcet sensum voluptate.
Duo Reges: constructio interrete. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia?
Aliter enim nosmet ipsos nosse non possumus. Hoc est vim afferre, Torquate, sensibus, extorquere ex animis cognitiones verborum, quibus inbuti sumus. Isto modo ne improbos quidem, si essent boni viri.
An, partus ancillae sitne in fructu habendus, disseretur inter principes civitatis, P. Nihil enim arbitror esse magna laude dignum, quod te praetermissurum credam aut mortis aut doloris metu. Nam his libris eum malo quam reliquo ornatu villae delectari. Eiuro, inquit adridens, iniquum, hac quidem de re; Istic sum, inquit. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. A primo, ut opinor, animantium ortu petitur origo summi boni. Claudii libidini, qui tum erat summo ne imperio, dederetur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod autem principium officii quaerunt, melius quam Pyrrho; Nihil ad rem! Ne sit sane; Tenent mordicus. Si alia sentit, inquam, alia loquitur, numquam intellegam quid sentiat; Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
Ut optime, secundum naturam affectum esse possit. Tollenda est atque extrahenda radicitus. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Intellegi quidem, ut propter aliam quampiam rem, verbi gratia propter voluptatem, nos amemus; Sed hoc sane concedamus.
Scio enim esse quosdam, qui quavis lingua philosophari possint; Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex. Quae quidem sapientes sequuntur duce natura tamquam videntes; Ego vero volo in virtute vim esse quam maximam; Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. At ego quem huic anteponam non audeo dicere;
Cur post Tarentum ad Archytam? Gloriosa ostentatio in constituendo summo bono. Duo Reges: constructio interrete. Itaque hoc frequenter dici solet a vobis, non intellegere nos, quam dicat Epicurus voluptatem. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Vestri haec verecundius, illi fortasse constantius. Quo modo autem optimum, si bonum praeterea nullum est? Atqui reperies, inquit, in hoc quidem pertinacem; His similes sunt omnes, qui virtuti student levantur vitiis, levantur erroribus, nisi forte censes Ti. Et quod est munus, quod opus sapientiae? Sit hoc ultimum bonorum, quod nunc a me defenditur;
3 :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quam tu ponis in verbis, ego positam in re putabam. Disserendi artem nullam habuit. At iam decimum annum in spelunca iacet. Duo Reges: constructio interrete. Quam nemo umquam voluptatem appellavit, appellat; Non quam nostram quidem, inquit Pomponius iocans; Quo modo autem philosophus loquitur? Sic vester sapiens magno aliquo emolumento commotus cicuta, si opus erit, dimicabit.
At iam decimum annum in spelunca iacet. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Hoc loco tenere se Triarius non potuit. Ex rebus enim timiditas, non ex vocabulis nascitur. Quorum altera prosunt, nocent altera. Nam diligi et carum esse iucundum est propterea, quia tutiorem vitam et voluptatem pleniorem efficit.
Recte, inquit, intellegis. Et quod est munus, quod opus sapientiae? Ego vero volo in virtute vim esse quam maximam; Quid enim mihi potest esse optatius quam cum Catone, omnium virtutum auctore, de virtutibus disputare? Videamus igitur sententias eorum, tum ad verba redeamus.
une vidéo locale
et beaucoup d'autres choses, bidules, trucs ....
➠ addclass : ajoute une classe à un sélecteur CSS (body par défaut.) ➠ DEMO
Il est possible : - de cibler un parent du sélecteur CSS - de créer la règle CSS avec l'option 'base-css=.foo[color:red]' syntaxe {up addclass=nom_classe} Utilisation : changer l'image de fond à partir d'un article
➠ addcsshead : ajoute du code ou fichier CSS dans le head. ➠ DEMO
sans risque de nettoyage par un éditeur WYSIWYG syntaxe 1 {up addCssHead=.foo[color:red]} Attention: mettre des [ ] au lieu de {} syntaxe 2 {up addCssHead=chemin_fichier_css} Utilisation : charger un fichier CSS spécifique à une page
addcsshead: code CSS. ATTENTION [ ] à la place des {}
➠ addscript : ajoute du code ou un fichier JS ou JQuery ➠ DEMO
Par défaut, le code est ajouté dans le head. Si le paramètrre principal est body, le code est inséré à la position du shortcode syntaxe {up addScript=body | jquery }code ou fichier{/up addScript}
offset: en px, hauteur pour déclenchement par rapport au bas de l'écran.
anchor-placement: déclenche l'effet lorsque le scrolling de l'élément arrive à certaines positions
repeat: applique l'effet à tous les tags. Ex: h2,h3
style: style inline appliqué au bloc
class: classe(s) appliquée(s) au bloc
css-before: style de l'élément avant l'animation
css-after: style de l'élément après l'animation
➠ article_category : liste des articles d'une ou plusieurs catégories ➠ DEMO
syntaxe : {up article_category=id_catégorie(s)} Une action très pratique pour lister les articles de la catégorie en cours, il suffit de taper {up article-category}
poster: fichier image affiché avant chargement vidéo
mobile: image ou css si un appareil mobile est détecté
bg-selector = body: bloc portant le slideshow
bg-position = 50% 50%: 50% 50% = position poster et video
bg-ratio = 16/9: proportion de la video
bg-overlay: calque superposé à l'image de fond (png, opacité, RGBA, CSS)
bg-color: couleur de fond sous la vidéo lors chargement
page-selector: bloc sur contenu
page-overlay: background de page-selector (png, opacité, RGBA, CSS)
center: style et classe pour centrage vertical du contenu entre shortcodes
style: classes et style inline pour bloc créé
class: classes pour bloc créé (deprecated)
base-css: règles CSS définies par le webmaster (ajout dans le head)
➠ box : affiche un titre et du texte dans une boite ➠ DEMO
Cette action n'est pas finalisée et devrait etre rémaniée en profondeur ! syntaxe: {up box=titre}contenu HTML{/up box}
author LOMART update 2017-07-15 version v1.0 licenseGNU/GPLv3
box: titre de la box
model: [danger, info] classe prédéfinie
box-class: class user
box-style: style inline
title-class: class user pour titre
title-style: style inline pour titre
content-class: class user pour contenu
content-style: style inline pour contenu
css-head: style CSS inséré dans le HEAD
➠ cell : affiche de 1 à 6 blocs enfants sur une même ligne ➠ DEMO
syntaxe 1 : {up cell=x1-x2}contenu avec 2 blocs enfants{/up cell} syntaxe 2 : {up cell=x1-x2}contenu cell-1 {====} contenu cell-2{/up cell} x1-x2 sont les largeurs sur la base d'une grille de 12 colonnes exemple cell=6-6 pour 2 colonnes égales. On utilise les largeurs de la classe UP-width
position = top-left: angle sous la forme top-left ou tl
width (l,largeur,w) = 100px: coté du carré
height (h,hauteur) = 100px: coté du carré
angle = 45: angle en valeur absolue
filter: chaine de conditions. Voir documentation filter
datemax: vrai jusqu'à cette date AAAAMMJJHHMM
datemin: vrai à partir de cette date AAAAMMJJHHMM
shadow = 0: ajoute une ombre 'orientée' au corner. La valeur indiquée est la force de l'ombre
color = white: couleur du texte
bgcolor = red: couleur de fond du coin
class: classes pour le coin
style: style CSS pour le coin
url: lien
target = _blank: ou _self pour ouvrir le site dans le même onglet
bloc-class: classe(s) pour bloc
bloc-style: style inline pour bloc
base-css: règles CSS définies par le webmaster (ajout dans le head)
➠ countdown : affiche un compte à rebours ou une horloge digitale ➠ DEMO
syntaxe: {up countdown=201801010000} // délai jusqu'à une date {up countdown=120} // compte à rebours en secondes {up countdown} // affiche une horloge
fontFamily = Verdana, sans-serif: Police pour chiffres
fontSize = 28: Taille police en pixels pour chiffres
lang = en: Défini automatiquement par UP
seconds = 0: Temps initial en secondes pour le compte à rebours
start = true: démarrer automatiquement la minuterie
theme = white: black ou blue
timeTo: date, nb secondes ou vide pour horloge
➠ csv2def : Conversion d'un contenu au format CSV en liste de définition (DL/DT/DD) ➠ DEMO
1/ {up csv2def=emplacement-fichier} // le contenu est lu dans un fichier 2/ {up csv2def} [=item=]definition [=item1; "item;2"; ...=] definition1 {===} definition 2 {/up csv2def}
HTML = b,a,span,strong,i,em,u,mark,small,img,code: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (strip_tags)
model = stack: nom de la classe modele dans le fichier csv2list.css
leaders = 0: points de conduite
leaders-color: couleur points de conduite
class: classe(s) pour la balise UL
style: style inline pour la balise UL
col-style-*: style inline pour les nièmes balise SPAN
list-style: code hexadecimal et couleur du caractère (bb,red ou 26BD,#F00)
bgcolor: couleur de fond. #FFF par defaut
header = 0: 0: pas de titre, 1: premiere ligne contenu, titre colonne
header-class: classe(s) pour la première balise LI si titre
header-style: style pour la première balise LI si titre
header-bgcolor: couleur de fond du titre
footer = 0: 0: pas de pied, 1: derniere ligne contenu, pied colonne
footer-class: classe(s) pour la dernière balise LI si pied
footer-style: style pour la dernière balise LI si pied
footer-bgcolor: couleur de fond de la dernière ligne
base-css: règles CSS définies par le webmaster (ajout dans le head)
➠ csv2table : Conversion d'un contenu au format CSV en table ➠ DEMO
1/ le contenu est lu dans un fichier {up csv2table=emplacement-fichier} 2/ le contenu est saisi entre les shortcodes {up csv2table} article 1;5€ "article 2";25€ {/up csv2table}
title-tag = h4: pour utiliser une autre balise pour les titres
title-class: classe pour le titre (onglet)
title-style: style inline pour le titre
title-icon: TODO
content-class: classe pour le contenu
content-style: style inline pour le contenu
➠ file : Force le téléchargement d'un fichier ➠ DEMO
Propose un lien sur un fichier. Le fichier peut etre affiché (si prise en charge par navigateur client) ou le téléchargement peut-etre forcé avec changement de nom optionnel Une icône représentative est affichée devant le lien syntaxe {up file=nomfichier.ext | download | icon |target } texte du lien {/up file}
author LOMART date 2017-12-04 version 1.0 licenseGNU/GPLv3
file: chemin et nom du fichier à télécharger
download: vide ou nom du fichier récupéré par le client
icon = 32: chemin et nom de l'icone devant le lien ou taille de l'icone selon extension du fichier (16 ou 32)
target: argument ou _blank si option sans argument
rel: nofollow, noreferrer, ...
class: classe(s) pour la balise a
style: style inline pour la balise a
➠ file_view : Force le chargement d'un fichier pour l'afficher en brut ➠ DEMO
syntaxe {up file-view=chemin fichier} Utilisation : - charger du contenu récurrent à plusieurs pages - voir un fichier CSV - voir le code HTML
HTML = 0: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (ex: img,a)
EOL = 0: forcer un retour à la ligne
block (bloc) = div: balise principale
class: classe(s) pour bloc
style: style inline pour bloc
base-css: règles CSS définies par le webmaster (ajout dans le head)
➠ filter : affiche du contenu si toutes les conditions sont remplies ➠ DEMO
Reprise du plugin LM-Filter de Lomart {up filter | datemax=20171225} contenu si vrai {====} contenu si faux {/up filter} Le contenu si faux est optionnel. Il doit être après le contenu si vrai et séparé par {===} (au minima 3 signes égal) {up filter | admin} contenu si vrai {====} contenu si faux {/up filter} --> affiche si admin connecté. admin=0 affiche si admin NON connecté
period: vrai entre ces dates AAAAMMJJHHMM-AAAAMMJJHHMM
day: liste des jours autorisés. 1=lundi, 7=dimanche
month: liste des mois autorisés. 1=janvier, ...
hmax: vrai jusqu'à cette heure HHMM
hmin: vrai à partir de cette heure HHMM
hperiod: vrai entre ces heures HHMM-HHMM
guest: vrai si utilisateur invité
admin: vrai si admin connecté
user: liste des userid autorisé. ex: 700,790
username: liste des username autorisé. ex: admin,lomart
group: liste des usergroup autorisé. ex: 8,12
lang: liste des langages autorisé. ex: fr,ca
mobile: vrai si affiché sur un mobile
homepage: vrai si affiché sur la page d'accueil
➠ flexauto : une grille responsive sur plusieurs colonnes ➠ DEMO
syntaxe : {up flexauto=x}contenu{/up flexauto} x=1 à 6 est le nombre de colonnes sur grand écran.
author Lomart version 1.0 - juillet 2017 licenseGNU/GPLv3
flexauto = 3: nombre de colonnes sur grand écran
tablet = 2: nombre de colonnes sur moyen écran
mobile = 1: nombre de colonnes sur petit écran
class: classe(s) ajoutée(s) au bloc parent
style: style inline ajouté au bloc parent
➠ flexbox : affiche des blocs enfants dans une grille FLEXBOX responsive ➠ DEMO
syntaxe 1 : {up flexbox=x1-x2}contenu avec plusieurs blocs enfants{/up flexbox} syntaxe 2 : {up flexbox=x1-x2}contenu bloc-1 {====} contenu bloc-2{/up flexbox} x1-x2 sont les largeurs relatives des colonnes exemple : col=4-8 ou col=33-66 pour 2 colonnes (équivalent: span4 et span8)
author LOMART version 1.0 (17/08/17) licenseGNU/GPLv3
googlefont: nom police
size: ajout font-size et line-height
family: famille de substitution (cursive, fantasy)
className: nom de la classe pour utiliser la police
css-head: complément de css: color, font-size, ....
➠ html : permet de créer une entité HTML (balise) avec classe(s), style et attribut sans passer en mode code ➠ DEMO
exemples : {up html=div | class=foo | id=x123}contenu{/up html} --> < div id="x123" class="foo">contenu< /div> {up html=img | class=foo | src=images/img.jpg} --> < img class="foo" src="/images/img.jpg" > note: toutes les options sont considérées comme des attributs de la balise
➠ image_gallery : Affiche une ou plusieurs images dans une lightbox ➠ DEMO
avec adaptation de la taille image au device et legendes syntaxe 1 {up image-gallery=chemin_image | alt=texte} syntaxe 2 {up image-gallery=chemin_dossier} syntaxe 3 {up image-gallery}contenu avec des images{/up image-gallery}
➠ imagemap : une image clicable et responsive ➠ DEMO
syntaxe {up imagemap=chemin_image} < area target="" alt="" title="" href="/" coords="" shape="">; < area target="" alt="" title="" href="/" coords="" shape="">; {/up imagemap} utiliser un générateur en ligne pour définir les zones : www.image-map.net
. Syntaxe : {up lorem=liste des arguments ci-dessous } - (integer) - Nombre de paragraphe (P) généré. 4 par défaut - short, medium, medium, verylong - La longueur moyenne d'un paragraphe. - decorate - ajoute bold, italic, ... - link - ajoute des liens. - ul - ajoute listes. - ol - ajoute listes ordonnées. - dl - ajoute listes description. - bq - ajoute bloc citation - code - ajoute des exemples de code. - headers - ajoute des titre hx. - allcaps - TOUT EN MAJUSCULES. - prude - version prude. - plaintext - Retourne text sans balise HTML. exemple appel : https://loripsum.net/api/2/code/decorate . Pour avoir un texte sans aucun tag, utilisez : {up lorem=2,plaintext | tag=0}. Même sans balise P, le nombre de paragraphes influe sur la longueur du texte retourné.
author Lomart version 1.0 - 07/2017 licenseGNU/GPLv3
lorem: nombre de paragraphe
class: classe(s) pour bloc (sans effet, si tag=0)
style: style inline pour bloc (sans effet, si tag=0)
tag = div: (v1.6) tag du bloc contenant le texte en retour ou tag=0 pour aucun.
max-char: nombre maxima de caractères
max-word: nombre maxima de mots
➠ lorem_placeimg : affiche une image aleatoire ➠ DEMO
Syntaxe : {up lorempixel=type | width=xx | height=xx } --> type = abstract, animals, business, cats, city, food, nightlife, fashion, people nature, sports, technics, transport . Note : width & height sont les dimensions de l'image retournée par lorempixel. Pour l'afficher en remplissant le bloc parent, il faut ajouter style=width:100%
height (h,hauteur) = 100px: hauteur defaut pour scroll vetical
model = base: style CSS dans .upmq-*style*. aucun=none
out-class: classe(s) pour div out
out-style: style inline pour div out
msg-class: classe(s) pour div msg
msg-style: style inline pour div msg
lbl-class: classe(s) pour div label
lbl-style: style inline pour div label
lbl-pos: position label : left, right, up, down, none
lbl-nowrap = false: true = label sur une ligne
direction = left: right, up, down
loop = -1: nombre d'affichage, -1 : infini
scrolldelay = 0: delai en millisecondes
scrollamount = 50: vitesse
circular = true: mode carousel. si contenu plus large que .str_wrap
drag = true: deplacement msg avec souris
runshort = true: scroll si texte court (visible sans scroll)
hoverstop = true: pause lors survol
inverthover = false: scroll uniquement lors survol
➠ media_plyr (vimeo,audio,video) : affiche un lecteur video ou audio qui s'inscrit au maxima dans son bloc parent ➠ DEMO
{up media_plyr=yt | code=bTqVqk7FSmY } {up media_plyr=vimeo | code=bTqVqk7FSmY } media_plyr : precisez yt ou youtube ou vimeo code : il s'agit du code figurant dans l'URL de la vidéo. . {up media_plyr=video | poster=url image | mp4 | webm | vtt | download } media_plyr : video pour indiquer l'URL vers la video. poster : nom de l'image fixe mp4, webm, vtt, download : si URL non spécifiée, elle sera déduite de celle pour 'poster' . {up media_plyr=audio | mp3=url fichier mp3 | ogg} media_plyr : audio mp3 : url vers fichier MP3 (obligatoire) ogg : si URL non spécifiée, elle sera déduite de celle pour 'MP3' .
author DANEEL & LOMART version v1.0 du 30-09-2017 licenseGNU/GPLv3
media_plyr (vimeo,audio,video): type de lecture : youtube, vimeo, video ou audio
code: code de la video (à la fin de l'url youtube ou vimeo)
poster: URL de l'image (obligatoire)
mp4: URL du fichier MP4. Si vide, on utilise le nom de poster
webm: URL du fichier WEBM. Si vide, on utilise le nom de poster
vtt: URL du fichier VTT pour sous-titrage. Si vide, on utilise le nom de poster
download: URL du fichier téléchargeable. Si vide, on utilise le nom du fichier MP4
mp3: URL du fichier audio mp3. (obligatoire)
ogg: URL du fichier audio ogg. Si vide, on utilise le nom du fichier MP3
class: classe(s) ajoutée(s) au bloc extérieur
style: style inline ajouté au bloc extérieur
➠ media_youtube (youtube) : affiche une video Youtube qui s'inscrit au maxima dans son bloc parent ➠ DEMO
{up media-youtube=ID} ID : il s'agit du code figurant à la fin de l'URL de la vidéo.
author LOMART version v1.0 du 01-07-2017 licenseGNU/GPLv3
media_youtube (youtube): code de la video (à la fin de l'url youtube)
width (l,largeur,w): largeur de la video en px ou %
class: classe pour bloc externe
style: code css libre pour bloc externe
➠ meteo_france : affiche le widget de Météo France ➠ DEMO
orientation = v: bloc horizontal (H) ou vertical (V)
block (bloc) = p: balise HTML autour du module météo
class: classe(s) pour bloc parent
style: style inline pour bloc parent
➠ modal : Affiche du contenu dans une fenetre modale (popup) ➠ DEMO
les types autorises sont : inline, iframe, image, video, ajax syntaxe 1 : {up modal=contenu popup | label=texte du lien} syntaxe 2 : {up modal=vide,'html','images' ou contenu | label=texte lien}contenu{/up popup} si vide ou 'html' : le contenu du popup est le code entre les shortcodes si 'img' : chaque image du code entre les shortcodes sera un popup sinon on analyse la valeur du paramètre pour determiner son type - video vimeo, youtube ou dailymotion {up popup=//youtu.be/H9fa9aWFbLM} - image unique si {up popup=images/xx.jpg} ou png, ... - bloc inline si id de bloc {up popup=#bloc} - iframe si url {up popup=//lomart.fr} ou {up popup=doc/xx.pdf} ou {up popup=?index/...} on peut forcer le type par type=inline, iframe, image, video, ajax
author LOMART version 1.0 licenseGNU/GPLv3credit https://www.jqueryscript.net/lightbox/Lightbox-Popup-Plugin-Flashy.html
modal: contenu ou type de contenu
type: pour forcer le type : inline, iframe, image, video, ajax
class: classe(s) pour bloc label
style: style inline pour bloc label
label: texte du lien pour afficher le popup
close-left = 0: croix de fermeture en haut à gauche. haut-droite par défaut
base-css: règles CSS definies par le webmaster (ajout dans le head)
base-js-params: règles JS definies par le webmaster (ajout dans init JS)
overlayClose = 0: 1 pour fermer la fenêtre modale en cliquant sur la zone grisée autour du contenu
videoAutoPlay = 0: 1 pour demarrer la video a l'ouverture du popup
gallery = 1: 0 pour traiter les images individuellement
title (titre) = 1: afficher le titre
width (l,largeur,w): largeur avec unite. Ex: 80%, 500px, ...
height (h,hauteur): hauteur avec unite. Ex: 80%, 500px, ...
author Lomart version 1.0 - 07/2017 licenseGNU/GPLv3credit script de Matt
readmore: idem textmore
textmore = lire la suite: texte bouton
textless = replier: texte bouton
class = uprm-btn: classe(s) pour les boutons. remplace la classe par défaut.
style: style inline pour les boutons
➠ sameheight : égalise la hauteur des enfants directs du bloc (p ou div) ➠ DEMO
syntaxe: {up sameheight} < div>...< /div> < div>...< /div> {/up sameheight} note: gestion de la largeur avec l'option "css-head" qui ajoute du code css dans le head exemple: css-head=.sameheight[float:left;width:30%;] Attention: remplacer les {} par []
author Lomart version 1.0 - 07/2017 licenseGNU/GPLv3credit un vieux script de mes archives
sameheight: inutilisé
class:
style:
css-head: code css libre dans le head. attention: ] au lieu de }
➠ slider_owl : bandeau défilant d'images ou de blocs HTML ➠ DEMO
paginationNumbers = 0: Affiche numéros à l'intérieur des boutons de pagination
goToFirst = 1: Retour sur premier élément si lecture automatique à la fin
goToFirstSpeed = 1000: vitesse de l'option goToFirst en millisecondes
navigation = false: Affichage boutons "next" et "prev"
navigationText = ["prev", "next"]: boutons sans texte: "navigationText: false"
responsive = true:
items = 1: Nombre maxi d'éléments affichés en meme temps sur la plus grande largeur de navigateur
itemsDesktop = [1199, 4]: Cela vous permet de prédéfinir le nombre de diapositives visibles avec une largeur de navigateur particulière. Le format est [x, y] où x = largeur du navigateur et y = nombre de diapositives affichées. Par exemple, [1199,4] signifie que si (window <= 1199) {affiche 4 diapositives par page} Vous pouvez également utiliser "itemsDesktop: false" pour ignorer ces paramètres. Pour bien comprendre comment cela fonctionne, consultez ma démo personnalisée
itemsDesktopSmall = [979, 3]: voir ci-dessus
itemsTablet = [768, 2]: voir ci-dessus
itemsMobile = [479, 1]: voir ci-dessus
➠ slideshow_billboard : Slideshow responsive d'images avec légendes et liens ➠ DEMO
syntaxe 1: {up slideshow_billboard=chemin_sous_dossier} syntaxe 2: {up slideshow_billboard} < img src="/images/img.jpg" alt="légende"> // image avec légende dans alt < a href="#">< img src="/img.jpg">< /a> // image avec lien {/up slideshow_billboard}
title-tag = h4: balise utilisée pour les titres onglets
style: classe(s) et style(s) bloc principal
title-style: classe(s) et style inline onglets
content-style: classe(s) et style inline contenu
class: classe(s) bloc principal (obsolète)
title-class: classe(s) onglets (obsolète)
content-class: classe(s) contenu (obsolète)
plugin_type: accordion
side: left ou right
active_tab: 1 a N
auto: delai en millisecondes pour changement automatique d'onglet
➠ table_by_columns (table-par-colonnes) : tables responsives par empilement des lignes d'une colonne. ➠ DEMO
Syntaxe {up table-par-colonnes} < table> ... < /table> {/up table-par-colonnes} Les lignes sont empilées par colonnes. Très pratique pour des plannings
model = up-stacktable: nom d'un fichier CSS prévu par le webmaster pour toutes les tables de la page
style: style inline pour balise table
class: classe(s) pour balise table (obsolète)
max-height: max-height pour la table
key-width = 35%: pour bloquer le header en haut
title-style: style pour la ligne titre en vue responsive
➠ table_by_rows (table-par-lignes) : tables responsives par empilement des colonnes par lignes. ➠ DEMO
{up table-par-lignes} < table> ... < /table> {/up table-par-lignes} les colonnes sont empilés par lignes avec la possibilité de les déplacer, de les fusionner, de supprimer le titre, d'afficher seulement certaines colonnes. https://github.com/codefog/restables/blob/master/README.md . IMPERATIF : Les titres des colonnes doivent être dans une balise HEAD
author lomart version 1.0 - 07/2017 licenseGNU/GPLv3creditcodefog
table_by_rows (table-par-lignes): rien
breakpoint = 720px: bascule en vue responsive
style: style inline pour balise table
class: classe(s) pour balise table (obsolète)
max-height: max-height pour la table
merge: fusion de colonnes. 1:[2,3],5:[6] = 2&3 avec 1 et 6 avec 5
move: deplacement colonne. 1:0,6:1 = 1 au debut et 6 en 2eme
skip: non visible. [3,5] = col 3 et 5 non visible
span: [2,4] = valeur sans libellé (eq: colspan)
➠ table_fixe : tables responsives: ligne entete reste visible ➠ DEMO
{up table-fixe} < table> ... < /table> {/up table-fixe} col-left : nombre de colonnes toujours visible. Une barre de défilement est ajoutée pour les autres colonnes.
author lomart version 1.0beta - 07/2017 licenseGNU/GPLv3creditlai32290
Inversion colonnes/lignes. les titres de colonnes deviennent la 1ère colonne et reste visibles. Une barre de défilement est ajoutée pour les autres colonnes. {up table-flip} < table> ... < /table> {/up table-flip}
➠ upactionslist : INTERNE - liste des UP actions avec infos et paramétres ➠ DEMO
{up upactionslist} toutes les actions {up upactionslist=action1, action2} une ou plusieurs actions {up upactionslist | md} fichier marknote {up upactionslist | csv} fichier CSV
upactionslist: liste des actions à récupérer. toutes par défaut
make-dico = 0: consolide le fichier principal dico.json avec ceux des actions
style:
class: (obsolète)
demo = 1: afficher le lien vers la demo
csv = 0: enregistre un tableau CSV des actions et options dans plugins/content/up/doc-actions.csv
md = 0: enregistre la documentation au format markdown dans plugins/content/up/doc-actions.md
➠ upscsscompiler : INTERNE - Compile tous les fichiers SCSS dans les dossiers des actions
syntaxe: {up upscsscompiler} toutes les actions {up upscsscompiler=action1, action2} une ou plusieurs actions note: les fichiers SCSS & CSS sont en racine des dossiers actions
