Calendrier : Création d'un onglet par jour [Résolu]

Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
- - Dernière réponse : EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
- 2 avril 2014 à 13:11
Bonjour,
Se poste complète le post "Calendrier : Toujours visible sur la page" pour n'avoir qu'une question par poste.

Voici une idée de interface souhaiter :

/-------------------------------------------------------------------------------
/
/ !MONTH! !YEAR! !WORKER! ! Name worker!^!
/
/ ! < Month> ! < Year > !______
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/
/_____________________________________________________________
/ !Onglet 1!!Onglet 2!!Onglet N!________________
/ !
/ !
/ !
/ !
/ !
/ !
/ !
/ !______________________________________________________!
/
/_____________________________________________________________
/-------------------------------------------------------------------------------

Ma question :

Comment je peut faire pour créer un onglet par jour sélectionner?
Il faut:
1- Que je reste sur la même page.
2- Que lorsque je passe d'un onglet à l'autre il n'y est pas de perte (pas de reset des écrit)

Merci
Afficher la suite 

9 réponses

Meilleure réponse
Messages postés
26757
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 novembre 2019
317
1
Merci
Jquery.. tu l'utilises déjà. ( regardes les script de calendrier que tu utilises... c'en est. )
.Jquery n'est rien d'autre qu'une bibliothèque de fonctions javascript... qui permet de "simplifier" la réalisation de scripts, de manipulation des éléments HTML de tes pages.. etc..

... Maintenant... être plus précis.. ok... mais sur quoi ?
j'ai répondu OUI à ta question :
Une petite question serait-il possible d'avoir se système de fonctionnement:

Pour essayer de détailler un peu (sans pour autant te donner le code tout fait...) :
1- Init : Juste l'entête (calendrier et combobox)
ça;. tu sais le faire. c'est ta question concernant la mise en place de calendriers "fixes".

