Jquery Tabs Examples + Image Flow_jquery.easytabs.min.js-优快云博客

本文档通过Ajax和jQuery插件实现了一个动态加载图片和标签的网页示例。该示例利用了tab切换功能来展示不同主题的内容，并通过Ajax从服务器获取数据填充到各个标签页中。每个标签页不仅展示了图片，还根据获取的数据动态生成了标签云。
<!DOCTYPE html>
<html>
<head>
<link href="galleria.classic.css" rel="stylesheet" type="text/css"> 
  <style>
    /* Example Styles for Demo */
    .etabs { margin: 0; padding: 0; }
    .tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
    .tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
    .tab a:hover { text-decoration: underline; }
    .tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
    .tab a.active { font-weight: bold; }
    .tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
    .panel-container { margin-bottom: 10px; }
	
	#side{
		float:center;
		display:block;
		width:400px;
		}	
	#footer{
		clear:both;
		padding:1em 0;
		margin:0 20px;
		}
	#tags ul{
		margin:1em 0;
		padding:.5em 10px;
		text-align:center;
		background:#71b5e9;	
		}
	#tags li{
		margin:0;
		padding:0;
		list-style:none;
		display:inline;
		}
	#tags li a{
		text-decoration:none;
		color:#fff;
		padding:0 2px;	
		}
	#tags li a:hover{	
		color:#cff400;
		}		
	
	.tag1{font-size:100%;}
	.tag2{font-size:120%;}
	.tag3{font-size:140%;}
	.tag4{font-size:160%;}
	.tag5{font-size:180%;}
	
	/* alternative layout */

	#tags .alt{
		text-align:left;
		padding:0;
		background:none;
		}
	#tags .alt li{
		padding:2px 10px;
		background:#efefef;
		display:block;
		}
	#tags .alt .tag1, 
	#tags .alt .tag2, 
	#tags .alt .tag3, 
	#tags .alt .tag4, 
	#tags .alt .tag5{font-size:100%;}
	#tags .alt .tag1{background:#7cc0f4;}
	#tags .alt .tag2{background:#67abe0;}
	#tags .alt .tag3{background:#4d92c7;}
	#tags .alt .tag4{background:#3277ad;}
	#tags .alt .tag5{background:#266ca2;}
	
	/* Demo styles */
	
	
   .content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;height:450px;width:620px;margin:20px auto;}
	h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;}
	p{margin:0 0 20px}
	a {color:#22BCB9;text-decoration:none;}
	.cred{margin-top:20px;font-size:11px;}
    

	/* This rule is read by Galleria to define the gallery height: */
	#galleria{height:400px;width:600px;}
	#galleria1{height:400px;width:600px;}
	#galleria2{height:400px;width:600px;}
			
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
	<script src="jquery-1.7.1.min.js" type="text/javascript"></script> 
  <script src="jquery.hashchange.min.js" type="text/javascript"></script>
  <script src="jquery.easytabs.min.js" type="text/javascript"></script>
  <script src="galleria-1.2.9.js"></script>

</head>
<!-- <body onLoad="intilization()"> -->
<body>

<center><h2>Venue Sementic Example</h2></center>

<center><div id="tab-container" class='tab-container'>
 <ul class='etabs'>
   <li class='tab'><a href="#tabs1-html">First Topic</a></li>
   <li class='tab'><a href="#tabs1-js">Second Topic</a></li>
   <li class='tab'><a href="#tabs1-css">Third Topic</a></li>
 </ul>
 <div class='panel-container'>
  <div id="tabs1-html"></div>
  <div id="tabs1-js"></div>
  <div id="tabs1-css"></div>
 </div>
</div>
</center>

  <script type="text/javascript">
// Load the classic theme



var myjson;

$(document).ready( function() {
  $('#tab-container').easytabs();
});

function intilization()
{
	console.log("initialize");
	//alert('hello');
	var url = location.href; 
	//alert(url);
	var venueid = url.substring(url.indexOf("=")+1,url.length);
	
	venueid = venueid.replace(/\s+/, '');
	console.log(venueid);
	//alert(venueid);
	venueid = '4bf299a21cd9d13a03d3ed76';
	
	$.ajax({
		url:"showvenue.php",
		data: {"venueid" : venueid },
		//timeout:3000,
		type:"post",
		success: function(data) {
			console.log(data);
			myjson = eval(data);
			//alert(myjson);
			ShowImagelist();
		}, 
		
	});
	
	
	//alert('132'+myjson);
	
}

function ShowImagelist()
{
	//alert('hello');
	console.log("before show image");
	var imagelist1;
	var imagelist2;
	var imagelist3;
	
	imagelist1 = myjson[0];
	imagelist2 = myjson[1];
	imagelist3 = myjson[2];

	
	var str1 = "<div class=\"content\"><div id=\"galleria1\">";
	//alert(imagelist1.length);
	for(var i=0;i<imagelist1.length; i++)
	{
		var imageurl = imagelist1[i];
		//alert(imageurl);
		str1 = str1 + "<img  src=\"" + imagelist1[i] + '\" width=\"100px\" height=\"100px\">';
		//alert(str);
	}
	str1 = str1+"<\div><\div>";
	//$("#tabs1-html").html(str);

	
	var str2 = "<div class=\"content\"><div id=\"galleria2\">";
	//alert(imagelist1.length);
	for(var i=0;i<imagelist2.length; i++)
	{
		var imageurl = imagelist2[i];
		//alert(imageurl);
		str2 = str2 + "<img  src=\"" + imagelist2[i] + '\" width=\"100px\" height=\"100px\">';
		//alert(str); 
	}
	str2 = str2+"<\div><\div>";
	//$("#tabs1-js").html(str);
	
	var str3 = "<div class=\"content\"><div id=\"galleria\">";
	//alert(imagelist1.length);
	for(var i=0;i<imagelist3.length; i++)
	{
		var imageurl = imagelist3[i];
	    //alert(imageurl);
		str3 = str3 + "<img  src=\"" + imagelist3[i] + '\"  width=\"100px\" height=\"100px\">';
		//str3 = str3 + "<a href=\""+imageurl+"\"><img  src=\"" + imagelist3[i] + "\" data-big=\"" + imagelist3[i] + "\><\a>";
		//alert(str3);
	}
	str3 = str3+"</div></div>";
	//$("#tabs1-css").html(str);
	
	var topic1 = myjson[3];
	//alert(topic1);
	var topic2 = myjson[4];
	var topic3 = myjson[5];
	//alert(topic1);
	var str = '<center><div id="side">\n<div id="tags">\n<ul>\n';
	//alert(topic1.length);
	for(var i=0;i<topic1.length;i++)
	{
		var word = topic1[i];
		if(i<5){
		str = str+"<li class=\"tag5\"><a href=\"#\">"+word+"</a></li>\n";
		//alert(str);
		}
		else{
		if(i<10){
			str = str+"<li class=\"tag4\"><a href=\"#\">"+word+"</a></li>\n";
		}
		else{
			str = str+"<li class=\"tag3\"><a href=\"#\">"+word+"</a></li>\n";
		}
		}	
	}
	str = str+"</ul>\n</div>\n</div>\n</center>";
	str = str+str1;
	$("#tabs1-html").html(str);
	
	var str = '<center><div id="side">\n<div id="tags">\n<ul>\n';
	for(var i=0;i<topic2.length;i++)
	{
		var word = topic2[i];
		if(i<5){
		str = str+"<li class=\"tag5\"><a href=\"#\">"+word+"</a></li>\n";
		//alert(str);
		}
		else{
		if(i<10){
			str = str+"<li class=\"tag4\"><a href=\"#\">"+word+"</a></li>\n";
		}
		else{
			str = str+"<li class=\"tag3\"><a href=\"#\">"+word+"</a></li>\n";
		}
		}	
	}
	str = str+"</ul>\n</div>\n</div>\n</center>";
	//alert(str);
	str = str+str2;
	$("#tabs1-js").html(str);
	
	var str = '<center><div id="side">\n<div id="tags">\n<ul>\n';
	for(var i=0;i<topic3.length;i++)
	{
		var word = topic3[i];
		if(i<5){
		str = str+"<li class=\"tag5\"><a href=\"#\">"+word+"</a></li>\n";
		//alert(str);
		}
		else{
		if(i<10){
			str = str+"<li class=\"tag4\"><a href=\"#\">"+word+"</a></li>\n";
		}
		else{
			str = str+"<li class=\"tag3\"><a href=\"#\">"+word+"</a></li>\n";
		}
		}	
	}
	str = str+"</ul>\n</div>\n</div>\n</center>";
	//alert(str);
	str = str+str3;
	//alert(str3);
	$("#tabs1-css").html(str);
	console.log("end of finish");
	console.log("finish");
}
  </script>

<script>

$(document).ready(function() {
	Galleria.loadTheme('galleria.classic.min.js');
	Galleria.run('#galleria');
	console.log("1");
	Galleria.run('#galleria1');
	console.log("2");
	Galleria.run('#galleria2');
	console.log("3");
});


</script>

<script>
	intilization();
</script>
</body>
</html>