RQ: JS кодове

mizarck

Registered
Здравейте,
трябват ми подобни кодове http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

ако някой знае ПЛС да даде

10х предварително
 
виж разгледай това и ако ти върши работа бих искал да ми обясниш как мога и аз да го ползвам, че доста се мъчих за да го приложа
 
kitchenbg каза:
виж разгледай това и ако ти върши работа бих искал да ми обясниш как мога и аз да го ползвам, че доста се мъчих за да го приложа
Не ми върши работа :(

пп на това нз какво може да ми се използва освен менюто
 
Има едно поленце с 1|2|3|4|5|6 за него ти говори, а това е просто изграден примерен сайт.
 
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>New Document</title>
		<style type="text/css">
			.container {
				width: 400px;
				margin: 0 auto;
			}
			.normal, .clicked {
				height: 20px;
				float: left;
				position: relative;
				top: 1px;
				padding: 0 10px;
				border: 1px solid black;
				margin-left: 2px;
			}
			.normal {
				background-color: #F4F4F4;
				cursor: pointer;
			}
			.clicked {
				background-color: #FAFCFE;
				border-bottom: 1px solid #FAFCFE;
			}
			#tabs {
				clear: both;
				height: 400px;
				overflow: auto;
				padding: 5px;
				border: 1px solid black;
				background-color: #FAFCFE;
			}
			.loading {
				background: url('Loading/Loading6.gif') no-repeat center;
			}
			#tabs img {
				float: left;
			}
		</style>
		<script type="text/javascript">
			var tab,obj,xmlHttp;
			var id='first';
			function SetRequest() {
				xmlHttp=(window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
					if (typeof xmlHttp!='undefined') {
						tab.innerHTML='';
						tab.className='loading';
						xmlHttp.open("GET","info.txt",true);
						xmlHttp.onreadystatechange=GetCallBack;
						xmlHttp.send(null);
					}
					else {
						return
					}
			}
			function GetCallBack() {
				if (xmlHttp.readyState==4) {
					if (xmlHttp.status==200) {
						ParseText(xmlHttp.responseText);
					}
					else {
						return
					}
				}
			}
			function ParseText(data) {
				var tomatch= new RegExp('<'+id+'>((.*\\s*)+?)</'+id+'>');
					if (tomatch.test(data)) {
						tab.innerHTML=RegExp.$1;
						tab.className='';
					}
			}
			function TabsMenu(sender,ident) {
					id=ident;
					if (sender.className=='normal' && typeof tab!='undefined') {
						for (i=0;i<obj.length;i++) {
							if (obj[i].className=='clicked') {
								obj[i].className='normal';
							}
						}
						sender.className='clicked';
						SetRequest();
					}
			}
			function LoadTabsMenu() {
				tab=document.getElementById('tabs');
				obj=document.getElementsByTagName('div');
				SetRequest();
			}
			window.onload=LoadTabsMenu;
		</script>					
	</head>
	<body>
		<img style="display: none;" src="Loading/Loading6.gif" alt="">

		<div class="container">
				<div onclick="TabsMenu(this,'first')" class="clicked">tab first</div>
				<div onclick="TabsMenu(this,'second')" class="normal">tab second</div>
				<div onclick="TabsMenu(this,'three')" class="normal">tab three</div>
				<div onclick="TabsMenu(this,'four')" class="normal">tab four</div>
			<div id="tabs">
			</div>

		</div>
	</body>
</html>

Код:
 xmlHttp.open("GET","info.txt",true);
INFO.txt е файла от който чете информацията при кликване на табовете.. забравих да спомена.

Табове
---
Source: кода е писан от приятел не от мен
---
 
Pr0oF
10х точно това ми трябваше

пп там кадето пише 1 2 3 4 5 6 7 може да си се направи и с CSS ако не се лъжа
 
Малко си подобрих кода и ето го целият.
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>New Document</title>
		<style type="text/css">
			#container {
				width: 400px;
				margin: 0 auto;
			}
			.normal, .clicked {
				height: 20px;
				float: left;
				position: relative;
				top: 1px;
				padding: 0 10px;
				border: 1px solid black;
				margin-left: 2px;
			}
			.normal {
				background-color: #F4F4F4;
				cursor: pointer;
			}
			.clicked {
				background-color: #FAFCFE;
				border-bottom: 1px solid #FAFCFE;
			}
			#tabs {
				clear: both;
				height: 400px;
				overflow: auto;
				padding: 5px;
				border: 1px solid black;
				background-color: #FAFCFE;
			}
			.loading {
				background: url('Loading/Loading6.gif') no-repeat center;
			}
			#tabs img {
				float: left;
			}
		</style>
		
		<script type="text/javascript">
			var tab,obj,xmlHttp;
			var id='first';
			
			function SetRequest() {
				xmlHttp=(window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
					if (typeof xmlHttp!='undefined') {
						tab.innerHTML='';
						tab.className='loading';
						xmlHttp.open("GET","info.txt",true);
						xmlHttp.onreadystatechange=GetCallBack;
						xmlHttp.send(null);
					}
			}
			
			function GetCallBack() {
				if (xmlHttp.readyState==4 && xmlHttp.status==200) {
					ParseText(xmlHttp.responseText);
				}
			}
			
			function ParseText(data) {
				var tomatch= new RegExp('<'+id+'>((.*\\s*)+?)</'+id+'>');
					if (tomatch.test(data)) {
						tab.innerHTML=RegExp.$1;
						tab.className='';
					}
			}
			
			function TabsMenu(sender,ident) {
					id=ident;
					if (sender.className=='normal' && typeof tab!='undefined') {
						for (i=0;i<obj.length;i++) {
							if (obj[i].className=='clicked') {
								obj[i].className='normal';
							}
						}
						sender.className='clicked';
						SetRequest();
					}
			}
			
			function LoadTabsMenu() {
				tab=document.getElementById('tabs');
				obj=document.getElementById('container').getElementsByTagName('div');
				SetRequest();
			}
			
			window.onload=LoadTabsMenu;
		</script>
		
	</head>
	<body>
		<img style="display: none;" src="tabs_files/Loading6.gif" alt="">
		<div id="container">
				<div onclick="TabsMenu(this,'first')" class="clicked">tab first</div>
				<div onclick="TabsMenu(this,'second')" class="normal">tab second</div>
				<div onclick="TabsMenu(this,'three')" class="normal">tab three</div>
				<div onclick="TabsMenu(this,'four')" class="normal">tab four</div>
			<div id="tabs">
			</div>
		</div>
	</body>
</html>
Самото оформление на табовете съм го направил естествено от CSS, разгледай ми кода и ще се ориентираш.
Самата информация я взимам от един текстови файл който го парсвам с регулярният израз.
Ето това е текстовият файла.
Код:
<first>
	<img src="http://www.nndb.com/people/637/000108313/adriana-lima.jpg" alt="">
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
</first>
<second>
	<img src="http://www.graziemamma.it/img/adriana_lima.jpg" alt="">
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
</second>
<three>
	<img src="http://images.forbes.com/media/2006/01/adriana.jpg" alt="">
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
</three>
<four>
	<img src="http://www.brazilian-people.com/Brazilan%20Models/images/Adriana%20Lima" alt="">
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
	text goes here, text goes here, text goes here
</four>
И съответно като подадеш на функцията да речем:
TabsMenu(this,'first')
ще ти запълни дива с id="tabs" с информацията от текстовият файл между <first></first>.
Това меню ще стане по сполучливо ако се направи пак с AJAX и гет променлива която да се подава към php скрипт който да връща информация и директно да се полълва дива.Така ще се избегне парсването на файла.
Ако искаш може да ползваш и библиотеката на yahoo.
http://developer.yahoo.com/yui/tabview/
 

Back
Горе