Есть ли готовое решение?
Очень хочется на свой сайт поставить, вот такую вот крутилку для социальных плагинов, как на inosmi.ru
![]() Там фишка в том, что при нажатии на кнопки соц сетей таблица переключается мгновенно. Есть ли готовое решение или что-то подобное, что можно реализовать с минимальными переделками? И подскажите как называется такая панель есть ли у неё устойчивое название, а только "Слайдеры" похожи на это. |
Все эти плагины общедоступны, нужно только сверстать пачку дивов с разным z-Index (в них отображаются виджеты), и при нажатии на вкладку менять z-Index у соответствующего дива
|
Называется эта штука вкладки. Или табы.
|
здесь не надо искать готовые решения
вам тут только помогут по программированию а за готовыми решениями в раздел работа |
Skipp,
пока не вижу поводов для укора. Человек спросил, а не попросил. Это разница. Нужно ему париться самому, чтобы написать такое, или это будет изобретением велосипеда, и всё уже сделано до него. |
Цитата:
Цитата:
|
Цитата:
Цитата:
|
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>
|
poorking спасибо огромное, то что как раз надо дальше думаю своими руками я думаю хватит сил переделать.
trikadin Спасибо =) Ино, просто как пример указал, может у кого были готовые уже. =) |
| Часовой пояс GMT +3, время: 14:36. |