mztab control

Required: Mootools 1.4.4

Version: mztab 1.1

Based on tab control described in Richard York's book: "Ready to use solutions in CSS" (polish: "Gotowe rozwiązania CSS")

Download

Demonstration

Activate tab number (0-2):

Use example

Html code:
 <head>
	...
	<script type="text/javascript" src="/js/mootools-1.4.4.js"></script>

	<link type="text/css" href="/js/mztab/mztab.css" rel="stylesheet" media="screen" />
	<script type="text/javascript" src="/js/mztab/mztab.js"></script>
	...
</head>
<body>
	...
	<div id="tabs"></div>
	...
</body>
Javascript code:
 var form_example_html = '\
	<h3>Sample contact form:</h3>\
	<table class="form-table">\
		<tr>\
			<th class="width150">Imię i nazwisko:</th>
			<td><input type="text" value="" class="width200" /></td>\
		</tr>\
		<tr>\
			<th class="width150">E-mail:</th>
			<td><input type="text" value=""  class="width200" /></td>\
		</tr>\
		<tr>\
			<th class="width150">Rodzaj kontaktu:</th>
			<td>\
				<select name="building_id" class="width200">\
					<option value="0">[Wybierz]</option>\
					<option value="1">Typ #1</option>\
					<option value="2">Typ #2</option>\
					<option value="2">Typ #3</option>\
					<option value="2">Typ #4</option>\
				</select>\
			</td>\
		</tr>\
		<tr>\
			<td colspan="2"><input type="button" value="Wyślij"  class="width75"/></td>\
		</tr>\
	</table>\
';

window.addEvent("domready", function() {
	var tab = new MzTab('tabs', {
		tabs: [
		  {caption: 'Homepage', url: '/'},
		  {caption: 'Lorem Ipsum', url: '/lorem-ipsum.php'},
		  {caption: 'Form', data: form_example_html},
		],
		width:400,
		height: 400,
		tabWidth:120,
		tabImage:'/js/mztab/img/tab120.png'
	});
});

Parameters description

Tab's url parameter can be one of following:

  1. Complete url, ex. http://domain.pl.
    It must be url inside the same domain as webpage, otherwise html content will not load into the tab.
  2. Short url beginning with slash /, ex. /content.html.
    In the case url is prefixed by webpage host domain, ex. http://domain.pl/content.html.
  3. Short url not beginning with slash /, ex. content.html.
    In the case url is prefixed by webpage host domain followed by directory containing the page, ex. If a page with control embedded has the address http://domena.pl/examples/example.html then url is replaced by http://domena.pl/examples/content.html.

tabImage parameter is optional. It points to file that conatains tab background image. The file should be twice as wide as a tab. The left half of the file is occupied by tab's image in nonhilite state and the right half of the file is tab's image in hilite state. For example tab image for 120x25 tab can be as follows:

data parameter is an alternative to parameter url. It conatains html code that will be loaded into the window under the tab. It is taken into account in the following cases:

 

Version 1.1: changes since version 1.0:

  • Added graphical tabs
  • Added data parameter that contain explicite html code