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

Signaler
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
-
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
-
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

9 réponses

Messages postés
28895
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2020
332
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.


Messages postés
28895
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2020
332
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>
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
Messages postés
28895
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2020
332
N'oublies pas de marquer la discussion en RESOLU ( lien se trouvant sous le titre de ta question.. tout en haut de la discussion).
Messages postés
28895
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2020
332
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.




Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015

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.
Messages postés
28895
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2020
332
Oui.
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.
Messages postés
28895
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2020
332
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/
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 ?
Messages postés
28895
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2020
332
Tu as inclus les librairies JQUERY à ta page ?
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015

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.
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015

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>
Messages postés
28895
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2020
332
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>

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.
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015

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.
Messages postés
28895
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2020
332
- 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...)
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.
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.
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015

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