Javascript 标签页(TAB)浏览控件推介之:DOMTab

如何在越来越显得狭小的页面空间上显示更多内容?相信很多人立即想到的就是标签页(TAB),她允许在同一个地方显示多个内容。标签页有很多种制作方法,本文介绍的是 Christian Heilmann 写的 DOMTab。

Javascript 标签页(TAB)浏览控件推介之:DOMTab – 示例

 
/*
	DOMtab Version 3.1415927
	Updated March the First 2006
	written by Christian Heilmann
	check blog for updates: http://www.wait-till-i.com	
	free to use, not free to resell
*/
 
domtab={
	tabClass:'domtab', // class to trigger tabbing
	listClass:'domtabs', // class of the menus
	activeClass:'active', // class of current link
	contentElements:'div', // elements to loop through
	backToLinks:/#top/, // pattern to check "back to top" links
	printID:'domtabprintview', // id of the print all link
	showAllLinkText:'show all content', // text for the print all link
	prevNextIndicator:'doprevnext', // class to trigger prev and next links
	prevNextClass:'prevnext', // class of the prev and next list
	prevLabel:'previous', // HTML content of the prev link
	nextLabel:'next', // HTML content of the next link
	prevClass:'prev', // class for the prev link
	nextClass:'next', // class for the next link
	init:function(){
		var temp;
		if(!document.getElementById || !document.createTextNode){return;}
		var tempelm=document.getElementsByTagName('div');		
		for(var i=0;i<tempelm.length;i++){
			if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;}
			domtab.initTabMenu(tempelm[i]);
			domtab.removeBackLinks(tempelm[i]);
			if(domtab.cssjs('check',tempelm[i],domtab.prevNextIndicator)){
				domtab.addPrevNext(tempelm[i]);
			}
			domtab.checkURL();
		}
		if(document.getElementById(domtab.printID) 
		   && !document.getElementById(domtab.printID).getElementsByTagName('a')[0]){
			var newlink=document.createElement('a');
			newlink.setAttribute('href','#');
			domtab.addEvent(newlink,'click',domtab.showAll,false);
			newlink.onclick=function(){return false;} // safari hack
			newlink.appendChild(document.createTextNode(domtab.showAllLinkText));
			document.getElementById(domtab.printID).appendChild(newlink);
		}
	},
	checkURL:function(){
		var id;
		var loc=window.location.toString();
		loc=/#/.test(loc)?loc.match(/#(w.+)/)[1]:'';
		if(loc==''){return;}
		var elm=document.getElementById(loc);
		if(!elm){return;}
		var parentMenu=elm.parentNode.parentNode.parentNode;
		parentMenu.currentSection=loc;
		parentMenu.getElementsByTagName(domtab.contentElements)[0].style.display='none';
		domtab.cssjs('remove',parentMenu.getElementsByTagName('a')[0].parentNode,domtab.activeClass);
		var links=parentMenu.getElementsByTagName('a');
		for(i=0;i<links.length;i++){
			if(!links[i].getAttribute('href')){continue;}
			if(!/#/.test(links[i].getAttribute('href').toString())){continue;}
			id=links[i].href.match(/#(w.+)/)[1];
			if(id==loc){
				var cur=links[i].parentNode.parentNode;
				domtab.cssjs('add',links[i].parentNode,domtab.activeClass);
				break;
			}
		}
		domtab.changeTab(elm,1);
		elm.focus();
		cur.currentLink=links[i];
		cur.currentSection=loc;
	},
	showAll:function(e){
		document.getElementById(domtab.printID).parentNode.removeChild(document.getElementById(domtab.printID));
		var tempelm=document.getElementsByTagName('div');		
		for(var i=0;i<tempelm.length;i++){
			if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;}
			var sec=tempelm[i].getElementsByTagName(domtab.contentElements);
			for(var j=0;j<sec.length;j++){
				sec[j].style.display='block';
			}
		}
		var tempelm=document.getElementsByTagName('ul');		
		for(i=0;i<tempelm.length;i++){
			if(!domtab.cssjs('check',tempelm[i],domtab.prevNextClass)){continue;}
			tempelm[i].parentNode.removeChild(tempelm[i]);
			i--;
		}
		domtab.cancelClick(e);
	},
	addPrevNext:function(menu){
		var temp;
		var sections=menu.getElementsByTagName(domtab.contentElements);
		for(var i=0;i<sections.length;i++){
			temp=domtab.createPrevNext();
			if(i==0){
				temp.removeChild(temp.getElementsByTagName('li')[0]);
			}
			if(i==sections.length-1){
				temp.removeChild(temp.getElementsByTagName('li')[1]);
			}
			temp.i=i; // h4xx0r!
			temp.menu=menu;
			sections[i].appendChild(temp);
		}
	},
	removeBackLinks:function(menu){
		var links=menu.getElementsByTagName('a');
		for(var i=0;i<links.length;i++){
			if(!domtab.backToLinks.test(links[i].href)){continue;}
			links[i].parentNode.removeChild(links[i]);
			i--;
		}
	},
	initTabMenu:function(menu){
		var id;
		var lists=menu.getElementsByTagName('ul');
		for(var i=0;i<lists.length;i++){
			if(domtab.cssjs('check',lists[i],domtab.listClass)){
				var thismenu=lists[i];
				break;
			}
		}
		if(!thismenu){return;}
		thismenu.currentSection='';
		thismenu.currentLink='';
		var links=thismenu.getElementsByTagName('a');
		for(i=0;i<links.length;i++){
			if(!/#/.test(links[i].getAttribute('href').toString())){continue;}
			id=links[i].href.match(/#(w.+)/)[1];
			if(document.getElementById(id)){
				domtab.addEvent(links[i],'click',domtab.showTab,false);
				links[i].onclick=function(){return false;} // safari hack
				domtab.changeTab(document.getElementById(id),0);
			}
		}
		id=links[0].href.match(/#(w.+)/)[1];
		if(document.getElementById(id)){
			domtab.changeTab(document.getElementById(id),1);
			thismenu.currentSection=id;
			thismenu.currentLink=links[0];
			domtab.cssjs('add',links[0].parentNode,domtab.activeClass);
		}
	},
	createPrevNext:function(){
		// this would be so much easier with innerHTML, darn you standards fetish!
		var temp=document.createElement('ul');
		temp.className=domtab.prevNextClass;
		temp.appendChild(document.createElement('li'));
		temp.getElementsByTagName('li')[0].appendChild(document.createElement('a'));
		temp.getElementsByTagName('a')[0].setAttribute('href','#');
		temp.getElementsByTagName('a')[0].innerHTML=domtab.prevLabel;
		temp.getElementsByTagName('li')[0].className=domtab.prevClass;
		temp.appendChild(document.createElement('li'));
		temp.getElementsByTagName('li')[1].appendChild(document.createElement('a'));
		temp.getElementsByTagName('a')[1].setAttribute('href','#');
		temp.getElementsByTagName('a')[1].innerHTML=domtab.nextLabel;
		temp.getElementsByTagName('li')[1].className=domtab.nextClass;
		domtab.addEvent(temp.getElementsByTagName('a')[0],'click',domtab.navTabs,false);
		domtab.addEvent(temp.getElementsByTagName('a')[1],'click',domtab.navTabs,false);
		// safari fix
		temp.getElementsByTagName('a')[0].onclick=function(){return false;}
		temp.getElementsByTagName('a')[1].onclick=function(){return false;}
		return temp;
	},
	navTabs:function(e){
		var li=domtab.getTarget(e);
		var menu=li.parentNode.parentNode.menu;
		var count=li.parentNode.parentNode.i;
		var section=menu.getElementsByTagName(domtab.contentElements);
		var links=menu.getElementsByTagName('a');
		var othercount=(li.parentNode.className==domtab.prevClass)?count-1:count+1;
		section[count].style.display='none';
		domtab.cssjs('remove',links[count].parentNode,domtab.activeClass);
		section[othercount].style.display='block';
		domtab.cssjs('add',links[othercount].parentNode,domtab.activeClass);
		var parent=links[count].parentNode.parentNode;
		parent.currentLink=links[othercount];
		parent.currentSection=links[othercount].href.match(/#(w.+)/)[1];
		domtab.cancelClick(e);
	},
	changeTab:function(elm,state){
		do{
			elm=elm.parentNode;
		} while(elm.nodeName.toLowerCase()!=domtab.contentElements)
		elm.style.display=state==0?'none':'block';
	},
	showTab:function(e){
		var o=domtab.getTarget(e);
		if(o.parentNode.parentNode.currentSection!=''){
			domtab.changeTab(document.getElementById(o.parentNode.parentNode.currentSection),0);
			domtab.cssjs('remove',o.parentNode.parentNode.currentLink.parentNode,domtab.activeClass);
		}
		var id=o.href.match(/#(w.+)/)[1];
		o.parentNode.parentNode.currentSection=id;
		o.parentNode.parentNode.currentLink=o;
		domtab.cssjs('add',o.parentNode,domtab.activeClass);
		domtab.changeTab(document.getElementById(id),1);
		document.getElementById(id).focus();
		domtab.cancelClick(e);
	},
/* helper methods */
	getTarget:function(e){
		var target = window.event ? window.event.srcElement : e ? e.target : null;
		if (!target){return false;}
		if (target.nodeName.toLowerCase() != 'a'){target = target.parentNode;}
		return target;
	},
	cancelClick:function(e){
		if (window.event){
			window.event.cancelBubble = true;
			window.event.returnValue = false;
			return;
		}
		if (e){
			e.stopPropagation();
			e.preventDefault();
		}
	},
	addEvent: function(elm, evType, fn, useCapture){
		if (elm.addEventListener) 
		{
			elm.addEventListener(evType, fn, useCapture);
			return true;
		} else if (elm.attachEvent) {
			var r = elm.attachEvent('on' + evType, fn);
			return r;
		} else {
			elm['on' + evType] = fn;
		}
	},
	cssjs:function(a,o,c1,c2){
		switch (a){
			case 'swap':
				o.className=!domtab.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
			break;
			case 'add':
				if(!domtab.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
			break;
			case 'remove':
				var rep=o.className.match(' '+c1)?' '+c1:c1;
				o.className=o.className.replace(rep,'');
			break;
			case 'check':
				var found=false;
				var temparray=o.className.split(' ');
				for(var i=0;i<temparray.length;i++){
					if(temparray[i]==c1){found=true;}
				}
				return found;
			break;
		}
	}
}
domtab.addEvent(window, 'load', domtab.init, false);

示例代码:

 
<style type="text/css">
<!--
body {
	margin:0;
	padding:10px 5px;
	font-size:12px;
	font-family:verdana,arial,sans-serif,"宋体";
}
#warp {
	width:600px;
	margin:0 auto;
}
 
/* TAB样式 开始 */
ul.domtabs {
	list-style: none;
	font-size: 0.9em;
	border-bottom: 1px solid #D55E12;
	margin: 0 0 20px 0;
	padding: 0 30px 2px 0;
	text-align: right;
}
ul.domtabs li {
	display: inline;
	margin: 0;
}
ul.domtabs a:link,
ul.domtabs a:visited,
ul.domtabs a:active,
ul.domtabs a:hover {
	text-decoration: none;
	padding: 2px 5px 4px 5px;
	position: relative;
	bottom: 2px;
	color: #EA8544;
}
ul.domtabs li.active a:link,
ul.domtabs li.active a:visited,
ul.domtabs li.active a:active,
ul.domtabs li.active a:hover {
	background:#fff;
	padding: 2px 10px 4px 10px;
	border: 1px solid #D55E12;
	border-bottom: 1px solid #fff;
	position: relative;
	bottom: 2px;
	color: #D55E12;
	font-weight:bold;
}
ul.domtabs a:hover {
	text-decoration: underline;
	color: #D55E12;
}
ul.domtabs li.active a:hover {
	text-decoration: none;
}
 
/* 前后跳转 */
ul.prevnext {
	list-style-type: none;
	margin: 0;
	padding: .5em 0;
	border-top: 1px solid #D55E12;
}
 
ul.prevnext li a {
	display: block;
	width: 6em;
	color: #FFF;
	background-color: #D55E12;
	padding: 2px 0;
	text-align: center;
	text-decoration: none;
	font:12px bold "verdana";
}
 
ul.prevnext li a:hover {
	color: #FFF;
	background-color: #EA8544;
}
 
ul.prevnext .prev { float: left; }
ul.prevnext .next { float: right; }
 
h2.title {color:#D55E12;}
-->
</style>
 
<script type="text/javascript" src="js/domtab.js"></script>
 
<div id="warp">
 
	<div class="domtab doprevnext">
 
		<ul class="domtabs">
			<li><a href="#tab1">PHP/MySQL</a></li>
			<li><a href="#tab2">(X)HTML/CSS</a></li>
			<li><a href="#tab3">Javascript</a></li>
			<li><a href="#tab4">Ajax</a></li>
		</ul>
 
		<h2 class="title">Codebit.cn - 聚合小段精华代码</h2>
 
		<!-- TAB 1 -->
		<div>
 
			<h2><a name="tab1" id="tab1">PHP</a></h2>
			<p>PHP(“PHP: Hypertext Preprocessor”,超文本预处理器的字母缩写)是一种被广泛应用的开放源代码的多用途脚本语言,它可嵌入到 HTML中,尤其适合 web 开发。 </p>
 
			<h2><a name="mysql">MySQL</a></h2>
			<p>MySQL是最流行的开放源码SQL数据库管理系统,它是由MySQL AB公司开发、发布并支持的。MySQL AB是由多名MySQL开发人创办的一家商业公司。它是一家第二代开放源码公司,结合了开放源码价值取向、方法和成功的商业模型。</p>
 
			<p><a href="#top">back to menu</a></p>
 
		</div>
 
		<!-- TAB 2 -->
		<div>
 
			<h2><a name="tab2" id="tab2">(X)HTML</a></h2>
			<p>HTML语言是我们建立网页的工具,从它出现发展到现在,规范不断完善,功能越来越强。但是依然有缺陷和不足,人们仍在不断的改进它,使它更加便于控制和有弹性,以适应网络上日新月异的应用需求。2000年底,国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。</p>
 
			<p>XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言,目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。</p>
 
			<h2><a name="css">CSS</a></h2>
			<p>CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</p>
 
			<p><a href="#top">back to menu</a></p>
 
		</div>
 
		<!-- TAB 3 -->
		<div>
 
			<h2><a name="tab3" id="tab3">Javascript</a></h2>
			<p>JavaScript 是一种新的描述语言,此一语言可以被嵌入 HTML 的文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如: form 的输入) 而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时,它不用经过传给伺服端 (server)处理,再传回来的过程,而直接可以被客户端 (client) 的应用程式所处理。</p>
 
			<p><a href="#top">back to menu</a></p>
 
		</div>
 
		<!-- TAB 4 -->
		<div>
 
			<h2><a name="tab4" id="tab4">Ajax</a></h2>
			<p>AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词,但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略,在 Gmail、Google suggest 及  Google Maps 出现后才一举成名天下知。</p>
 
			<p>这两个 JavaScript 功能 是:
				<ul>
					<li>在不重新读取页面的情况下对伺服器送出要求(request)</li>
					<li>解析、使用 XML 文件</li>
				</ul>
			</p>
 
			<p><a href="#top">back to menu</a></p>
 
		</div>
 
	</div>
 
</div>

DOMTab 的页面样式完全由 css 控制,你可以通过在样式为 domtab 的 DIV 上添加一个 doprevnext 样式来生成前后跳转链接:

 
<ul class="prevnext">
	<li class="prev"><a href="#">previous</a></li>
	<li class="next"><a href="#">next</a></li>
</ul>

官方网站:
http://onlinetools.org/tools/domtabdata/

CSS Beauty 风格的两列新闻显示样式

本文向您推荐的是 CSS Beauty 风格的两列新闻显示样式, 新闻是一般网站必不可少的功能, 而新闻列表的表现方式也是多姿多彩的, 本文介绍的是按两列显示的新闻列表方案, 同时还有一个 TAB 浏览的 Javascript 技巧和 FORM 元素的样式设计.

CSS Beauty 风格的两列新闻显示样式 – 示例

CSS 部分:

 
<style type="text/css">
<!--
body, td, div, p, span, textarea, select {
	font-size: 12px; font-family: verdana, arial, helvetica, sans-serif
}
a {
	color: #DCB20C; text-decoration: none; font-size: 12px;
}
a:hover {
	color: #CC9933; text-decoration: underline; font-size: 12px;
}

/* ClearFix */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-table;}

/* Hides from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* 公用 FORM 样式 */
input, textarea{
	background: #fff;
	border: 1px solid #83cde1;
	border-top: 3px solid #83cde1;
}
input:hover, textarea:hover {
	background: #F0FDE2;
	border-top: 3px solid #b1e77a
}
input:focus, textarea:focus {
	background: #FCFFEC;
	border-top: 3px solid #b1e77a
}
.submit { border: 0; width: auto; }
.submit:hover, .submit:active { border:0; }
.radio { background: none; border: 0; }


#news {
	margin:0;
	padding:0 15px 5px 10px;
	border-bottom: 1px dotted #BBE0EB;
}

/* TAB样式 开始 */
#news ul.domtabs {
	list-style: none;
	font-size: 0.9em;
	border-bottom: 1px dotted #BBDFED;
	margin: 0 0 20px 0;
	padding: 0 30px 2px 0;
	text-align: right;
}
#news ul.domtabs li {
	display: inline;
	margin: 0;
}
#news ul.domtabs a:link,
#news ul.domtabs a:visited,
#news ul.domtabs a:active,
#news ul.domtabs a:hover {
	text-decoration: none;
	padding: 2px 5px 4px 5px;
	position: relative;
	bottom: 0;
	color: #89C7D9;
}
#news ul.domtabs li.active a:link,
#news ul.domtabs li.active a:visited,
#news ul.domtabs li.active a:active,
#news ul.domtabs li.active a:hover {
	background:#fff;
	padding: 2px 10px 4px 10px;
	border: 1px dotted #BBDFED;
	border-bottom: 1px solid #fff;
	position: relative;
	bottom: 0;
	color: #418FA5;
}
#news ul.domtabs a:hover {
	text-decoration: underline;
}
#news ul.domtabs li.active a:hover {
	text-decoration: none;
}


