advanced code snippet search

Posted By

MMDeveloper on 11/05/08


Tagged

javascript content prototype tabs Scriptaculous tab


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jamesming
wizard04


Tabbed Content - Simple, prototype

 / Published in: JavaScript
 

This is a simple tabbed content setup with a little CSS supplied for styling and proof of concept. Each "div" inside the "navBar" element has it's own unique ID, and that tab's respective content should have an ID of it's tab's ID plus "_data". For Example:

tab id: generalData tab's content's id: generalData_data

this uses the Prototype/Scriptaculous framework and is required to run.

Expand | Embed | Plain Text 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Add/Edit Job</title>
  6. <script type="text/javascript" src="lib/prototype.js"></script>
  7. <script type="text/javascript" src="lib/scriptaculous.js"></script>
  8. <script type="text/javascript">
  9. <!--
  10. var fordmJobs = {
  11. 		tabContainerID: "navBar",
  12. 		tabs: new Array(),
  13.  
  14. 		initialize: function() {
  15.  
  16. 		},
  17.  
  18. 		createTabs: function() {
  19. 			var classObject = this;
  20. 			this.tabs = $$("#navBar div");
  21. 			this.tabs.each(function(el) {
  22. 				Event.observe($(el), "click", function() {
  23. 					classObject.switchTab(el);
  24. 				});
  25. 			});
  26.  
  27. 			this.switchTab($(this.tabs[0]));
  28.  
  29. 		},
  30.  
  31. 		switchTab: function(tab) {
  32. 			content = $(tab.id + "_data");
  33. 			if (content) {
  34. 				this.tabs.pluck("id").each(function(elid) {
  35. 					$(elid).className = "";
  36. 					$(elid + "_data").hide();
  37. 				});
  38.  
  39. 				tab.className = "activeTab";
  40. 				content.show();
  41. 			} else {}
  42. 		}
  43. 	};
  44.  
  45. document.observe("dom:loaded", function() {
  46. 	fordmJobs.createTabs();
  47. });
  48. -->
  49. </script>
  50. <style type="text/css">
  51. <!--
  52. .header {
  53. 	font-size: 24px;
  54. 	text-align: right;
  55. 	padding-right: 100px;
  56. 	border-bottom-width: 1px;
  57. 	border-bottom-style: dotted;
  58. 	border-bottom-color: #3399CC;
  59. 	color: #3399FF;
  60. 	margin-bottom: 20px;
  61. }
  62. .navBar div {
  63. 	display: inline;
  64. 	margin-right: 5px;
  65. 	margin-left: 5px;
  66. 	background-color: #DEDEDE;
  67. 	padding-right: 3px;
  68. 	padding-left: 3px;
  69. 	border-top-width: 1px;
  70. 	border-right-width: 1px;
  71. 	border-bottom-width: 1px;
  72. 	border-left-width: 1px;
  73. 	border-top-style: solid;
  74. 	border-right-style: solid;
  75. 	border-bottom-style: solid;
  76. 	border-left-style: solid;
  77. 	border-top-color: #666666;
  78. 	border-right-color: #666666;
  79. 	border-bottom-color: #3399CC;
  80. 	border-left-color: #666666;
  81. 	cursor: pointer;
  82. }
  83. .navBar .activeTab {
  84. 	background-color: #BCBCBC;
  85. 	font-weight: bold;
  86. 	border-bottom-width: 1px;
  87. 	border-bottom-style: solid;
  88. 	border-bottom-color: #BCBCBC;
  89. }
  90.  
  91. .navBar {
  92. 	border-bottom-width: 1px;
  93. 	border-bottom-style: solid;
  94. 	border-bottom-color: #3399CC;
  95. 	margin-bottom: 20px;
  96. }
  97.  
  98. .jobEntity .title {
  99. 	font-weight: bold;
  100. 	float: left;
  101. 	width: 100px;
  102. 	text-align: right;
  103. 	margin-right: 20px;
  104. }
  105. .jobEntity .data {
  106.  
  107. }
  108. .jobEntity {
  109. 	margin-left: 50px;
  110. 	display: block;
  111. 	margin-bottom: 15px;
  112. }
  113. .container {
  114. 	margin-right: auto;
  115. 	margin-left: auto;
  116. 	width: 600px;
  117. 	border: 3px double #3399CC;
  118. }
  119. .navBar div:hover {
  120. 	background-color: #CECECE;
  121. 	cursor: pointer;
  122. }
  123.  
  124. -->
  125. </style>
  126. </head>
  127. <body>
  128. <div class="container">
  129.       <div class="header">Create A Job</div>
  130.       <div class="navBar" id="navBar">
  131.             <div id="e0">Required</div>
  132.             <div id="e1">Properties</div>
  133.             <div id="e2">Transformations</div>
  134.       </div>
  135.       <div id="e0_data">Required Fields </div>
  136.       <div id="e1_data">Properties Fields</div>
  137.       <div id="e2_data">Transformation Fields</div>
  138. </div>
  139. </body>
  140. </html>

Report this snippet  

You need to login to post a comment.