tagged js

	window.onload = function(){setScreenClass();setBehavior();}; 
	window.onresize = setScreenClass;

	//  Following transition classes will be declared:
	//
	//	classname		  screenwidth
	//	------------------------------------------
	//	pda_v			  240px			
	//	pda_h			  320px			
	//	ultralow		  320px -  640px	
	//	screen_lo		  640px -  800px	
	//	screen_med		  800px - 1024px	
	//	screen_hi		 1024px - 1280px	
	//	screen_wide				> 1280px			


	function setScreenClass(){
		var fmt = document.documentElement.clientWidth;
		var cls = (fmt<=240)?'pda_ver':(fmt>240&&fmt<=320)?'pda_hor':(fmt>320&&fmt<=640)?'screen_ultralow':(fmt>640&&fmt<=800)?'screen_low':(fmt>800&&fmt<=1024)?'screen_med':(fmt>1024&&fmt<=1280)?'screen_high':'screen_wide';
		document.getElementById('count').innerHTML=fmt+'px -> '+cls;
		document.body.className=cls;
	};


	function setBehavior(){
		tabs = document.getElementsByTagName('dt');
		for (t=0;t < tabs.length; t++ ){
			if(tabs[t].parentNode.parentNode.className == 'tabbed'){
				tabs[t].onclick = activateTab;
				//alert(tabs[t].onclick);
			}
		}
	};

	function activateTab(){
		tabs = document.getElementsByTagName('dt');
		for (t=0;t < tabs.length; t++ ){
			if(tabs[t].className == 'current'){tabs[t].className="";}
		}
		page = document.getElementsByTagName('dd');
		for (t=0;t < page.length; t++ ){
			if(page[t].className == 'current'){page[t].className="";}
		}
		this.className="current";
		dd = this.nextSibling;
		if(dd.nodeType!=1){dd = dd.nextSibling;}
		dd.className="current";		
	};


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>A List Apart: Switchy McLayout - Tabbed Example</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Showcasing the Switchy McLayout technique" />
<meta name="robots" content="index, follow" />

<script src="behaviors_compression.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="presentation_compression.css" />

</head>

<body class="initial">

<div id="count"></div>

<!-- Begin of article markup -->

<div class="tabbed">
	<dl>
		<dt id="tab1">T a b A</dt>
		<dd>
			<h3>Body tab A</h3>
			<p>Dolor sit esse, at facilisis euismod wisi duis elit amet feugiat laoreet luptatum lobortis tincidunt. Minim eu minim quis feugait et  eros, feugait in dolor aliquam aliquam duis ex. Suscipit consequat facilisis, nostrud, tation consequat, iriure, eu et.</p>
			<p> molestie in wisi wisi aliquip te feugiat vel, et qui nisl, vel in at qui eros lobortis. Eum minim eros consequat ut commodo dolor ad luptatum augue enim esse, autem tation. Volutpat aliquip lobortis et iusto facilisi minim vel adipiscing nostrud consequat, feugait</p>
		</dd>
		<dt id="tab2" class="current">T a b B</dt>
		<dd class="current">
			<h3>Body tab B</h3>
			<p>Dolor sit esse, at facilisis euismod wisi duis elit amet feugiat laoreet luptatum lobortis tincidunt. Minim eu minim quis feugait et  eros, feugait in dolor aliquam aliquam duis ex. Suscipit consequat facilisis, nostrud, tation consequat, iriure, eu et.</p>
			<p> molestie in wisi wisi aliquip te feugiat vel, et qui nisl, vel in at qui eros lobortis. Eum minim eros consequat ut commodo dolor ad luptatum augue enim esse, autem tation. Volutpat aliquip lobortis et iusto facilisi minim vel adipiscing nostrud consequat, feugait</p>
		</dd>
		<dt id="tab3">T a b C</dt>
		<dd>
			<h3>Body tab C</h3>
			<p>Dolor sit esse, at facilisis euismod wisi duis elit amet feugiat laoreet luptatum lobortis tincidunt. Minim eu minim quis feugait et  eros, feugait in dolor aliquam aliquam duis ex. Suscipit consequat facilisis, nostrud, tation consequat, iriure, eu et.</p>
			<p> molestie in wisi wisi aliquip te feugiat vel, et qui nisl, vel in at qui eros lobortis. Eum minim eros consequat ut commodo dolor ad luptatum augue enim esse, autem tation. Volutpat aliquip lobortis et iusto facilisi minim vel adipiscing nostrud consequat, feugait</p>
		</dd>
		<dt id="tab4">T a b D</dt>
		<dd>
			<h3>Body tab D</h3>
			<p>Dolor sit esse, at facilisis euismod wisi duis elit amet feugiat laoreet luptatum lobortis tincidunt. Minim eu minim quis feugait et  eros, feugait in dolor aliquam aliquam duis ex. Suscipit consequat facilisis, nostrud, tation consequat, iriure, eu et.</p>
			<p> molestie in wisi wisi aliquip te feugiat vel, et qui nisl, vel in at qui eros lobortis. Eum minim eros consequat ut commodo dolor ad luptatum augue enim esse, autem tation. Volutpat aliquip lobortis et iusto facilisi minim vel adipiscing nostrud consequat, feugait</p>
		</dd>
	</dl>
</div>

<!-- End of article markup -->

</body>
</html>

你可能感兴趣的:(JavaScript,C++,c,XHTML,C#)