login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Tabs vullen met SQL gegevens

Offline Chilion - 25/11/2008 09:19
Avatar van ChilionMySQL interesse Heren, ik heb een probleempje,

Ik wil een pagina creëren, waarbij elke persoon zijn eigen pagina heeft. Ik wil dat dat tabs worden die vanuit de database hun naam krijgen. De tabs moeten naast elkaar staan, en ik wil op de tab moeten klikken voor dat ik de volgende pagina zie.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
  2. <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
  3. </head>
  4. <body>
  5. <!--Database openen, PHP openen, query -->
  6. <?php 
  7. 	include('dbconfig.php');
  8. 	databaseconnect();
  9. 		 $medewerkerquery 	= 		("SELECT * FROM medewerkers WHERE status='1' ORDER BY naam");	
  10. 		    $resultaatmedewerker 		= 		mysql_query($medewerkerquery);
  11. 			 while ($row = mysql_fetch_array($resultaatmedewerker))
  12. 			{
  13. 		echo	'<div id="TabbedPanels1" class="TabbedPanels">
  14. 			  	<ul class="TabbedPanelsTabGroup">
  15.     			<li class="TabbedPanelsTab" tabindex=0>';  
  16. 		echo $row['naam']; 
  17. 		echo '</li>
  18.     </ul>
  19.   <div class="TabbedPanelsContentGroup">
  20.     <div class="TabbedPanelsContent"> Le Output!</div>    
  21.   </div>
  22.  
  23.  
  24. </div>'; 
  26. <script type="text/javascript">
  27. <!--
  28. var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
  29. //-->
  30. </script> ';
  31. }
  32. ?>


Ik heb nu deze code (hierboven) en het werkt ongeveer, alleen krijg ik de tabs onder elkaar. Hoe doe ik dat?

Chilion

10 antwoorden

Gesponsorde links
Offline Ontani - 25/11/2008 09:23
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 Wat is je css want daar zal het probleem hoogstwaarschijnlijk liggen.
Offline Chilion - 25/11/2008 09:37 (laatste wijziging 25/11/2008 09:45)
Avatar van Chilion MySQL interesse
php code - Bekijk de code zonder highlighting - Klap code in 
  1. @charset "UTF-8";
  2.  
  3. /* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */
  4.  
  5. /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
  6.  
  7. /* Horizontal Tabbed Panels
  8.  *
  9.  * The default style for a TabbedPanels widget places all tab buttons
  10.  * (left aligned) above the content panel.
  11.  */
  12.  
  13. .TabbedPanels {
  14. 	margin: 0px;
  15. 	padding: 0px;
  16. 	float: left;
  17. 	clear: none;
  18. 	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
  19. }
  20.  
  21. .TabbedPanelsTabGroup {
  22. 	margin: 0px;
  23. 	padding: 0px;
  24. }
  25.  
  26. .TabbedPanelsTab {
  27. 	position: relative;
  28. 	top: 1px;
  29. 	float: left;
  30. 	padding: 4px 10px;
  31. 	margin: 0px 1px 0px 0px;
  32. 	font: bold 0.7em sans-serif;
  33. 	background-color: #DDD;
  34. 	list-style: none;
  35. 	border-left: solid 1px #CCC;
  36. 	border-bottom: solid 1px #999;
  37. 	border-top: solid 1px #999;
  38. 	border-right: solid 1px #999;
  39. 	-moz-user-select: none;
  40. 	-khtml-user-select: none;
  41. 	cursor: pointer;
  42. }
  43.  
  44. .TabbedPanelsTabHover {
  45. 	background-color: #CCC;
  46. }
  47.  
  48. .TabbedPanelsTabSelected {
  49. 	background-color: #EEE;
  50. 	border-bottom: 1px solid #EEE;
  51. }
  52.  
  53. .TabbedPanelsTab a {
  54. 	color: black;
  55. 	text-decoration: none;
  56. }
  57.  
  58. .TabbedPanelsContentGroup {
  59. 	clear: both;
  60. 	border-left: solid 1px #CCC;
  61. 	border-bottom: solid 1px #CCC;
  62. 	border-top: solid 1px #999;
  63. 	border-right: solid 1px #999;
  64. 	background-color: #EEE;
  65. }
  66.  
  67. .TabbedPanelsContent {
  68. 	padding: 4px;
  69. }
  70.  
  71. .TabbedPanelsContentVisible {
  72. }
  73.  
  74. .VTabbedPanels .TabbedPanelsTabGroup {
  75. 	float: left;
  76. 	width: 10em;
  77. 	height: 20em;
  78. 	background-color: #EEE;
  79. 	position: relative;
  80. 	border-top: solid 1px #999;
  81. 	border-right: solid 1px #999;
  82. 	border-left: solid 1px #CCC;
  83. 	border-bottom: solid 1px #CCC;
  84. }
  85.  
  86. .VTabbedPanels .TabbedPanelsTab {
  87. 	float: none;
  88. 	margin: 0px;
  89. 	border-top: none;
  90. 	border-left: none;
  91. 	border-right: none;
  92. }
  93.  
  94. .VTabbedPanels .TabbedPanelsTabSelected {
  95. 	background-color: #EEE;
  96. 	border-bottom: solid 1px #999;
  97. }
  98.  
  99. .VTabbedPanels .TabbedPanelsContentGroup {
  100. 	clear: none;
  101. 	float: left;
  102. 	padding: 0px;
  103. 	width: 30em;
  104. 	height: 20em;
  105. }
Offline Giant - 25/11/2008 10:09 (laatste wijziging 25/11/2008 10:10)
Avatar van Giant PHP beginner het zit hem in je WHILE loop
je maakt de div aan, maar nadat 1 resultaat ingevuld is, sluit je deze meteen.
als je de div en de ul buiten je while dus ervoor aanmaakt
en erna sluit, zal het hoogstwaarschijnlijk wel werken.

EDIT:
ook de javascript buiten de while loop houden 
Offline Chilion - 25/11/2008 10:28 (laatste wijziging 25/11/2008 10:29)
Avatar van Chilion MySQL interesse Dus zo? Dat is wel leuk, want het werkt. Maar voor 1 medewerker. Ik krijg maar 1 naam, en dus maar 1 tab.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
  2. <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
  3. </head>
  4. <body>
  5. <!--Database openen, PHP openen, query -->
  6. <?php 
  7.     include('dbconfig.php');
  8.     databaseconnect();
  9.          $medewerkerquery     =         ("SELECT * FROM medewerkers WHERE status='1' ORDER BY naam");    
  10.             $resultaatmedewerker         =         mysql_query($medewerkerquery);
  11.              while ($row = mysql_fetch_array($resultaatmedewerker))
  12.             {
  13.         echo    '<div id="TabbedPanels1" class="TabbedPanels">
  14.                   <ul class="TabbedPanelsTabGroup">
  15.                 <li class="TabbedPanelsTab" tabindex=0>';  
  16.         echo $row['naam']; 
  17.         echo '</li>
  18.     </ul>
  19.   <div class="TabbedPanelsContentGroup">
  20.     <div class="TabbedPanelsContent"> Le Output!</div>';    
  21. 	}
  23.   </div>
  24.  
  25.  
  26. </div>'; 
  28. <script type="text/javascript">
  29. <!--
  30. var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
  31. //-->
  32. </script> ';
  33.  
  34. ?>
Offline Giant - 25/11/2008 12:21 (laatste wijziging 25/11/2008 12:22)
Avatar van Giant PHP beginner
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
  2. <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
  3. </head>
  4. <body>
  5. <!--Database openen, PHP openen, query -->
  6. <?php 
  7.     include('dbconfig.php');
  8.     databaseconnect();
  9.          $medewerkerquery     =         ("SELECT * FROM medewerkers WHERE status='1' ORDER BY naam");    
  10.             $resultaatmedewerker         =         mysql_query($medewerkerquery);
  11.  echo    '<div id="TabbedPanels1" class="TabbedPanels">
  12.                   <ul class="TabbedPanelsTabGroup">';
  13.              while ($row = mysql_fetch_array($resultaatmedewerker))
  14.             {
  15.  
  16.                 echo '<li class="TabbedPanelsTab" tabindex=0>';  
  17.         echo $row['naam']; 
  18.         echo '</li>';
  19.     }
  21. </ul>
  22.   <div class="TabbedPanelsContentGroup">
  23.     <div class="TabbedPanelsContent"> Le Output!</div>
  24.   </div>
  25.  
  26.  
  27. </div>'; 
  29. <script type="text/javascript">
  30. <!--
  31. var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
  32. //-->
  33. </script> ';
  34.  
  35. ?>


zo zou die het moeten doen.

EDIT:
ff een typefoutje in de code herstelt
Offline Chilion - 25/11/2008 12:29
Avatar van Chilion MySQL interesse Ja, kijk, dat is wel leuk, maar nu heeft alleen de eerste tab content. En kan ik niet zien welke tab geselecteerd is. Ook zijn de tabs niet meer clickable.
Offline Kr4nKz1n - 25/11/2008 12:58
Avatar van Kr4nKz1n Onbekend Is er ook een demo beschikbaar?

Zien doet geloven 

En waarom Spry? Heb ik ook even mee gewerkt maar jQuery ruled gewoon en anders MooTools ofzo. Maar ieder z'n mening en ding. Vind alleen dat je veel moet toepassen bij Spry.
Offline rredspike1 - 25/11/2008 13:58
Avatar van rredspike1 Lid zalig zijn zij, die niet gezien hebben, maar toch geloven!
Offline Giant - 25/11/2008 16:47 (laatste wijziging 25/11/2008 16:48)
Avatar van Giant PHP beginner @chillion,
je moet die tabindex ook omhoog gooien!

EDIT:
Wat heb ik toch met die typefouten :S
Offline Chilion - 25/11/2008 18:34
Avatar van Chilion MySQL interesse Tsja, tis dreamweaver, daarom is het Spry.
Le sorry 

Ik kan geen voorbeeld geven, het is bedrijfsmatig, en daar ben ik vandaag en morgen niet meer 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.321s