Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Единый форум поддержки » Корзина » Переключение между категориями

Переключение между категориями

Страница:   1 2

Сообщений 21 страница 24 из 24

21

  • Автор: Romych
  • drumman
  • Romych
  • Зарегистрирован: Вт, 16 Дек 2008
  • Сообщений: 2708
  • Уважение: +4085
  • Позитив: +2378
  • Пол: Мужской
  • Последний визит:
    Пн, 18 Ноя 2024 23:40:35
Deff написал(а):

Ващет Кнопки слева лучше смотрелись

можно и слева сделать

в стиле добавив

div.category {width:80%; float: left;}

и в строке скрипта

$('div#pun-main').prepend('<div id="categ" style="position:static;width:20%;float:left;background-color:#F5F5F5;"><ul class="tabs" style="float:right;"><li class="active"><a href="#pun-category1">Название категории 1</a></li><li><a href="#pun-category2">Категория 2</a></li><li><a href="#pun-category3">Категория 3</a></li><li><a href="#pun-category4">Категория 4</a></li><li><a href="#pun-category5">Категория 5</a></li><li><a href="#pun-category6">Категория 6</a></li><li><a href="#pun-category7">Категория 7</a></li></ul></div>');

хотя можно стиль div id="categ" целиком в css перенести

+1

22

  • Автор: Kven
  • Заслуженный
  • Kven
  • Зарегистрирован: Сб, 24 Апр 2010
  • Сообщений: 35
  • Уважение: +9
  • Позитив: +3
  • Пол: Мужской
  • Последний визит:
    Вс, 7 Июл 2013 20:23:26

Аргх, доделал таки что-то =)

jQuery остаётся тем-же.

Код:
<script type="text/javascript">

$(document).ready(function() {


	$(".category").hide(); 
	$("ul.tabs li:first").addClass("active").show();
	$(".category:first").show();
	
	$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".category").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
	});

});

</script>
Код:
<script type="text/javascript">
str=document.URL;
if(str.substring(str.lastIndexOf('/')+1)=="" || str.substring(str.lastIndexOf('/')+1)=="index.php") {
argh = document.getElementById('pun-main')
che = argh.innerHTML
argh.innerHTML = '<table></tr><td valign=top width=20% style="padding-right:0px;"><ul class="tabs" id="litabs"></ul></td><td  width=80% style="padding-left:0px;" >' + che + '</td></tr></table>'
b = document.getElementsByClassName('category')
c = document.getElementById('litabs')
f=-1 
while (b[++f]) {
c.innerHTML += "<li><a href=\"#" + b[f].id + "\">" + b[f].firstElementChild.innerHTML + "</a></li>"
}
}
</script>

При загрузке страницы первая часть скрипта создаёт ul, вторая часть его заполняет, пользуясь названиями категорий и их id.

стиль по-старому

Код:
<style type="text/css">
ul.tabs {margin-left: 5%; margin-top:23px; margin-right:0;}
ul.tabs li {background: url('http://forumupload.ru/uploads/0003/44/61/4246-1-f.png') right; -moz-border-radius:10px 0 0 10px;
	-webkit-border-radius:10px 0 0 10px;
	border-radius:10px 0 0 10px;
float: right; width:100%; margin-top: 4px; padding:6px; padding-right:-4;}
ul.tabs li a {color: #999999; text-decoration: none;}
ul.tabs li:hover a, ul.tabs li:hover a:hover {text-decoration: none; color: #ffffff; width:100%;}
ul.tabs li:hover {margin-left: 3%; width: 97%;}
ul.tabs li.active {background:#534C49; margin-left: 5%; width: 95%;}
ul.tabs li.active a {text-decoration: none; color: #C2ED5B;}
.container .tabs ul, .container .tabs ul li {float: right;}
#pun-main table td, #pun-main table {border:none; border-spacing:0;}
</style>

Отредактировано Kven (Вт, 21 Дек 2010 20:48:30)

+1

23

  • Автор: rps
  • Стремясь к новому...
  • rps
  • Зарегистрирован: Вс, 12 Окт 2008
  • Сообщений: 22652
  • Уважение: +4738
  • Позитив: +3431
  • Пол: Мужской
  • Предупреждения: ‡ 1. 2. 3. ... 10!
  • Последний визит:
    Вс, 14 Мар 2021 21:42:57

Kven
Неплохо получилось, но единственное, что плохо смотрится - если в категории много форумов, тогда внизу, в блоке с ярлычками (или как их правильно назвать) названий категорий остаётся много пустого места.
http://s001.radikal.ru/i195/1012/77/4acb9c148e38t.jpg

+1

24

  • Автор: Kven
  • Заслуженный
  • Kven
  • Зарегистрирован: Сб, 24 Апр 2010
  • Сообщений: 35
  • Уважение: +9
  • Позитив: +3
  • Пол: Мужской
  • Последний визит:
    Вс, 7 Июл 2013 20:23:26
rps написал(а):

Неплохо получилось, но единственное, что плохо смотрится - если в категории много форумов, тогда внизу, в блоке с ярлычками (или как их правильно назвать) названий категорий остаётся много пустого места.

Спасибо.  :)  Подумывал кнопки сверху поставить, да большое их количество тоже всю картину испортило бы.
останавливаться не намерен =)

Да ещё и проблемка одна обнаружилась. В поисках быстрого способа достать название из категории, прыгнул к childNodes[1] и children[0]  :idea: , которые в части

Код:
+ b[f].children[0].innerText +

- взаимозаменяемы. Вот только мозилка понимать их ой как не хочет. В итоге выводит нежелательное undefined.
Так что я всё ещё в поисках решений. %-)

хотел спать, жестоко тупил и вообще заврался firstElementChild.innerHTML

Отредактировано Kven (Вт, 21 Дек 2010 20:47:14)

0

Страница:   1 2

Вы здесь » Единый форум поддержки » Корзина » Переключение между категориями