Создание ajax, на примере от DLE

Статус
В этой теме нельзя размещать новые ответы.
sigmenta

sigmenta

Постоялец
Заблокирован
Регистрация
5 Апр 2008
Сообщения
97
Реакции
8
  • Автор темы
  • Заблокирован
  • #1
В двигателе DLE, есть такая весчь, что когда перехордим на другую страницу, блоки необновляються, это сделанно для сокращения трафика, и скорости работы самого сайта.

У меня есть шаблон HTML, в нем горизонтальное меню, двухполосное (ну типа нажал га главную, есть нижняя полоса, там полменю, нажал на контакты, там полоса отправить письмо, наши телефоны, и атк далее. Тоесть с подменю.)

Я хочу чтобы это меню, включаю их же под меню, необновлялось, а при нажатии на главную, появлялось подменю относящееся к главной странице, и так же со всеми страницами, а не без обновлений и переходов и постоянных загрузок.

Кто знает как такое можно сделать, или похожие примеры откуда можно выдрать. Спасибо.
Для примера покажу вот как:
linq.co.il
Сайт не русский но там четко показан пример как именно я бы хотел сделать. Спасибо заранее.
 
HTML: 
<html>
<head>
	<title>Untitled</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" >
	
	var $j = jQuery.noConflict();

$j(document).ready(function() {

$j('ul.tabs li').css('cursor', 'pointer');

$j('ul.tabs.tabs1 li').click(function(){
	var thisClass = this.className.slice(0,2);
	$j('div.t1').hide();
	$j('div.t2').hide();
	$j('div.t3').hide();
	$j('div.t4').hide();
	$j('div.t5').hide();
	$j('div.t6').hide();
	$j('div.' + thisClass).show();
	$j('ul.tabs.tabs1 li').removeClass('tab-current');
	$j(this).addClass('tab-current');
	});

});
	
	</script>
<style>/* tabs */
ul.tabs {
	height: 25px;
	line-height: 25px;
	margin: 0 0 3px;
	list-style: none;
}
* html ul.tabs {margin-bottom: 0;}
ul.tabs li {	float: left;	margin-right: 1px;}
ul.tabs li a {
	display: block;
	padding: 0 5px 1px;
	margin-bottom: -1px;
	color:#ffffff;
	text-decoration: none;
	cursor: pointer;
	background: #3399CC;
	border: 1px solid #EFEFEF;
	border-bottom: 1px solid #F9F9F9;
	position: relative;
}
* html ul.tabs li a {float: left}
*+html ul.tabs li a {float: left}
ul.tabs li a:hover {
	color: #F70;
	padding: 0 5px;
	background: #FFFFDF;
	border: 1px solid #FFCA95;
}
ul.tabs li.tab-current a {
	color: #444;
	background: #EFEFEF;
	padding: 0px 5px 2px;
	border: 1px solid #DDD;
	border-bottom: 1px solid #EFEFEF;
}
div.t2,div.t3,div.t4, div.t5,div.t6{display: none;}

div.t1,div.t2,div.t3,div.t4, div.t5,div.t6{	border: 1px solid #DDD;	background: #EFEFEF;	padding: 0 12px;}
/* end tabs */

/* ]]> */
.toblog {width:500px; height:60px; font-size:10px;} 
</style>


<body>

<div id="wrapper">
	<ul class="tabs tabs1">
		<li class="t1 tab-current"><a>сделать заказ</a></li>
		<li class="t2"><a>обсудить на форуме</a></li>
		<li class="t3"><a>код для блога</a></li>
		<li class="t4"><a>сравнить</a></li>
		<li class="t5"><a>задать вопрос по почте</a></li>
		<li class="t6"><a>отзывы</a></li>
	</ul>
	
	<div class="t2"><p>Посмотреть отзывы</p></div>
	<div class="t3"><b>код для блога</div>
	<div class="t4">Товары для сравнения</div>
	<div class="t5">Отправьте на м письмо</div>
</div>
<div class="t6"><p>Тут можно прочитать отзывы<br><br>
</p></div>

</body>
</html>

есть вот такая реализация на jquery
 
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
(Kasseler CMS) Там тоже есть то что тебе нужго sajax помойму. Но лучше рассматривай jQuery или mootools
 
на касселере доступно полноценно только на фулл версии за 40 евро... особо не разгонишься...
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху