Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jQuery accordion все закладки закрыты (https://javascript.ru/forum/jquery/13224-jquery-accordion-vse-zakladki-zakryty.html)

BoB 21.11.2010 16:25

jQuery accordion все закладки закрыты
 
Добрый день.

Сделал аккордион на jQuery, по этому уроку. http://www.madeincima.eu/blog/jquery...asy-accordion/

Я хотел бы чтобы вначале, когда страничку сайта только открыли, все закладки были закрыты, и находились по середине экрана.
Возможно ли такое сделать?

Спасибо

monolithed 21.11.2010 18:48

Цитата:

Сообщение от BoB
Я хотел бы чтобы вначале, когда страничку сайта только открыли, все закладки были закрыты

они и так закрыты, а если скрыть еще и последную, то это не будет интуитивно понятно что это такое вообще.
Цитата:

Сообщение от BoB
и находились по середине экрана.

в CSS:
#some { /* ваш идентификатор*/
   margin: 0px auto;
}

BoB 21.11.2010 19:08

Цитата:

Сообщение от monolithed (Сообщение 80095)
они и так закрыты, а если скрыть еще и последную, то это не будет интуитивно понятно что это такое вообще.

в CSS:
#some { /* ваш идентификатор*/
   margin: 0px auto;
}

Хотелось бы максимально приблизиться к варианту как здесь
http://www.2u.ru/templates/31449.html

monolithed 21.11.2010 19:27

Это не аккордион, а табы:

<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>

BoB 21.11.2010 19:30

Вложений: 1
Есть еще один острый вопрос, скрипт не оптимизирован под оперу, я дописал строчку
-o-transform: rotate(-90deg);


Но теперь страничка очень странно себя ведет в опере.

Ладно что все съехало, с этим я разобрался, но что нету inactive и active картинок, это проблема :/

BoB 22.11.2010 21:09

Все разобрался с Оперой, теперь все нормально=)

Цитата:

Это не аккордион, а табы:
А можно чтобы на аккордион вначале все вкладки были скрыты как на флешке?

btx 07.11.2011 12:46

Скрытие всех вкладок
 
Для того что бы все вкладки были закрыты нужно к объекту (где подключен аккордеон) применить функцию activate –
--
.accordion(«activate» , index) с помощью этого метода можно программно активировать необходимые секции. Аргумент index может быть номером секции (отсчет ведется от 0) или селектором jQuery, который выберет необходимый элемент. Передавая значение -1 можно закрыть все секции (только в случае использования опции collapsible:true).
--

Итого может получится что то вроде:
$( "#accordion" ).accordion({
    collapsible: true
}).accordion("activate", -1);

donote 04.03.2012 17:09

Отслеживание якоря
 
Каким образом можно отследить якорь, чтобы открыть нужную закладку и при этом не срабатывал «collapsible»?

Дано:
$( "#accordion" ).accordion({
collapsible: true, 
autoHeight: false, 
icons: false, 
navigation: true,}).accordion("activate", -1);


Изначально все закладки закрыты. Работает «collapsible».
Необходимо чтобы при заходе по URL с якорем #tab2 - открывалась вторая закладка, но она закрывается, т.к. работает «collapsible».

Если отключить «collapsible», то переход по якорю работает. но когда заходишь без якоря - первая вкладка открыта.

В идеале представляется следующая картина: заходишь на страницу - все закладки закрыты и ты можешь поочередно их открывать и закрывать, но когда ссылаешься с другой страницы с якорем на эту страницу -- закладка должна быть открыта, та которая помечена якорем.

Как здесь быть?

donote 04.03.2012 19:52

Все, спасибо
Надо было так
$( "#accordion" ).accordion({
		active: false,
		collapsible: true, 
		autoHeight: false, 
		icons: false, 
		navigation: true,
		header: '.sl'
	});
	
	$(".sl").click(function(event){
		  window.location.hash=this.hash;
	});

aki-man 22.03.2013 15:27

всё зависит от версии UI - в старых надо писать одно, в новых - другое.. Это выводит


Часовой пояс GMT +3, время: 19:16.