Форум

sugoj · #1 (**permalink**) 17.05.2011, 15:22

Очень хочется на свой сайт поставить, вот такую вот крутилку для социальных плагинов, как на inosmi.ru

Там фишка в том, что при нажатии на кнопки соц сетей таблица переключается мгновенно.

Есть ли готовое решение или что-то подобное, что можно реализовать с минимальными переделками? И подскажите как называется такая панель есть ли у неё устойчивое название, а только "Слайдеры" похожи на это.

poorking · #2 (**permalink**) 17.05.2011, 15:36

Все эти плагины общедоступны, нужно только сверстать пачку дивов с разным z-Index (в них отображаются виджеты), и при нажатии на вкладку менять z-Index у соответствующего дива

trikadin · #3 (**permalink**) 17.05.2011, 15:45

Называется эта штука вкладки. Или табы.

Skipp · #4 (**permalink**) 17.05.2011, 15:51

здесь не надо искать готовые решения
вам тут только помогут по программированию
а за готовыми решениями в раздел работа

trikadin · #5 (**permalink**) 17.05.2011, 15:56

Skipp,
пока не вижу поводов для укора. Человек спросил, а не попросил. Это разница. Нужно ему париться самому, чтобы написать такое, или это будет изобретением велосипеда, и всё уже сделано до него.

Skipp · #6 (**permalink**) 17.05.2011, 16:03

Сообщение от trikadin

Нужно ему париться самому

А кто парится то должен?

Сообщение от trikadin

или это будет изобретением велосипеда, и всё уже сделано до него

Он сам превёл готовое решение, которое находится на inosmi.

trikadin · #7 (**permalink**) 17.05.2011, 16:09

Сообщение от Skipp

А кто парится то должен?

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

Сообщение от Skipp

Он сам превёл готовое решение, которое находится на inosmi.

И правда.

poorking · #8 (**permalink**) 17.05.2011, 16:26

sugoj,
вот если угодно простейший пример

<!DOCTYPE html>

<html><head>

<meta charset = "utf-8" />

<style type = "text/css">
*{
	margin: 0px;
	padding: 0px;
	font-size: 8pt;
}

.wrapper{
	width: 100px;
	border: 1px solid gray;
	margin: 0px auto;
}
.tabs{
	line-height: 2em;
}

.tab{
	padding: 0px 5px;
	cursor: pointer;
	display: inline-block;
	
}
.fb{
	background-color: #5af;
	color: #fff;
}

.tw{
	color: #def;
	background-color: #8cf;
}
.chat{
	background-color: #fff;
}
.widget{
	height: 200px;
	position: relative;
}
.widget .fb, .widget .tw, .widget .chat{
	position: absolute;
	width: 100%;
	height: 100%;
	left:0px;
	top: 0px;
}

</style>

</head><body>
<div class = "wrapper">
<div class = "tabs">
	<div id = "#tab_tw" class = "tab tw">twitter</div><div id = "#tab_fb" class = "tab fb">fb</div><div id = "#tab_chat" class = "tab chat">чат</div>
</div>
<div class = "widget" id = "#IDDDD">
	<div class = "fb" id = "#wid_fb">facebook widget</div>
	<div class = "tw"id = "#wid_tw">twitter widget</div>
	<div class = "chat" id = "#wid_chat">my chat</div>
</div>

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

<script type = "text/javascript">
(function(){
	function $(id){
		return document.getElementById(id);
	}
	
	function placeTop(id){
		return function(){
			var elem = $(id);			
			elem.parentNode.appendChild(elem);
		}
	}
	
	$("#tab_tw").onclick = placeTop("#wid_tw");
	$("#tab_fb").onclick = placeTop("#wid_fb");
	$("#tab_chat").onclick = placeTop("#wid_chat");
	
	
}())
</script>

sugoj · #9 (**permalink**) 19.05.2011, 11:08

poorking спасибо огромное, то что как раз надо дальше думаю своими руками я думаю хватит сил переделать.

trikadin Спасибо =) Ино, просто как пример указал, может у кого были готовые уже. =)

Форум

Справочник

Discord чат

Курсы javascript