jQuery accordion все закладки закрыты
Добрый день.
Сделал аккордион на jQuery, по этому уроку. http://www.madeincima.eu/blog/jquery...asy-accordion/ Я хотел бы чтобы вначале, когда страничку сайта только открыли, все закладки были закрыты, и находились по середине экрана. Возможно ли такое сделать? Спасибо |
Цитата:
Цитата:
#some { /* ваш идентификатор*/
margin: 0px auto;
}
|
Цитата:
http://www.2u.ru/templates/31449.html |
Это не аккордион, а табы:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#tabs {margin: 0px auto;overflow: hidden;width: 204px;}
#tabs div {border-left: 1px solid #DDD;overflow: hidden;width: 205px;height: 22px;}
div a {display: block;float: left;width: 48px;border: 1px solid #DDD;border-left: none;text-align: center;text-decoration: none;}
div a:hover {background: #FBFBFB;}
ul {display: block;margin: 0px;padding: 0px;width: auto;height: auto;}
li {border: 1px solid #DDD;border-top: none;display: none;float: left;list-style-type: none;width: 195px;height: 50px;}
.display, .first {background: #EBFAFE;display: block;}
</style>
<script type="text/javascript">
$(function(){
$('div a').each(function(i){
$(this).click(function(){
$(this).toggleClass('display').siblings().removeClass('display first');
$('ul').each(function(){
$(this).find('li:eq('+i+')').toggleClass('display').siblings().removeClass('display first');
});
});
});
});
</script>
<div id="tabs">
<div>
<a class="first" href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
</div>
<ul>
<li class="first">#text_tab_1</li><li>#text_tab_2</li><li>#text_tab_3</li><li>#text_tab_4</li>
</ul>
</div>
|
Вложений: 1
Есть еще один острый вопрос, скрипт не оптимизирован под оперу, я дописал строчку
-o-transform: rotate(-90deg); Но теперь страничка очень странно себя ведет в опере. Ладно что все съехало, с этим я разобрался, но что нету inactive и active картинок, это проблема :/ |
Все разобрался с Оперой, теперь все нормально=)
Цитата:
|
Скрытие всех вкладок
Для того что бы все вкладки были закрыты нужно к объекту (где подключен аккордеон) применить функцию activate –
-- .accordion(«activate» , index) с помощью этого метода можно программно активировать необходимые секции. Аргумент index может быть номером секции (отсчет ведется от 0) или селектором jQuery, который выберет необходимый элемент. Передавая значение -1 можно закрыть все секции (только в случае использования опции collapsible:true). -- Итого может получится что то вроде:
$( "#accordion" ).accordion({
collapsible: true
}).accordion("activate", -1);
|
Отслеживание якоря
Каким образом можно отследить якорь, чтобы открыть нужную закладку и при этом не срабатывал «collapsible»?
Дано:
$( "#accordion" ).accordion({
collapsible: true,
autoHeight: false,
icons: false,
navigation: true,}).accordion("activate", -1);
Изначально все закладки закрыты. Работает «collapsible». Необходимо чтобы при заходе по URL с якорем #tab2 - открывалась вторая закладка, но она закрывается, т.к. работает «collapsible». Если отключить «collapsible», то переход по якорю работает. но когда заходишь без якоря - первая вкладка открыта. В идеале представляется следующая картина: заходишь на страницу - все закладки закрыты и ты можешь поочередно их открывать и закрывать, но когда ссылаешься с другой страницы с якорем на эту страницу -- закладка должна быть открыта, та которая помечена якорем. Как здесь быть? |
Все, спасибо
Надо было так
$( "#accordion" ).accordion({
active: false,
collapsible: true,
autoHeight: false,
icons: false,
navigation: true,
header: '.sl'
});
$(".sl").click(function(event){
window.location.hash=this.hash;
});
|
всё зависит от версии UI - в старых надо писать одно, в новых - другое.. Это выводит
|
| Часовой пояс GMT +3, время: 12:42. |