Sujet Précédent Sujet Suivant

Calendrier : Création d'un onglet par jour

Résolu
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 - 31 mars 2014 à 15:30
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

9 réponses

Réponse 1 / 9
jordane45 Messages postés 37547 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 juin 2023 341
1 avril 2014 à 13:09
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.


1
Réponse 2 / 9
jordane45 Messages postés 37547 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 juin 2023 341
1 avril 2014 à 16:50
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>
1
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
1 avril 2014 à 18:00
Merci sa marche maintenant.
Je vais pouvoir faire des essai pour mon interface
0
jordane45 Messages postés 37547 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 juin 2023 341
1 avril 2014 à 18:02
N'oublies pas de marquer la discussion en RESOLU ( lien se trouvant sous le titre de ta question.. tout en haut de la discussion).
0
Réponse 3 / 9
jordane45 Messages postés 37547 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 juin 2023 341
1 avril 2014 à 02:49
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.




0
Réponse 4 / 9
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
Modifié par EnguerrandP le 1/04/2014 à 08:47
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.
0
jordane45 Messages postés 37547 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 juin 2023 341
1 avril 2014 à 09:21
Oui.
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
Modifié par EnguerrandP le 1/04/2014 à 12:55
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
jordane45 Messages postés 37547 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 juin 2023 341
1 avril 2014 à 13:47
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/
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
1 avril 2014 à 14:50
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 ?
0
jordane45 Messages postés 37547 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 juin 2023 341
1 avril 2014 à 14:54
Tu as inclus les librairies JQUERY à ta page ?
0
Réponse 6 / 9
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
1 avril 2014 à 14:36
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.
0
Réponse 7 / 9
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
1 avril 2014 à 15:07
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>
0
jordane45 Messages postés 37547 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 juin 2023 341
1 avril 2014 à 15:16
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>
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
1 avril 2014 à 15:22
Merci pour les conseil.
Je vais tout de suite télécharger c'est bibliothèques
Et rajouter le type a mes scripts.
0
Réponse 8 / 9
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
1 avril 2014 à 15:33
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.
0
jordane45 Messages postés 37547 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 juin 2023 341
1 avril 2014 à 15:48
- 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...)
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
1 avril 2014 à 16:12
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.
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
1 avril 2014 à 16:25
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.
0
Réponse 9 / 9
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
Modifié par EnguerrandP le 1/04/2014 à 22:07
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.
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
2 avril 2014 à 13:11
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
0

Discussions similaires

Calendrier Dynamique cliquable
cs_midoxe -
neigedhiver -

6 réponses
Calendrier ou gestion d'évènements
oleronpower -
mohamedbt91 -

6 réponses
Convertir nombre de jours en année, mois et jours
mehdiyou -
Whismeril -

10 réponses
comment configurer le include path ?
bzouli -
bzouli -

2 réponses
calendrier hijri en delphi
soprano75 -
Caribensila -

7 réponses
calendrier reservation dynamique
belkaiednaim -
mathieubond -

3 réponses
Rejoignez-nous