Designed by Maunakea !
53 en ligne   Boutique | Sites | Bar | Forum | PhpBB | Actu | Glossaire | Codes | Tips | Liens | Livres | Lettre  


 Recherche

 NewsLetter






   

DOM Calendar

Calendrier DOM - 1





Aurelien
Voici comment, grace au DOM, changer dynamiquement le contenu d'une page sans avoir a la recharger ...

[Article cité sur le Flash Microsoft MSDN France]

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>

<script type="text/javascript" src="Js/CLanguage.js"></script>
<script type="text/javascript" src="Js/DateControl.js"></script>
<script type="text/javascript" src="Js/DOMCalendar.js"></script>

<script language="JavaScript">

var DCAL = null;

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);

 DCAL.Init();

};

</script>

</head>

<body onLoad="myInit();">
<form name="DCForm" action="?" method="post">
<input type="text" name="input_1" value="" size="12" maxlength="10">
<a href="javascript:DCAL.Show('DC1');" border="0"><img src="Img/c_b.gif" border="0" id="iDC1"></a>
&nbsp;&nbsp;&nbsp;
<select name="tSelect_1" size="1">
 <option value="1">tOption_1_1
 <option value="2">tOption_1_2
</select>
<br>
<br>
<input type="text" name="input_2" value="" size="12" maxlength="10">
<a href="javascript:DCAL.Show('DC2');" border="0"><img src="Img/c_b.gif" border="0" id="iDC2"></a>
&nbsp;&nbsp;&nbsp;
<select name="tSelect_2" size="1">
 <option value="1">tOption_2_1
 <option value="2">tOption_2_2
</select>
</form>
</body>
</html>


Telecharger la source

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 ...

Pour pouvoir écrire dans ce forum, identifiez-vous !

  v1.3p © ASP-PHP.net 2002  

Aurelien le 12/11/2003 (76 147 hits)
Didier Téléchargez gratuitement et légalement des logiciels Microsoft ! Si, si ;)
  • Visual Studio 2010
  • Office 2010
  • Expression Studio 3
  • SQL Server 2008
  • et d'autres...
Au fil des news  
Magazines - Le N°128 de Programmez est disponible
Magazines - Le N°127 de Programmez est disponible
Dreamweaver CS4 + Php + Mysql - Trucs et Astuces - Part 6
Pour continuer dans le même style, je vous propose une suite au précédent article. Rechercher tous ...
Adobe - Adobe Photoshop.com Mobile pour iPhone 1.1
JavaScript - Ajouter une page dans vos favorites
Dreamweaver CS4 + Php + Mysql - Trucs et Astuces - Part 5 -
Je vous propose cette fois deux astuces. Comment exporter une feuille de style avec l'aide de ...
SharePoint Personalization Site Links - Les liens personnalisés des MySite SharePoint
Nous avons vu dans les articles précédents comment agrémenter les pages de recherche afin de ...
Magazines - Le n°126 de Programmez est disponible
Outils - Traducteur en ligne automatique pour site web
Adobe - Adobe Photoshop.com Mobile pour Iphone
Magazines - Le n°125 de Programmez est disponible
Adobe - Adobe AIR 2 et Flash Player 10.1version bêta
Les conférences autour des technologies Microsoft - Liste non exhaustive des grands évènements
Nous allons essayer de regrouper un grand nombre des évènements autour des technologies Microsoft ...
Magazines - Le n°124 de Programmez est disponible
PHP - Forum PHP 2009
Composants - eFace - XAML en Java
WPF - Désactiver le bouton de réduction d'une fenêtre
Magazines - Le n°123 de Programmez est disponible
Magazines - Le n°122 de Programmez est disponible
Auditer une ferme SharePoint - Assurer le bon fonctionnement de SharePoint
Dans le cadre de la bonne gestion de son environnement SharePoint, il est utile de faire un ...
SQL Server 2008 Report Builder 2.0 - Installation et utilisation de Report Builder 2.0
Dans le cadre de la création de rapports pour SQL Server Reporting Services 2008, un outil est ...
Magazines - Le HS N° 1 de Web Design est disponible
Adobe - Adobe propose en Open Source les frameworks.....
Outils - EntityBuilder
CSharp - Sérialisation XML de vos objets
Magazines - Le n°121 de Programmez est disponible
Adobe - Adobe annonce MAX 2009 !
Outils - WhoIs
[MAJ] Dreamweaver MX + Php + MySql - Les formulaires - partie 3
Mise à jour du code, par DB 77, affichage du code erreur, dans la page erreur.php, traduction des ...
PHP - News avec photo - Système de gestion - affichage
Gestion - Administration - Affichage d'une "News", "Actualité", "Info", ... avec : - mise en forme ...
Outils - Crypt
Dreamweaver Php Mysql - Région répétée imbriquée
Je rebondis, sur un post du forum, pour vous montrer comment obtenir grâce à l'extension Simulated ...
Magazines - Le n° 120 de Programmez est disponible
Gérer les bases de contenu SharePoint - Gérer la croissance du volume des données
Dans le cadre de la gestion quotidienne de ferme SharePoint, il existe une partie qu'il faut ...
PHP - Le Coach PHP sur Visual Studio
.NET - Ecrire une application .NET utilisant MySQL
PHP - Utilisation de PHP dans le monde Microsoft
Magazines - Le n° 119 de Programmez est disponible
Adobe - Adobe annonce Photoshop Marketplace
[MAJ] Tutoriel AJAX simple - En avant vers le WEB2.0
Mis à jour le 20/04/2009
Tutorial : HTML | Scripting | ASP-PHP | ASP.net | SQL Server | XML
Sharepoint | XAML | Pocket | Dreamweaver | VML | Divers
  Scripts : Scripting | ASP-PHP | ASP.net | Divers
  Boutique | Annuaire | Bannières | Météo | Tribune | Partenariats
v3b © Didier 2003   
 

Corpo Sciences de Reims Partitions gratuites Carte, météo, annonces
 TechNet Groupes Utilisateurs Microsoft MVP ASP-magazine DotNet Project