/* 新闻列表样式 开始 */
#newswrap {
	margin:0;
}
#news-left, #news-right {
	float: right;
	width: 48%;
	max-width: 330px;
}
#news .more {
	clear: both;
	margin:0;
	padding: 0 15px 0 0;
	font-size: 0.85em;
	text-align: right;
	line-height: 1em;
}
#news .more img {
	vertical-align: bottom;
	border: 0;
	margin: 0 0 0 5px;
}
#news-right p, #news-left p {
	font-size: 0.85em;
	padding: 0 5px 0 0;
	margin: 0 0 0 12px;
	color: #4896AC;
}
#news-right p a, #news-left p a {
	font-weight: bold;
	display:block;
}
#news-right p a.continue, #news-left p a.continue {
	font-weight: normal;
}
#news p.author {
	color: #83cde1;
	border: 0;
	padding: 0 0 5px 0;
	margin: 0 10px 10px 12px;
	border-bottom: 1px dotted #BBE0EB;
}
#news p.author a {
	color: #86d734;
	font-weight: normal;
	display:inline;
	font-size: 0.85em;
}
#news p.author a:hover {
	text-decoration: underline;
}
#news p.author:hover {
	background: none;
}


/* FORM 表单样式 开始 */
#news #form {
	display: none;
}
#news form {
	float: right;
	margin: 0;
	padding: 0;
	background: #fff;
	font-size: 0.9em;
	width: 85%;
}
#news form p {
	padding: 0 0 0 20px;
	float: left;
	margin: 0;
	width: 180px;
	color: #4896AC;
}
#news form p.note {
	margin: 0 0 20px 0;
}
#news fieldset {
	border: 0;
}
#news legend {
	display: none;
}
#news label {
	display: block;
}
#news input {
	margin: 0 0 10px 0;
	display: block;
	width: 150px;
}
#news textarea {
	margin: 0;
	width: 150px;
	height: 100px;
}
#news .submit {
	width: auto;
	border: 0;
}

