аккордеон jQuery, открывая поле на основе href
Я использую пропорциональный шрифт также. Они кажутся хорошими по тем же причинам, они работают в книгах и журналах: чем больше изменения между символами, тем легче это для мозга для различения их; и можно соответствовать больше на экране. Добавление отступа все еще хорошо работает: 6 ведущих пробелов все еще вдвое более широки, чем 3 ведущих пробелов.
я использую версию Джорджии, которую я взломал для создания нижнего регистра "l", меньше походят на цифру "1" и проводят наклонную черту через нуль.
2 ответа
Oh I see Jeff reported that the current UI version is broken, but I actually had a solution using the current version...
HTML
<div id="accordion">
<h3><a href="#branding">Branding</a></h3>
<div>
<p>Does your business have a</p>
</div>
<h3><a href="#print">Print</a></h3>
<div>
<p>Brochures</p>
</div>
</div>
Script
$(function(){
$('#accordion').accordion({
collapsible: true,
animated: 'slide',
autoHeight: false,
navigation: true
});
// open content that matches the hash
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
$('#accordion').find('a[href*='+ thash + ']').closest('h3').trigger('click');
})
I used a[href$=...] originally, but changed it to a[href*=...]... either will work
Update: the navigation option was removed from jQuery UI 1.10.0, so use this method:
CSS
.accordion {
position: relative;
}
.accordion .accordion-link {
position: absolute;
right: 1%;
margin-top: 16px;
z-index: 1;
width: 12px;
height: 12px;
background: url(link.png) center center no-repeat; /* approx 12x12 link icon */
}
Script
var hashId = 0,
$accordion = $('#accordion');
if (window.location.hash) {
$accordion.children('h3').each(function(i){
var txt = $(this).text().toLowerCase().replace(/\s+/g,'_');
this.id = txt;
if (txt === window.location.hash.slice(1)) {
hashId = i;
}
});
}
$accordion.accordion({
active: hashId,
animate: false,
heightStyle: 'content',
collapsible: true,
create: function( event, ui ) {
$accordion.children('h3').each(function(i){
$(this).before('<a class="accordion-link link" data-index="' + i + '" href="#' + this.id + '"></a>');
});
$accordion.find('.accordion-link').click(function(){
$accordion.accordion( "option", "active", $(this).data('index') );
});
}
});
Плохая новость заключается в том, что плагин аккордеона в настоящее время не работает (начиная с версии 1.7.2, , что вы можете видеть из тикета № 4653 ). Хорошая новость в том, что он исправлен, и вы уже можете скачать последнюю версию здесь - но будьте осторожны, это еще не стабильный выпуск!
Если вы используете код 1.8.1, навигация функция снова работает. Установка navigation: true заставит аккордеон автоматически открывать правильную панель при переходе по URL-адресу, соответствующему фрагменту навигации (чтобы ваш пример работал: services.html # branding ) .
Я думаю, вы также хотите добавить недостающий идентификатор в свой тег привязки брендинга, например:
<h3 id="branding"><a href="#branding">Branding</a></h3>
Наконец, вы можете использовать метод, описанный здесь , для обновления вашей страницы »