Эффектные вкладки табы - Tabulous.js (div и а хватает все)
Есть такой плагин вкладок http://jquerycards.com/ui/filter-sort/tabulous-js/
пример в работе http://codepen.io/anon/pen/MKXmxz но есть проблема если в контенте вкладок есть <div> <a> ломается работа, скрипт их тоже включает в работу |
runyugin,
а пример с проблемой? |
runyugin,
ау:-? |
|
runyugin,
http://codepen.io/anon/pen/BjVZgM если всё ок замените плагин на новую версию - по ссылке старая версия с исправлениями |
tabs модернизация tabulous
runyugin,
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex">
<style class="cp-pen-styles">html{
background: rgb(101, 92, 137);
font-family: "Lato", sans-serif;
}
a:active,a:focus {
outline: expression(hideFocus='true');
}
p {
margin-bottom: 20px;
}
#wrapper {
width: 960px;
margin: 0 auto;
margin-top: 100px;
}
#tabs,#tabs2,#tabs3,#tabs4,#tabs5 {
width: 500px;
margin: 0 auto;
margin-bottom: 40px;
}
#tabs li,#tabs2 li,#tabs3 li,#tabs4 li,#tabs5 li {
float: left;
margin-right: 2px;
list-style: none;
}
#tabs li a,#tabs2 li a,#tabs3 li a,#tabs4 li a,#tabs5 li a {
display: block;
padding: 17px 30px;
background: #544f6b;
text-decoration: none;
color: #8478B3;
}
#tabs li a:hover,#tabs2 li a:hover,#tabs3 li a:hover,#tabs4 li a:hover,#tabs5 li a:hover {
background: rgb(78, 74, 99);
}
#tabs_container {
padding: 40px;
overflow: hidden;
position: relative;
background: white;
}
#tabs_container div {
margin-right: 40px;
}
.transition {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.make_transist {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.hidescale {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
filter: alpha(opacity=0);
opacity: 0;
}
.showscale {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideleft {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.showleft {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideup {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.showup {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideflip {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: rotatey(-90deg) scale(1.1);
-moz-transform: rotatey(-90deg) scale(1.1);
-o-transform: rotatey(-90deg) scale(1.1);
-ms-transform: rotatey(-90deg) scale(1.1);
transform: rotatey(-90deg) scale(1.1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.showflip {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
-webkit-transform: rotatey(0deg) scale(1);
-moz-transform: rotatey(0deg) scale(1);
-o-transform: rotatey(0deg) scale(1);
-ms-transform: rotatey(0deg) scale(1);
transform: rotatey(0deg) scale(1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.tabulous_active {
background: white !important;
color: #655c89 !important;
}
.tabulousclear {
display: block;
clear: both;
}</style></head><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function($) {
$.fn.tabulous = function(options) {
var settings = $.extend({
effect: "scale"
}, options);
return this.each(function() {
var parent = $(this),
ul = $(">ul", parent),
links = $(">li a", ul),
block = $("> div", parent),
divs = $("> div", block),
hide = "hide" + settings.effect,
show = "show" + settings.effect;
ul.append('<span class="tabulousclear"></span>');
divs.css({
"position": "absolute",
"top": "40px"
}).addClass("make_transist");
block.addClass("transition");
links.each(function(indx, a) {
var a = $(a);
a.on("click", function(event) {
event.preventDefault();
links.not(a.addClass("tabulous_active")).removeClass("tabulous_active");
var div = divs.eq(indx);
divs.removeClass(show).not(div.addClass(show)).addClass(hide);
block.height(div.height())
})
}).eq(0).click()
})
}
})(jQuery);
</script>
<div id="wrapper">
<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo</p>
<div>Пролмй блок 1</div>
<div>Пролмй блок 2
<a href="#" title="">Промная ссылка 1</a>
</div>
<div>
<div>Пролмй блок 3 <a href="#" title="">Промная ссылка 2</a></div>
</div>
<p>Aenean tempor ullamcorper leo.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis</p>
<p> Vestibulum non ante</p>
</div>
</div>
</div>
<div id="tabs2">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p>Proin elit arcu</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend</p>
</div>
</div>
</div>
<div id="tabs3">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p>Proin elit arcu</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis</p>
</div>
</div>
</div>
<div id="tabs4">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p>Proin elit</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis.
</p>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('#tabs').tabulous({ effect: 'scale' });
$('#tabs2').tabulous({ effect: 'left' });
$('#tabs3').tabulous({ effect: 'up' });
$('#tabs4').tabulous({ effect: 'flip' });
});
</script>
</body></html>
|
пост 6 tabs модернизация tabulous -- изменены названия некоторых классов и параметров и переписан с сохранением прежней функциональности сам плагин ... лучше ничего не брать из старого чтобы не запутатся.
|
Супер! спасибо
|
А можно как-нибудь сделать $(window).resize в данном скрипте? На маленьких разрешениях экрана существует проблема с тем, что часть текста в блоках скрывается при первой загрузке страницы... при нажатии на вкладки все становится нормально.
|
Ilya_Ru,
может проблема в вашем css? делайте макет, что можно было увидеть. |
Отличия Вашего скрипта в 6 посте от моего только вот в этих строках:
#wrapper {
width: 100%;
margin: 0 auto;
margin-top: 100px;
}
#tabs,#tabs2,#tabs3,#tabs4,#tabs5 {
width: 100%;
margin: 0 auto;
margin-bottom: 40px;
}
и в наличии большого количества текста во вкладках. Откроем html страницу в браузере на весь экран, затем сделаем окно браузера в полэкрана, и наблюдаем, что часть текста уходит за пределы блока :(помогите, пожалуйста :( |
tabulous resize
Ilya_Ru,
(function($) {
$.fn.tabulous = function(options) {
var settings = $.extend({
effect: "scale"
}, options);
return this.each(function() {
var parent = $(this),
ul = $(">ul", parent),
links = $(">li a", ul),
block = $("> div", parent),
divs = $("> div", block),
hide = "hide" + settings.effect,
show = "show" + settings.effect;
ul.append('<span class="tabulousclear"></span>');
divs.css({
"position": "absolute",
"top": "40px"
}).addClass("make_transist");
block.addClass("transition");
links.each(function(indx, a) {
var a = $(a);
a.on("click", function(event) {
event.preventDefault();
links.not(a.addClass("tabulous_active")).removeClass("tabulous_active");
var div = divs.eq(indx);
divs.removeClass(show).not(div.addClass(show)).addClass(hide);
block.height(div.height())
})
}).eq(0).click();
$(window).resize(function() {
block.height(divs.filter("." + show).height())
})
})
}
})(jQuery);
|
Отлично, работает! :)
И еще вопрос, когда в коде ниже прописываешь "width": "100%" то некоторые браузеры вытягивают нижнюю границу.
divs.css({
"position": "absolute",
"top": "10px",
"width": "100%"
})
Можно как-нибудь это побороть? :) Хочу разместить по центру блока текст |
Ilya_Ru,
не понимаю зачем "width": "100%" и весь текст ниже |
Наверно я просто не правильно выразился :)
Если во вкладку вписать 1-2 слова и попытаться сделать их выравнивание по середине строки - текст будет все равно выравнен по левому краю. Приведу пример: ... <div id="tabs-1"> <p style="text-align:center">привет,<br> мир!</p> </div> ... - в этом случае как раз идёт странное выравнивание. Оно наверно связано с position:absolute Если же в скрипт прописать "wight":"100%", то в коде страницы, само собой, увидем это: ... <div class="класс_скрипта" style="position:absolute; top:40px; wight:100%" id="tabs-1"> <p style="text-align:center">привет,<br> мир!</p> </div> ... - данный вариант выравнивает текст по правильному, по центру, но, некоторые браузеры отображают большой отступ до нижней границы блока вкладки (скринсшот) http://hostingkartinok.com/show-imag...3fae0af279d193 Может быть Вы знаете как это победить? PS: за ошибки прошу прощения. Пишу с телефона. |
Ilya_Ru,
divs.css({
"position": "absolute",
"top": "10px", "right": 0, "left": 0, "text-align": "center", "margin": "0 auto"
}).addClass("make_transist");
|
Ilya_Ru,
правильнее в css добавить
.make_transist { right: 0; left: 0; text-align: center; margin: 0 auto; position: absolute;top:10px; }
а в скрипте оставить только
divs.addClass("make_transist");
|
рони,
Огромное спасибо :) Вы просто волшебник! :) |
рони,
Еще раз побеспокою. Если прописать .make_transist { right: 0; left: 0; text-align: center; margin: 0 auto; position: absolute;top:10px; }, то возвращается старая проблема со ссылками. А точнее ссылка становится не кликабельной во многих браузерах (Яндекс браузер, Мозилла, другие не проверял). Будто бы не ссылка вовсе, а обычный текст. И у меня почему-то возникает проблема с выравниванием вкладок, когда в одной из них текста много... Пытаюсь сделать, чтобы они все были одной высоты с выравниванием по центру, но, увы, что-то идет не так. Оговорюсь сразу, верстку пытаюсь сделать адаптивной. Отправляю все, что причастно ко вкладкам, в том числе кусочки своего css, где есть какое-либо отношение ко вкладкам. Может в чем-то там дело.
<!DOCTYPE html>
<html lang="en-US"><head>
<link rel="stylesheet" href="http://php-ilyaru.rhcloud.com/moysite/style-cleaned.css" media="screen">
<link rel="stylesheet" href="http://php-ilyaru.rhcloud.com/moysite/style.responsive-cleaned.css" media="all">
<link href='http://php-ilyaru.rhcloud.com/moysite/tabulous.css' rel='stylesheet' type='text/css'>
<script src="http://php-ilyaru.rhcloud.com/moysite/jquery.js"></script>
<script src="http://php-ilyaru.rhcloud.com/moysite/script.responsive.js"></script>
<script type="text/javascript">
(function($) {
$.fn.tabulous = function(options) {
var settings = $.extend({
effect: "scale"
}, options);
return this.each(function() {
var parent = $(this),
ul = $(">ul", parent),
links = $(">li a", ul),
block = $("> div", parent),
divs = $("> div", block),
hide = "hide" + settings.effect,
show = "show" + settings.effect;
ul.append('<span class="tabulousclear"></span>');
divs.css({
"position": "absolute",
"top": "10px",
"left":0,
"right":0
}).addClass("make_transist");
block.addClass("transition");
links.each(function(indx, a) {
var a = $(a);
a.on("click", function(event) {
event.preventDefault();
links.not(a.addClass("tabulous_active")).removeClass("tabulous_active");
var div = divs.eq(indx);
divs.removeClass(show).not(div.addClass(show)).addClass(hide);
block.height(div.height())
})
}).eq(0).click();
$(window).resize(function() {
block.height(divs.filter("." + show).height())
})
})
}
})(jQuery);</script>
<style>
@media (max-width: 520px) and (min-width: 200px) {
.art-content .art-postcontent-0 .layout-item-old-0 {
padding-right: 3px;
padding-left: 3px;
}
.art-post {
padding: 3px;
}
.art-footer {
padding: 10px 0px 0px 0px;
}
}
</style></head>
<body>
<div id="art-main">
<div>
<div class="art-layout-wrapper">
<div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell art-content">
<div id="wrapper">
<div id="tabs3">
<ul id="tabs_tabs">
<li><a href="#tabs-1" title="">текст, которому не хватает одной строки</a></li>
<li><a href="#tabs-2" title="">простой текст</a></li>
<li><a href="#tabs-3" title="">еще один простой текст</a></li>
<li><a href="#tabs-4" title="">заключительный текст</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p style="text-align:center">
здесь просто какой-то текст <a href="#" >ссылочка</a>.<br>
</p>
</div>
<div id="tabs-2">
<p>
текст по правому краю<br>
простой.
</p>
</div>
<div id="tabs-3">
<p>
тоже простой текст<br>
</p>
</div>
<div id="tabs-4">
<p>
заключительный текст<br>
для третьей вкладки</p>
</div></div></div></div></div></div></div></div></div>
<script>
$(function(){
$('#tabs').tabulous({ effect: 'scale' });
$('#tabs2').tabulous({ effect: 'left' });
$('#tabs3').tabulous({ effect: 'up' });
$('#tabs4').tabulous({ effect: 'flip' });
});
</script>
</body>
</html>
PS: надеюсь, ничего страшного, что ссылки на css и js дал со своего хостинга... |
Цитата:
Цитата:
|
Цитата:
Цитата:
Расстояние появляется от вкладок до блока... |
Ilya_Ru,
.showup,.showscale,.showleft,.showflip {
z-index: 10;
}
|
Цитата:
и добавьте run в пост №19 [HTML run][/HTML] |
Огромное человеческое спасибо! :) Вы как всегда очень сильно помогли :)
Вопрос с кликабельностью ссылки полностью решен :) Высоту li блоков смог выравнить при помощи скрипта, найденного в интернете:
function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".height > li > a"));
});
Применил к: <ul class="height"> ... </ul> Решение достаточно топорное. Но если более лучшее не будет найдено - придется оставить так :) Цитата:
|
Ilya_Ru,
встроил в плагин, использовать Цитата:
(function($) {
function setEqualHeight(columns) {
var tallestcolumn = 0;
columns.each(function() {
currentHeight = $(this).css({
height: ""
}).height();
if (currentHeight > tallestcolumn) tallestcolumn = currentHeight
});
columns.height(tallestcolumn)
}
$.fn.tabulous = function(options) {
var settings = $.extend({
effect: "scale"
}, options);
return this.each(function() {
var parent = $(this),
ul = $(">ul", parent),
links = $(">li a", ul),
block = $("> div", parent),
divs = $("> div", block),
hide = "hide" + settings.effect,
show = "show" + settings.effect;
ul.append('<span class="tabulousclear"></span>');
divs.css({
"position": "absolute",
"top": "10px",
"left": 0,
"right": 0
}).addClass("make_transist");
block.addClass("transition");
links.each(function(indx, a) {
var a = $(a);
a.on("click", function(event) {
event.preventDefault();
links.not(a.addClass("tabulous_active")).removeClass("tabulous_active");
var div = divs.eq(indx);
divs.removeClass(show).not(div.addClass(show)).addClass(hide);
block.height(div.height())
})
}).eq(0).click();
setEqualHeight(links);
$(window).resize(function() {
block.height(divs.filter("." + show).height());
setEqualHeight(links)
})
})
}
})(jQuery);
|
рони,
Появился новый (старый) глюк: Если открыть html страницу в полноэкранном режиме, а затем перейти в полэкрана - текст съедается как во вкладках, так и в div к ним причастным :( Если в ручную изменить размер окна - вкладки подстраиваются под текст UPD: вроде решил проблему банальной задержкой выполнения скрипта setTimeout(function() { ...скрипт... }, 1000); |
все равно иногда проскальзывает данный глюк... особенно заметно на мобильном при поворотах устройства
|
Ilya_Ru,
танцы с бубнами, поменять строки 45 и 44, или исключить строку 45. |
так и есть проблема :(
|
Проблема так и остается актуальной. Пока не дернишь окошко - вкладки не подстроются. Может в моем случае происходит какой-то конфликт со style.responsive.js? Если да, то быть может подскажите, как его исправить? http://php-ilyaru.rhcloud.com/moysite/moy.html
|
Ilya_Ru,
пробуйте
(function($) {
function setEqualHeight(columns) {
var tallestcolumn = 0;
columns.each(function() {
currentHeight = $(this).css({
height: ""
}).height();
if (currentHeight > tallestcolumn) tallestcolumn = currentHeight
});
columns.height(tallestcolumn)
}
$.fn.tabulous = function(options) {
var settings = $.extend({
effect: "scale"
}, options);
return this.each(function() {
var parent = $(this),
ul = $(">ul", parent),
links = $(">li a", ul),
block = $("> div", parent),
divs = $("> div", block),
hide = "hide" + settings.effect,
show = "show" + settings.effect;
ul.append('<span class="tabulousclear"></span>');
divs.css({
"position": "absolute",
"top": "10px",
"left": 0,
"right": 0
}).addClass("make_transist");
block.addClass("transition");
links.each(function(indx, a) {
var a = $(a);
a.on("click", function(event) {
event.preventDefault();
links.not(a.addClass("tabulous_active")).removeClass("tabulous_active");
var div = divs.eq(indx);
divs.removeClass(show).not(div.addClass(show)).addClass(hide);
//block.height(div.height())
timerHeight();
})
}).eq(0).click();
function timerHeight()
{
window.setTimeout(function() {
block.height(divs.filter("." + show).height())
},300)
}
setEqualHeight(links);
$(window).resize(function() {
timerHeight()
// block.height(divs.filter("." + show)[0].scrollHeight);
setEqualHeight(links)
})
})
}
})(jQuery);
|
рони,
Почти хорошо))). Высота самих вкладок только не адаптируется, пока окно не дернешь. Может в скрипте где ещё задержку надо сделать? ))) |
Скринсшот глюка: http://hostingkartinok.com/show-imag...3e2463bc40c4f7
|
Ilya_Ru,
ссылка с новым вариантом где? |
Прошу прощение, что не ссылкой, я не с компьютера(((. Заменил только текст во вкладке. Глюк ловлю только тогда, когда текст во вкладке в полноэкранном режиме умещается в одну строку, а при просмотре в пол экрана - нет.
<!DOCTYPE html>
<html lang="en-US" class="responsive responsive-tablet"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<link rel="stylesheet" href="http://php-ilyaru.rhcloud.com/moysite/style-cleaned.css" media="screen">
<link rel="stylesheet" href="http://php-ilyaru.rhcloud.com/moysite/style.responsive-cleaned.css" media="all">
<link href="http://php-ilyaru.rhcloud.com/moysite/tabulous.css" rel="stylesheet" type="text/css">
<script src="http://php-ilyaru.rhcloud.com/moysite/jquery.js"></script>
<script src="http://php-ilyaru.rhcloud.com/moysite/script.responsive.js"></script>
<script type="text/javascript">
(function($) {
function setEqualHeight(columns) {
var tallestcolumn = 0;
columns.each(function() {
currentHeight = $(this).css({
height: ""
}).height();
if (currentHeight > tallestcolumn) tallestcolumn = currentHeight
});
columns.height(tallestcolumn)
}
$.fn.tabulous = function(options) {
var settings = $.extend({
effect: "scale"
}, options);
return this.each(function() {
var parent = $(this),
ul = $(">ul", parent),
links = $(">li a", ul),
block = $("> div", parent),
divs = $("> div", block),
hide = "hide" + settings.effect,
show = "show" + settings.effect;
ul.append('<span class="tabulousclear"></span>');
divs.css({
"position": "absolute",
"top": "10px",
"left": 0,
"right": 0
}).addClass("make_transist");
block.addClass("transition");
links.each(function(indx, a) {
var a = $(a);
a.on("click", function(event) {
event.preventDefault();
links.not(a.addClass("tabulous_active")).removeClass("tabulous_active");
var div = divs.eq(indx);
divs.removeClass(show).not(div.addClass(show)).addClass(hide);
// block.height(div.height())
timerHeight();
})
}).eq(0).click();
function timerHeight()
{
window.setTimeout(function() {
block.height(divs.filter("." + show).height())
},300)
}
setEqualHeight(links);
$(window).resize(function() {
timerHeight()
// block.height(divs.filter("." + show)[0].scrollHeight);
setEqualHeight(links)
})
})
}
})(jQuery);</script>
<style>
ul {
width:100%;
}
li {
//margin:0 10px 20px 5px;
//padding:10px;
width:160px;
display:inline-block;
vertical-align:top;
*display:inline;
*zoom:1;
}
.licent {
width:100%;
//height:121px;
text-align:center;
display:table;
position:relative;
}
.licent span {
display:table;
vertical-align:middle;
text-align: center;
width: 100%;
}
.licent a {
display:table-cell;
vertical-align:middle;
text-align: center;
// width: 100%;
}
</style>
</head>
<body>
<div id="art-main">
<div>
<div class="art-layout-wrapper">
<div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell art-content">
<div id="wrapper">
<div id="tabs3">
<ul id="tabs_tabs">
<li><div class="licent"><span><a href="http://php-ilyaru.rhcloud.com/moysite/moy.html#tabs-1" title="" class="tabulous_active" style="height: 36px;"><span style="display: table;">текст в несколько строчек</span></a></span></div></li>
<li><div class="licent"><span><a href="http://php-ilyaru.rhcloud.com/moysite/moy.html#tabs-1" title="" style="height: 36px;"><span style="display: table;">простой текст</span></a></span></div></li>
<li><div class="licent"><span><a href="http://php-ilyaru.rhcloud.com/moysite/moy.html#tabs-1" title="" style="height: 36px;"><span style="display: table;">еще один простой текст</span></a></span></div></li>
<li><div class="licent"><span><a href="http://php-ilyaru.rhcloud.com/moysite/moy.html#tabs-1" title="" style="height: 36px;"><span style="display: table;">заключительный текст</span></a></span></div></li>
<span class="tabulousclear"></span></ul>
<div id="tabs_container" class="transition" style="height: 396px;">
<div id="tabs-1" class="make_transist showup" style="position: absolute; top: 10px; left: 0px; right: 0px;">
<p style="text-align:center">
здесь просто какой-то адски длинный текст, например вот этот: Много десятилетий люди не знали, что именно курят так называемые профессиональные историки в своих кабинетах, что обсуждают и на чем основываются. И потому - принимали Историю за настоящую науку, а историков - за ученых.
Катастрофа для Истории случилась всего полтора десятка лет назад, с развитием информационной революции, когда миллионы образованных людей смогли не только почитать все то, что историки выдавали за "научные данные", но и сравнить подобные "трактаты" с первоисточниками или своими знаниями в различных дисциплинах. И вот тут то и обнаружилось, что король-то голый!!!Что нет такой науки, как История, а есть дурацкая ахинея, которую некому и нечем защищать. И чем дальше — тем чаще тут и там случаются беседы, подобные вот таким:
Профессиональный историк: Рассказ о человеческой цивилизации я начну с самого начала, с появления людей в Европе. Когда-то, давным-давно сюда, в Европу переселились негры из Африки и основали здесь первые поселения, что подтверждается находками черепов негритянского типа...
Образованный человек: Постойте-постойте!!! Какие еще черепа?! На тысячу двести раскопанных у нас палеостоянок нашелся только 1 (один) череп, в котором удалось рассмотреть признаки негроидности! Да и тот оказался носителем славянской гаплогруппы «I» — той самой, которую по сей день носит каждый четвертый русский человек! Мы же не негры?
Профессиональный историк: Генетика — это лженаука! Генетики ничего не понимают в истории. Вы не должны верить генетикам, вы должны верить только нам, носителям высшей неоспоримой истины! К тому же с тех пор население русской равнины неоднократно менялось полностью. Народы приходили, уходили, снова приходили, исчезали, опять заселялись...
Образованный человек: Подождите, это с какой стати? Генетические исследования доказали, что праславянская гаплогруппа «I» зародилась именно здесь, в Европе, 50 тысяч лет назад и никогда никуда не исчезала! Мы и сегодня здесь живем. Каждый четвертый русский — это потомок сунгирцев, костенковцев, коренной житель в тысячах поколений. Плюс есть еще часть народов, подселившихся сюда в последние 3-4 тысячи лет, но никак праславян не вытеснивших и не заменивших.
Профессиональный историк: Да говорят же вам, что генетика — это лженаука! Славяне вообще родились всего тысячу лет назад. А до этого на Русской равнине жили монголоиды. Берем культуру ямочно-гребенчатой керамики эпохи неолита (кон. 4 - сер. 2-го тыс. до н. э.). Это почти вся Русская равнина. Поселения этой культуры всегда сопровождаются захоронениями представителей уральской расы, в фенотипе которой обнаруживают монголоидные элементы, понятно?
Образованный человек: Постойте-постойте!!! Какие еще захоронения?! В 56 найденных погребениях только 2 (два) черепа из погребений 19 и 20 (Сахтыш II) обозваны носящими «следы смягченной монголоидности». Да и по тем антропологи дали заключения, что черепа однозначно принадлежат европеоидам, с отклонениями в пределах нормы.
Профессиональный историк: Антропология — это лженаука! Антропологи ничего не смыслят <a href="http://php-ilyaru.rhcloud.com/moysite/moy.html#">ссылочка</a>.<br>
</p>
</div>
<div id="tabs-2" class="make_transist hideup" style="position: absolute; top: 10px; left: 0px; right: 0px;">
<p>
текст по правому краю<br>
простой.
</p>
</div>
<div id="tabs-3" class="make_transist hideup" style="position: absolute; top: 10px; left: 0px; right: 0px;">
<p>
тоже простой текст<br>
</p>
</div>
<div id="tabs-4" class="make_transist hideup" style="position: absolute; top: 10px; left: 0px; right: 0px;">
<p>
заключительный текст<br>
для третьей вкладки
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('#tabs').tabulous({ effect: 'scale' });
$('#tabs2').tabulous({ effect: 'left' });
$('#tabs3').tabulous({ effect: 'up' });
$('#tabs4').tabulous({ effect: 'flip' });
});
</script>
</div><div id="art-resp"><div id="art-resp-m"></div><div id="art-resp-t"></div></div></body></html>
|
Ilya_Ru,
(function($) {
function setEqualHeight(columns) {
var tallestcolumn = 0;
columns.each(function() {
currentHeight = $(this).css({
height: ""
}).height();
if (currentHeight > tallestcolumn) tallestcolumn = currentHeight
});
columns.height(tallestcolumn)
}
$.fn.tabulous = function(options) {
var settings = $.extend({
effect: "scale"
}, options);
return this.each(function() {
var parent = $(this),
ul = $(">ul", parent),
links = $(">li a", ul),
block = $("> div", parent),
divs = $("> div", block),
hide = "hide" + settings.effect,
show = "show" + settings.effect;
ul.append('<span class="tabulousclear"></span>');
divs.css({
"position": "absolute",
"top": "10px",
"left": 0,
"right": 0
}).addClass("make_transist");
block.addClass("transition");
links.each(function(indx, a) {
var a = $(a);
a.on("click", function(event) {
event.preventDefault();
links.not(a.addClass("tabulous_active")).removeClass("tabulous_active");
var div = divs.eq(indx);
divs.removeClass(show).not(div.addClass(show)).addClass(hide);
// block.height(div.height())
timerHeight();
})
}).eq(0).click();
function timerHeight()
{
window.setTimeout(function() { setEqualHeight(links)
block.height(divs.filter("." + show).height());
},300)
}
//setEqualHeight(links);
$(window).resize(function() {
timerHeight();
// block.height(divs.filter("." + show)[0].scrollHeight);
})
})
}
})(jQuery);
|
рони,Огромнейшее спасибо!))) Больших успехов тебе и удачи во всем! Спасибо за потраченное время на написание всего этого чуда.))) Скрипт идеален!))). Надеюсь, он пригодится ещё кому-нибудь.)))
|
Ilya_Ru,
:victory: |
| Часовой пояс GMT +3, время: 01:17. |