Attention : Ce tutorial est entierement dedie aux navigateurs DOM - Level 1
Cet article et ce script utilise l'objet DateControl publié précédement. Veuillez lire cet article pour la configuration du DateControl.
DOM permet grace au JavaScript de changer le contenu d'un document deja charge et ceci sans avoir a recharger la page, voici un exemple un peu plus concret :
Cliquez ici pour generer du texte
Cliquez ici pour effacer le texte
Calendrier : Un exemple plus complexe de l'application du DOM, un calendrier sans rechargement. Cette version est entierement "DOMéisée".
Exemple :
DOMCalendar.htm
<html> <head> <title>JSCalendar - DOM - v1.1</title>
GetDomLeft = function ( oNode ) { var oCurrentNode = oNode; var iLeft = 0; while (oCurrentNode.tagName != "BODY") { iLeft += oCurrentNode.offsetLeft; oCurrentNode = oCurrentNode.offsetParent; }; return iLeft; }; GetDomTop = function ( oNode ) { var oCurrentNode = oNode; var iTop = 0; while (oCurrentNode.tagName != "BODY") { iTop += oCurrentNode.offsetTop; oCurrentNode = oCurrentNode.offsetParent; }; return iTop; };
function myInit() {
// On recupere les objets images oImg1 = document.getElementById("iDC1"); oImg2 = document.getElementById("iDC2");
// On instancie l'objet Calendar DCAL = new DOMCalendar();
// On affecte le repertoire image DCAL.SetImgPath("Img/");
// On ajoute des zones Calendar // Name, Form : Nom et formulaire a controler DCAL.AddCalendar("DC1", document.DCForm.input_1); DCAL.AddCalendar("DC2", document.DCForm.input_2);
// On affecte le premier jour de la semaine // 0 : Dimanche -> 6 : Samedi DCAL.SetFirstDayOfWeek("DC1", 1); // On affecte la position par rapport a l'image DCAL.SetPosition("DC1", GetDomLeft(oImg1) + oImg1.offsetWidth + 10, GetDomTop(oImg1) - 10); // On affecte les SelectList DCAL.HideSelectList("DC1", document.DCForm.tSelect_1); DCAL.HideSelectList("DC1", document.DCForm.tSelect_2);
// On affecte le language FR / EN DCAL.SetLanguage("DC2", "EN"); // On affecte le DateFormat // Voir DateControl pour explications DCAL.SetDateFormat("DC2", "mm/dd/yyyy"); // On affecte le premier jour de la semaine // 0 : Dimanche -> 6 : Samedi DCAL.SetFirstDayOfWeek("DC2", 6); // On affecte la position DCAL.SetPosition("DC2", GetDomLeft(oImg2) + oImg2.offsetWidth + 10, GetDomTop(oImg2) - 10); // On affecte les SelectList DCAL.HideSelectList("DC2", document.DCForm.tSelect_2);
La suite des cours sur DOM et MSHTML suivera tres prochainement, ce script etant juste une petite mise en bouche vous permettant d'evaluer les nouvelles possibilites de ce type de developpements ...
En attendant des cours plus complet sur l'utilisation du MSHTML-DOM, amusez vous bien avec le calendrier ...
Boutique |
Sites |
Bar |
Forum |
PhpBB |
Actu |
Glossaire |
Codes |
Tips |
Liens |
Livres |
Lettre