2- Lors d'un clic sur une date création de la partit basse avec la date sélectionner
Ca... c'est dans le lien que je t'ai donné
http://www.hongkiat.com/blog/jquery-insert-element-part1/
TU peux aussi regarder ces liens : en pur javascript
CREATELEMENT .. en [jquery http://api.jquery.com/add/ ADD]

3- Si on sélectionne une autre date création d'une autre partie basse qui va masquer la précédente ainsi de suite .
Là.. il faut que tu interceptes le click sur une date de ton calendrier.
Pour afficher/masquer des élements ( comme des DIV par exemple) tu peux : soit en pure Javascript utiliser la propriété du CSS : DISPLAY
Ou les méthodes Jquery : .hide() / .show()

4- Si on revient sur une date précédaient sélectionner la partie basse de celle-ci réparer sans avoir perdu d'information.
Tant que tu ne recharge pas ta page.. que tu ne vas pas dans une autre page... tous les éléments créés/modifiés/ renseignés de ta page actuelle ne s'effacent pas.
Vu que tu créés tes onglets au fur et à mesure et qu'ensuite tu ne fais que les afficher/masquer.. les données restent présentes.


Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 218 internautes nous ont dit merci ce mois-ci

Commenter la réponse de jordane45
Messages postés
26757
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 novembre 2019
317
1
Merci
Mets le contenu de <script type... >... </script> A la fin de ta page.
Après le contenu html.

<html>
<head>
<title> TEST </title>
<script  src="jquery-2.1.0.js"></script>
</head>
<body>
 <div name="mesDiv" id='test1'>Blablabla</div>
<div name="mesDiv" id='test2'>
    <input type="text" id="monInput" value="A modifier.."></input>
</div>
<div name="mesDiv" id='test3'>
    <input type="button" id="monBouton" value="Auto-destruction"></input>
</div>
<div name="titi" id="toto">
    <p> <a href="#test1" name="liens"> DIV 1 </a></p>
    <p> <a href="#test2" name="liens"> DIV 2 </a></p>
    <p> <a href="#test3" name="liens"> DIV 3 </a></p>
    <p> <a href="#ALL" name="ALL"> Afficher TOUT </a></p> 
</div>

 <script type="text/javascript">
$("a[name='liens']").click(function(){
    var target=$(this).attr('href');
    $("div[name='mesDiv']").hide();
    $(target).show();
    
  });

$("a[name='ALL']").click(function(){
    $("div[name='mesDiv']").show();
  });
  

 </script>
</body>
</html>

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 218 internautes nous ont dit merci ce mois-ci

EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
-
Merci sa marche maintenant.
Je vais pouvoir faire des essai pour mon interface
jordane45
Messages postés
26757
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 novembre 2019
317 -
N'oublies pas de marquer la discussion en RESOLU ( lien se trouvant sous le titre de ta question.. tout en haut de la discussion).
Commenter la réponse de jordane45
Messages postés
26757
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 novembre 2019
317
0
Merci
Bonjour,
via javascript (ou encore mieux à l'aide de Jquery) tu peux manipuler le DOM.
Tu peux donc créer des éléments (HTML) dynamiquement dans ta page.
voir : http://www.hongkiat.com/blog/jquery-insert-element-part1/


En gros (par exemple) :
- Lors du clic sur une date :
- Tu ajoutes un DIV (ce sera le conteneur de ton onglet) à l'emplacement de ton choix.
Ce DIV tu le Masques...
- Dans ce DIV tu ajoutes les différents éléments comme les INPUT..le texte..etc...
- Tu ajoutes un lien "Onglet X" qui, lorsque tu cliqueras dessus masqueras les autres DIV (ceux de chaque date) et affichera celui correspondant.




Commenter la réponse de jordane45
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
0
Merci
Merci je vais regarder de se coter.

Une petite question serait-il possible d'avoir se système de fonctionnement:
1- Init : Juste l'entête (calendrier et combobox)
2- Lors d'un clic sur une date création de la partit basse avec la date sélectionner
3- Si on sélectionne une autre date création d'une autre partie basse qui va masquer la précédente ainsi de suite .
4- Si on revient sur une date précédaient sélectionner la partie basse de celle-ci réparer sans avoir perdu d'information.

Voila,qu'es que vous en penser? Si c'est possible je pense que cela rendrait l'interface plus facile a utiliser et limiterai certaine erreur.

Merci et que le café soit avec vous.
jordane45
Messages postés
26757
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 novembre 2019
317 -
Oui.
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
-
S'il te plait pourrait tu être plus claire.
(Car je fais du HTML, PHP, JavaScript que depuis 2 semaine et avant se matin je ne savait pas pas que le JQuery existé.)
Merci de ta compréhension.
Commenter la réponse de EnguerrandP
Messages postés
26757
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 novembre 2019
317
0
Merci
Voici un petit exemple qui illustre comment / Afficher / Masquer tes éléments sur ta page:

le HTML:
<div name="mesDiv" id='test1'>Blablabla</div>
<div name="mesDiv" id='test2'>
    <input type="text" id="monInput" value="A modifier.."></input>
</div>
<div name="titi" id="toto">
    <p> <a href="#test1" name="liens" > DIV 1 </a></p>
   <p> <a href="#test2" name="liens"> DIV 2 </a></p>
    <p> <a href="#ALL" name="ALL"> Afficher TOUT </a></p> 
</div>


Le javascript (avec Jquery)
$("a[name='liens']").click(function(){
    var target=$(this).attr('href');
    $("div[name='mesDiv']").hide();
    $(target).show();
    
  });

$("a[name='ALL']").click(function(){
    $("div[name='mesDiv']").show();
  });



Tu peux aller voir ce que ça donne ICI : http://jsfiddle.net/DSLX9/10/
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
-
Bonjour,
Après quelque, quand je lance l'exemple via Wamp il ne fait rien.
Par contre cela marche avec le lien que tu a donner.
Es ce que c'est normal ?
jordane45
Messages postés
26757
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 novembre 2019
317 -
Tu as inclus les librairies JQUERY à ta page ?
Commenter la réponse de jordane45
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
0
Merci
Merci beaucoup, pour ta patient et avoir pris le temps de détail ta réponse cela m'aide énormément pour la compréhension de ses nouvelle connaissance.
Commenter la réponse de EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
0
Merci
Je les placer comme cela :
<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<body> 

<script>
$("a[name='liens']").click(function(){
    var target=$(this).attr('href');
    $("div[name='mesDiv']").hide();
    $(target).show();
    
  });

$("a[name='ALL']").click(function(){
    $("div[name='mesDiv']").show();
  });
 </script>


<div name="mesDiv" id='test1'>Blablabla</div>
<div name="mesDiv" id='test2'>
    <input type="text" id="monInput" value="A modifier.."></input>
</div>
<div name="titi" id="toto">
    <p> <a href="#test1" name="liens" > DIV 1 </a></p>
   <p> <a href="#test2" name="liens"> DIV 2 </a></p>
    <p> <a href="#ALL" name="ALL"> Afficher TOUT </a></p> 
</div>
</body>
jordane45
Messages postés
26757
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 novembre 2019
317 -
Il est préférable de telecharger les bibliothèques Jquery et de les inclures dans l'arborescence de ton site plutot que d'utiliser directement ceux hébergés par google...

Pense également pour les balises script à leur spécifier le TYPE... ça évite des soucis.

<script type="text/javascript">
$("a[name='liens']").click(function(){
    var target=$(this).attr('href');
    $("div[name='mesDiv']").hide();
    $(target).show();
    
  });

$("a[name='ALL']").click(function(){
    $("div[name='mesDiv']").show();
  });
</script>

EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
-
Merci pour les conseil.
Je vais tout de suite télécharger c'est bibliothèques
Et rajouter le type a mes scripts.
Commenter la réponse de EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
0
Merci
J'ai crée un fichier .js avec le contenue de se lien :
http://code.jquery.com/jquery-2.1.0.js

puis je les mis de cette façon dans le programme :
<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<script type="text/javascript" src="jquery.js"></script>
</head>

<body> 

<script type="text/javascript">
$("a[name='liens']").click(function(){
    var target=$(this).attr('href');
    $("div[name='mesDiv']").hide();
    $(target).show();
    
  });

$("a[name='ALL']").click(function(){
    $("div[name='mesDiv']").show();
  });
 </script>


<div name="mesDiv" id='test1'>Blablabla</div>
<div name="mesDiv" id='test2'>
    <input type="text" id="monInput" value="A modifier.."></input>
</div>
<div name="mesDiv" id='test3'>
    <input type="button" id="monBouton" value="Auto-destruction"></input>
</div>
<div name="titi" id="toto">
    <p> <a href="#test1" name="liens"> DIV 1 </a></p>
    <p> <a href="#test2" name="liens"> DIV 2 </a></p>
    <p> <a href="#test3" name="liens"> DIV 3 </a></p>
    <p> <a href="#ALL" name="ALL"> Afficher TOUT </a></p> 
</div>
</body>


Mais cela ne marche toujours pas.
jordane45
Messages postés
26757
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 novembre 2019
317 -
- Ton fichier jquery.js est dans le même répertoire que ta page html ?
- Tu as essayé de l'utiliser depuis FireFox ?
- Sous FireFox, tu as installé le plugin : FireBug et a activé le mode débogage de Script ?
-> Si oui... dans la console... ça ne te marque pas d'erreur ?

Plutot que de copier coller le contenu de : http://code.jquery.com/jquery-2.1.0.js dans un fichier jquery.js... ne pourrais tu pas plutot faire : Enregistrer la cible sous... ( pour être sur que tu n'es pas fait d'erreur lors de ta copie...)
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
-
Alors:
Pour le premier point oui je suis dans le même répertoire.
Pour le deuxième j'utilise Firefoxe
Pour le troisième non je n'ai pas installer Firebug et activé le mode débogage de script.
Donc je vais le faire immédiatement.
Et je vais réenregistrer jquerey.js de la façon que tu conseil.
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
-
Voila c'est fait.
Je vient de recharger la page après avoir activer le script et la console
il n'y a aucun message d'erreur.
Commenter la réponse de EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
0
Merci
Bonjour,
Voila j'ai crée 3 élément :
-Partie_Basse_Div_1
-Partie_Basse_Div_2
-Partie_Basse_Div_3
Le switch en eux marche.

Il faut que je trouve maintenant comment :
1-Crée une partie basse lorsque je clic sur un jour du calendrier si celle-ci n'à pas encore était crée. Puis rendre celle-ci visible (masquer toute les autres).

2-Si elle à déjà était crée je la rend visible.

Voila le code de se que j'ai fais pour l'instant:

<html>
<html>
<title>Daily_Time_Partie_Basse_Switch</title>
<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
	<script type="text/javascript" src="JS/JS_Add_Line.js" ></script>	
	<script type="text/javascript" src="JS/JS_JQuery_2_1_0.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
	<script type="text/javascript" src="JS/JS_Lanceur.js" ></script>
</head>

<body>

<div id="Top_Worker">
	WORKER :
	<SELECT id="Select_Worker" NAME="SWorker" onChange="saveValue(this)">
		<option value="*****************" selected="selected"></option>
		<option>*****************
	</SELECT>
</div>

<button id="Return" title="Return menu" type="button" onclick="self.location.href='Administrators_Menu.php'">
			<img src="IMAGES/return_menu.jpg">
</button>


<script type="text/javascript">
  $(function() 
  {
   $('#popupDatepicker').datepick();
   
   $('#inlineDatepicker').datepick({onSelect:function(dateText){
      document.getElementById("DATE1").value =dateText;
    }
   });
});
</script>
	
<div id="inlineDatepicker"></div>

<br>


	<div name="titi" id="toto">
   		 <p> <a href="#Partie_Basse_Div_1" name="liens"> DIV 1 </a></p>
   		 <p> <a href="#Partie_Basse_Div_2" name="liens"> DIV 2 </a></p>
   		 <p> <a href="#Partie_Basse_Div_3" name="liens"> DIV 3 </a></p>
   		 <p> <a href="#ALL" name="ALL"> Afficher TOUT </a></p> 
	</div>

<fieldset id="Partie_Basse_Fieldset">
<legend> DAILY TIMETABLE per request</legend>

<div name="MesLignes" id="Partie_Basse_Div_1">
	<table id="Partie_Basse_Table" border="2">
	<tbody>
		<tr align="center"> 
			<td bgcolor="#F0FFFF"></td>	
			<td bgcolor="#F0FFFF">Date</td>
			<td bgcolor="#F0FFFF">Request</td>
			<td bgcolor="#F0FFFF">Time(h)</td>
			<td bgcolor="#F0FFFF">Description</td>
			<td bgcolor="#F0FFFF">Worker</td>
		</tr>		
		<tr align="center" id="Original_Line">
			<td>					
				<input type="button" name="NLine" id=""  size="3" value="New" 
					onclick="cloneEtVide(this.parentNode.parentNode);">
				</input>		
			</td>
			<td>					
				<input type="date" name="date" id=""  size="9" value="" readonly="readonly"></input>		
			</td>
			<td>					
				<SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>
			<td>					
				<input type="text" name="time" id=""  size="5" value=""></input>		
			</td>			
			<td>					
				<textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea>			
			</td>
			<td>					
				<SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>										
		</tr>	
	</tbody>
	</table>
</div>	

<div name="MesLignes" id="Partie_Basse_Div_2">
	<table id="Partie_Basse_Table" border="2">
	<tbody>
		<tr align="center"> 
			<td bgcolor="#F0FFFF"></td>	
			<td bgcolor="#F0FFFF">Date</td>
			<td bgcolor="#F0FFFF">Request</td>
			<td bgcolor="#F0FFFF">Time(h)</td>
			<td bgcolor="#F0FFFF">Description</td>
			<td bgcolor="#F0FFFF">Worker</td>
		</tr>		
		<tr align="center" id="Original_Line">
			<td>					
				<input type="button" name="NLine" id=""  size="3" value="New" 
					onclick="cloneEtVide(this.parentNode.parentNode);">
				</input>		
			</td>
			<td>					
				<input type="date" name="date" id=""  size="9" value="" readonly="readonly"></input>		
			</td>
			<td>					
				<SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>
			<td>					
				<input type="text" name="time" id=""  size="5" value=""></input>		
			</td>			
			<td>					
				<textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea>			
			</td>
			<td>					
				<SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>										
		</tr>	
	</tbody>
	</table>
</div>

<div name="MesLignes" id="Partie_Basse_Div_3">
	<table id="Partie_Basse_Table" border="2">
	<tbody>
		<tr align="center"> 
			<td bgcolor="#F0FFFF"></td>	
			<td bgcolor="#F0FFFF">Date</td>
			<td bgcolor="#F0FFFF">Request</td>
			<td bgcolor="#F0FFFF">Time(h)</td>
			<td bgcolor="#F0FFFF">Description</td>
			<td bgcolor="#F0FFFF">Worker</td>
		</tr>		
		<tr align="center" id="Original_Line">
			<td>					
				<input type="button" name="NLine" id=""  size="3" value="New" 
					onclick="cloneEtVide(this.parentNode.parentNode);">
				</input>		
			</td>
			<td>					
				<input type="date" name="date" id=""  size="9" value="" readonly="readonly"></input>		
			</td>
			<td>					
				<SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>
			<td>					
				<input type="text" name="time" id=""  size="5" value=""></input>		
			</td>			
			<td>					
				<textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea>			
			</td>
			<td>					
				<SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>										
		</tr>	
	</tbody>
	</table>
</div>

</fielset> 

<script type="text/javascript">
$("a[name='liens']").click(function(){
    var target=$(this).attr('href');
    $("div[name='MesLignes']").hide();
    $(target).show();
    
  });

$("a[name='ALL']").click(function(){
    $("div[name='MesLignes']").show();
  });
</script>

</body>
</html>


Ps: Je continue a regarder se que tu ma donner jordane45.

Merci
(Je sais qu'il ne faut résoudre qu'un seul problème par post mais comme j'ai mal jugé de la progression de celui-ci sont intitulé et incorrecte. Et si je re-post un notre topique il sera supprimé pour doublon car la question reste juste : "Comment crée un onglet (partie basse) par Date".Donc veuillez accepter mes excuse pour cette infraction)

Merci et que le café soit avec vous.
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
-
Bonjour,

Je rencontre un problème avec ma fonction de clonage.
Pour pouvoir faire mes onglets si vous avez le temps pouvez vous lire mon autre poste :Tableau : Clonage incohérance de résultat

Merci
Commenter la réponse de EnguerrandP