Code JAVASCRIPT : (
dmc_utils.zip,
dmcplugnewsV.js)
A mettre dans la header de votre page (X)HTML (<head></head>)
Exemple de code :
<script src="dmc_utils.js" type="text/javascript"> </script>
<script src="dmcplugnewsV.js" type="text/javascript"> </script> Déclaration des menus défilant :Pour ajouter un nouveau menu vous devez utiliser la méthode
dmcNewsV.dmcNewsVaddNews() dans une balise
script après la déclaration des deux fichiers js.
Cette dernière accepte comme paramètre un objet {}.L'objet accepte un paramètre obligatoire
id qui correspond à
l'id de la liste.
Il accepte aussi des paramètres facultatifs :-
spacer : number qui correspond à l'espace entre chaque article de la news (li) en px; 5px par défaut.
-
width : number qui correspond à la longueur en px du menu défillant, peut être spécifié aussi dans la css
-
height : number qui correspond à la hauteur en px du menu défilant, peut être spécifié aussi dans la css
-
timer : number qui correspond au temps entre chaque déplacement des articles de la news en millième de seconde, 50 millisecondes par défaut.
-
bouge : boolean, true si la hauteur des articles est inférieure à la hauteur du menu, on duplique les articles pour les faires défiler.
false par défaut.
-
btshow : valeur de l'id de l'élément qui va agrandir la hauteur du menu pour afficher l'ensemble des articles.
Exemple de code :
dmcNewsV.dmcNewsVaddNews({id:"dmcNews", timer:100, spacer:20, bouge:true, width:100, height:200, btshow:"parent"});
Code HTML :Le plugin "dmcplugnewsV" se lance automatiquement.Le menu défilant est obligatoirement une liste (OL ou LI):
Exemple de code :
<ul id="dmcNews">
<li>
<span>10/12/207</span>
<p>Ajoute d'un nouveau script</p>
</li>
<li>
<span>11/12/207</span>
<p>
<a href="http://www.aliasdmc.fr" target="_blank">On peut faire des liens
</a>
</p>
</li>
<li>
<img src="images/codesource/bruleur.jpg"/>
</li>
</ul>Si vous avez des images vous devez spécifier une taille.
Code CSS :Vous devez spécifier quatre propriétés pour le
conteneur, les tailles doivent être en pixels (peuvent être spécifier via le javascript), mais je vous conseille de les spécifier.
Exemple de code :
<style type="text/css">
#dmcNews{
list-style:none;
overflow:hidden;
width:150px;
height:100px;
}
</style> Les padding sont supprimés automatiquement pour le conteneur
ol (ou ul).
Les margin sont supprimés automatiquement pour les
li