-->
</style>

HTML 部分:

 
<div id="news" class="domtab clearfix">

	<ul class="domtabs">
		<li class="active"><a href="#news-right">Current News</a></li>
		<li><a href="#submit-news">Submit News</a></li>
	</ul>

	<div style="display: block;" id="newswrap">	
	
		<div id="news-right">
			
			<p><a href="http://www.sitepoint.com/article/accessibility-techniques">Advanced Accessibility Techniques.</a> Techniques you can implement to achieve advanced accessibility beyond the W3C guidelines.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 07 at 07:24 AM</p>
						
			<p><a href="http://www.brothercake.com/site/resources/reference/3d/">Dynamic 3D with CSS and the DOM.</a>Underground - A 3D dungeon environment built using Tantek's technique of creating shapes out of the interaction of CSS borders.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 04 at 08:38 AM</p>
						
			<p><a href="http://www.brothercake.com/site/resources/scripts/dbx/">Docking boxes (dbx).</a> Adds animated drag 'n' drop, snap-to-grid, and show/hide-contents functionality to any group of elements.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 03 at 11:22 AM</p>
						
			<p><a href="http://www.useit.com/alertbox/screen_resolution.html">Screen Resolution and Page Layout.</a> Optimize Web pages for 1024x768, but use a liquid layout that stretches well for any resolution, from 800x600 to 1280x1024.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 02 at 07:50 AM</p>
						
			<p><a href="http://accessites.org/gbcms_xml/news_page.php?id=19">Visual Vs. Structural.</a> Does the choice of approach — visual vs structural — have any impact on the accessibility or usability of a site?</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 02 at 07:47 AM</p>
			
		</div>

		<div id="news-left">
			
			<p><a href="http://www.456bereastreet.com/archive/200608/google_valid_and_strict/">Google valid and strict.</a>Roger Johansson debunks the myth that Google has deprecated code tosave on bandwidth. He speculates why they still use old markup.</p>
			<p class="author">Posted by <a href="http://sonspring.com/">Nathan Smith</a> on Aug 15 at 01:37 AM</p>
						
			<p><a href="http://techfoolery.com/archives/2006/08/11/2021/">Animated Page Scroller</a>. An elegant JavaScript solution for page navigation</p>
			<p class="author">Posted by <a href="http://dustindiaz.com/">Dustin Diaz</a> on Aug 15 at 12:43 AM</p>
						
			<p><a href="http://www.aptana.com/" title="JavaScript Love Maker">Aptana Web IDE</a>. A robust, JavaScript-focused IDE for building dynamic web applications.</p>
			<p class="author">Posted by <a href="http://dustindiaz.com/">Dustin Diaz</a> on Aug 15 at 12:28 AM</p>
						
			<p><a href="http://www.flickrshow.com/">Flickrshow.</a> Provides you with the simplest way of displaying your Flickr photosets on your own website with the use of some javascript.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 10 at 11:06 AM</p>
						
			<p><a href="http://jquery.com/demo/thickbox/">ThickBox 2.0.</a> Version 2 of the JQuery based photo slideshow script, new features include iFrame support, multi-picture slideshows and more.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 09 at 09:31 AM</p>
			
		</div>

		<p class="more"><a href="http://www.cssbeauty.com/news/">News Archive</a> <a href="http://www.cssbeauty.com/rss/news/"><img src="rss.gif" alt="RSS Feed" /></a></p>

	</div>

	<div id="form">
		<form action="/news/submit/snews.php" method="post" id="submit-news">
			<fieldset>
				<legend>Submit News</legend>

				<p>
				<label for="title">Title:</label>

				<input type="text" tabindex="1" name="n-title" id="title" />

				<label for="url">News URL:</label>
				<input type="text" tabindex="2" name="n-url" id="url" />

				<label for="description">News Description:</label>
				<textarea tabindex="3" name="n-description" id="description" rows="5" cols="15"></textarea>
				<small>Max 120 characters</small>

				</p>

				<p class="note"><strong>Note:</strong> Your submission will be placed on queue pending review, if accepted your news item will show up in the next few hours.</p>
					
				<p>
				<label for="name">Your Name:</label>
				<input type="text" tabindex="4" name="s-name" id="name" />

				<label for="email">Your email:</label>

				<input type="text" tabindex="5" name="s-email" id="email" />

				<label for="yurl">Your Website:</label>
				<input type="text" tabindex="6" name="s-url" id="yurl" />
					
				<input class="submit" type="image" src="submit.gif" alt="submit" tabindex="7" />
				</p>
			</fieldset>
		</form>
	</div>

</div>

本文只是摘录原网站的部分代码, 目的是整理其实现技巧, 如果您有其他目的或用途, 请联系原网站.