В настоящее время я реализую аккордеон на основе jquery в разделе навигации, но некоторые части навигации не обязательно должны быть частью аккордеона (если нет категорий и т. Д.), Я просто интересно, можно ли отключить части аккордеона или нет?как отключить определенные ссылки jquery accordion
я получаю чувство, что это может быть невозможно, но этот сайт удивил меня раньше :)
Спасибо очень много.
Вы можете поместить классы в то, что хотите отключить.
Затем сделайте:
jQuery(".toDisable").live("click", function(){return false;});
или что-то подобное
Привет, это звучит неплохо, но это также убивает ссылку, есть все равно, чтобы просто отключить разделы f ром, анимированный аккордеон, но сохраняющий функциональность? – David
Я бы сказал, что это может сработать: jQuery (". ToDisable"). Live ("click", function() {document.location = this.href;}); – marcgg
Используйте классы для раздела, который вы хотите включить, и создайте более специфичный селектор CSS при инициализации аккордеона.
Предыдущий трюк не работает из-за порядка привязки событий, но следующие работы:
// Add the class ui-state-disabled to the headers that you want disabled
$(".whatyouwant").addClass("ui-state-disabled");
// Now the hack to implement the disabling functionality
var accordion = $("#accordion").data("accordion");
accordion._std_clickHandler = accordion._clickHandler;
accordion._clickHandler = function(event, target) {
var clicked = $(event.currentTarget || target);
if (! clicked.hasClass("ui-state-disabled")) {
this._std_clickHandler(event, target);
}
};
Всякий раз, когда вы хотите активировать вкладку, сделать:
// Remove the class ui-state-disabled to the headers that you want to enable
$(".whatyouwant").removeClass("ui-state-disabled");
Вот оно
Perfect; это именно то, что мне нужно. Это лучше всего подходит для меня, поскольку он автоматически наследует правильный стиль для отключенных элементов из темы, позволяет мне переключать определенный раздел между включенными/отключенными по моей прихоти и упрощает использование этого для нескольких аккордеонов. FYI, я взял блок кода и обобщил его на метод, применяемый к любому аккордеон. Другие могут захотеть сделать то же самое. –
Мне пришлось изменить литерал 'data', чтобы это работало, т. Е., 'var accordion = $ (" #accordion ") .data (" uiAccordion ");'. Возможно, он изменился в обновлении где-то по линии. Я использую v1.10.3. – MrBoJangles
Как для домашней ссылки? Я хотел, чтобы главная ссылка была «регулярно» на вершине моего аккордеона. Я использую версию 1.8 UI от Google:
< script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script >
Un-минимизированы:
< script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script >
я взломал Аккордеон немного в методе _clickHandler (строка 5834-МОГ). Я добавил следующий код сразу после «var clicked =»:
// this.headers.index == My First "Home" Accordion H3.
if(this.headers.index(event.currentTarget) == 0){window.location='/support';return;}
Ответ Marcgg кажется на правильном пути. Что вы можете сделать, так это добавить класс к ссылкам, которые вы хотите включить в аккордеоне, получить от них href, а затем перейти по url, установив window.location.
$("a.enlnk").live("click", function() {
var navigateToLink = $.trim(this.href);
if (navigateToLink) {
window.location.href = navigateToLink;
}
});
У меня была та же проблема. Я хотел придерживаться дива, который не был частью аккордеона. Это был div, тогда как другие элементы на аккордеоне были. Я добавил параметр header: '', и это помешало добавлению классов в div, который у меня был.
Я добавил опцию linkDisabled к плагину. таким образом вы можете определить класс для ссылок внутри объекта аккордеона, которые отключены. например .:
$(myAccordion).accordion({
linkDisabled: 'disabled' // note that the class is given without dot. e.g. not '.disabled', but 'disabled'
});
и вот переписан плагин:
/* ---------------------------------------------
Nested Accordion v.1.4.7.3
Script to create 'accordion' functionality on a hierarchically structured content.
http://www.adipalaz.com/experiments/jquery/nested_accordion.html
Requires: jQuery v1.4.2+
Copyright (c) 2009 Adriana Palazova
Dual licensed under the MIT (http://www.adipalaz.com/docs/mit-license.txt) and GPL (http://www.adipalaz.com/docs/gpl-license.txt) licenses.
------------------------------------------------ */
(function($) {
//$.fn.orphans - http://www.mail-archive.com/[email protected]/msg43851.html
$.fn.orphans = function(){
var txt = [];
this.each(function(){$.each(this.childNodes, function() {
if (this.nodeType == 3 && $.trim(this.nodeValue)) txt.push(this)})}); return $(txt);};
$.fn.accordion = function(options) {
var o = $.extend({}, $.fn.accordion.defaults, options);
return this.each(function() {
var containerID = o.container ? '#' + this.id : '', objID = o.objID ? o.objID : o.obj + o.objClass,
Obj = o.container ? containerID + ' ' + objID : '#' + this.id,
El = Obj + ' ' + o.el,
hTimeout = null;
// build
if (o.head) $(Obj).find(o.head).addClass('h');
if (o.head) {
if ($(El).next('div:not(.outer)').length) {$(El).next('div:not(.outer)').wrap('<div class="outer" />');}
$(Obj + ' .h').each(function(){
var $this = $(this);
if (o.wrapper == 'div' && !$this.parent('div.new').length) {$this.add($this.next('div.outer')).wrapAll('<div class="new"></div>');}
});
}
$(El).each(function(){
var $node = $(this);
if ($node.find(o.next).length || $node.next(o.next).length) {
if ($node.find('> a').length) {
$node.find('> a').addClass("trigger");
} else {
var anchor = '<a class="trigger" href="#" />'
if (o.elToWrap) {
var $t = $node.orphans(), $s = $node.find(o.elToWrap);
$t.add($s).wrapAll(anchor);
} else {
$node.orphans().wrap(anchor);
}
}
} else {
$node.addClass('last-child');
if (o.lastChild && $node.find('> a').length) {$node.find('> a').addClass("trigger");}
}
});
// init state
$(El + ' a.trigger').closest(o.wrapper).find('> ' + o.next).not('.shownd').hide().closest(o.wrapper).find('a.open').removeClass('open').data('state', 0);
if (o.activeLink) {
var loc,
fullURL = window.location.href,
path = window.location.pathname.split('/'),
page = path[path.length-1];
(o.uri == 'full') ? loc = fullURL : loc = page;
$(Obj + ' a:not([href $= "#"])[href$="' + loc + '"]').addClass('active').parent().attr('id', 'current').closest(o.obj).addClass('current');
if (o.shift && $(Obj + ' a.active').closest(o.wrapper).prev(o.wrapper).length) {
var $currentWrap = $(Obj + ' a.active').closest(o.wrapper),
$curentStack = $currentWrap.nextAll().andSelf(),
$siblings = $currentWrap.siblings(o.wrapper),
$first = $siblings.filter(":first");
if (o.shift == 'clicked' || (o.shift == 'all' && $siblings.length)) {
$currentWrap.insertBefore($first).addClass('shownd').siblings(o.wrapper).removeClass('shownd');
}
if (o.shift == 'all' && $siblings.length > 1) {$curentStack.insertBefore($first);}
}
}
if (o.initShow) {
$(Obj).find(o.initShow).show().addClass('shownd')
.parents(Obj + ' ' + o.next).show().addClass('shownd').end()
.parents(o.wrapper).find('> a.trigger, > ' + o.el + ' a.trigger').addClass('open').data('state', 1);
if (o.expandSub) {$(Obj + ' ' + o.initShow).children(o.next).show().end().find('> a').addClass('open').data('state', 1);}
}
// event
if (o.event == 'click') {
var ev = 'click';
} else {
if (o.focus) {var f = ' focus';} else {var f = '';}
var ev = 'mouseenter' + f;
}
var scrollElem;
(typeof scrollableElement == 'function') ? (scrollElem = scrollableElement('html', 'body')) : (scrollElem = 'html, body');
// The event handler is bound to the "accordion" element
// The event is filtered to only fire when an <a class="trigger"> was clicked on.
$(Obj).delegate('a.trigger', ev, function(ev) {
var $thislink = $(this),
$thisLinkParent = $(this).parent(),
$thisWrapper = $thislink.closest(o.wrapper),
$nextEl = $thisWrapper.find('> ' + o.next),
$siblings = $thisWrapper.siblings(o.wrapper),
$trigger = $(El + ' a.trigger'),
$shownEl = $thisWrapper.siblings(o.wrapper).find('>' + o.next + ':visible'),
shownElOffset;
$shownEl.length ? shownElOffset = $shownEl.offset().top : shownElOffset = false;
function action(obj) {
if (($nextEl).length && $thislink.data('state') && (o.collapsible)) {
$thislink.removeClass('open');
$nextEl.filter(':visible')[o.hideMethod](o.hideSpeed, function() {$thislink.data('state', 0);});
}
if (($nextEl.length && !$thislink.data('state')) || (!($nextEl).length && $thislink.closest(o.wrapper).not('.shownd'))) {
if (!o.standardExpansible) {
$siblings.find('> a.open, >'+ o.el + ' a.open').removeClass('open').data('state', 0).end()
.find('> ' + o.next + ':visible')[o.hideMethod](o.hideSpeed);
if (shownElOffset && shownElOffset < $(window).scrollTop()) {$(scrollElem).animate({scrollTop: shownElOffset}, o.scrollSpeed);}
}
$thislink.addClass('open');
$nextEl.filter(':hidden')[o.showMethod](o.showSpeed, function() {$thislink.data('state', 1);});
}
if (o.shift && $thisWrapper.prev(o.wrapper).length) {
var $thisStack = $thisWrapper.nextAll().andSelf(),
$first = $siblings.filter(":first");
if (o.shift == 'clicked' || (o.shift == 'all' && $siblings.length)) {
$thisWrapper.insertBefore($first).addClass('shownd').siblings(o.wrapper).removeClass('shownd');
}
if (o.shift == 'all' && $siblings.length > 1) {$thisStack.insertBefore($first);}
}
}
if (o.event == 'click') {
if (!o.linkDisabled || !$thislink.hasClass(o.linkDisabled)) {
action($trigger);
}
if ($thislink.is('[href $= "#"]')) {
return false;
} else {
if ($.isFunction(o.retFunc)) {
return o.retFunc($thislink)
} else {
return true;
}
}
}
if (o.event != 'click') {
hTimeout = window.setTimeout(function() {
if (!o.linkDisabled || !$thislink.hasClass(o.linkDisabled)) {
action($trigger);
}
}, o.interval);
$thislink.click(function() {
$thislink.blur();
if ($thislink.attr('href')== '#') {
$thislink.blur();
return false;
}
});
}
});
if (o.event != 'click') {$(Obj).delegate('a.trigger', 'mouseleave', function() {window.clearTimeout(hTimeout); });}
/* -----------------------------------------------
// http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links:
-------------------------------------------------- */
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i < argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop() > 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop() > 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
};
return [];
};
/* ----------------------------------------------- */
});};
$.fn.accordion.defaults = {
container : true, // {true} if the plugin is called on the closest named container, {false} if the pligin is called on the accordion element
obj : 'ul', // the element which contains the accordion - 'ul', 'ol', 'div'
objClass : '.accordion', // the class name of the accordion - required if you call the accordion on the container
objID : '', // the ID of the accordion (optional)
wrapper :'li', // the common parent of 'a.trigger' and 'o.next' - 'li', 'div'
el : 'li', // the parent of 'a.trigger' - 'li', '.h'
head : '', // the headings that are parents of 'a.trigger' (if any)
next : 'ul', // the collapsible element - 'ul', 'ol', 'div'
initShow : '', // the initially expanded section (optional)
expandSub : true, // {true} forces the sub-content under the 'current' item to be expanded on page load
showMethod : 'slideDown', // 'slideDown', 'show', 'fadeIn', or custom
hideMethod : 'slideUp', // 'slideUp', 'hide', 'fadeOut', or custom
showSpeed : 400,
hideSpeed : 800,
scrollSpeed : 600, //speed of repositioning the newly opened section when it is pushed off screen.
activeLink : true, //{true} if the accordion is used for site navigation
event : 'click', //'click', 'hover'
focus : true, // it is needed for keyboard accessibility when we use {event:'hover'}
interval : 400, // time-interval for delayed actions used to prevent the accidental activation of animations when we use {event:hover} (in milliseconds)
collapsible : true, // {true} - makes the accordion fully collapsible, {false} - forces one section to be open at any time
standardExpansible : false, //if {true}, the functonality will be standard Expand/Collapse without 'accordion' effect
lastChild : true, //if {true}, the items without sub-elements will also trigger the 'accordion' animation
shift: false, // false, 'clicked', 'all'. If 'clicked', the clicked item will be moved to the first position inside its level,
// If 'all', the clicked item and all following siblings will be moved to the top
elToWrap: null, // null, or the element, besides the text node, to be wrapped by the trigger, e.g. 'span:first'
uri : 'full', //
retFunc: null, //
linkDisabled: '' // add disabled class to link to not don't add event
};
/* ---------------------------------------------
Feel free to remove the following code if you don't need these custom animations.
------------------------------------------------ */
//credit: http://jquery.malsup.com/fadetest.html
$.fn.slideFadeDown = function(speed, callback) {
return this.animate({opacity: 'show', height: 'show'}, speed, function() {
if (jQuery.browser.msie) { this.style.removeAttribute('filter'); }
if (jQuery.isFunction(callback)) { callback(); }
});
};
$.fn.slideFadeUp = function(speed, callback) {
return this.animate({opacity: 'hide', height: 'hide'}, speed, function() {
if (jQuery.browser.msie) { this.style.removeAttribute('filter'); }
if (jQuery.isFunction(callback)) { callback(); }
});
};
/* --- end of the optional code --- */
})(jQuery);
///////////////////////////
// The plugin can be called on the ID of the accordion element or on the ID of its closest named container.
// If the plugin is called on a named container, we can initialize all the accordions residing in a given section with just one call.
// EXAMPLES:
/* ---
$(function() {
// If the closest named container = #container1 or the accordion element is <ul id="subnavigation">:
/// Standard nested lists:
$('#container1').accordion(); // we are calling the plugin on the closest named container
$('#subnavigation').accordion({container:false}); // we are calling the plugin on the accordion element
// this will expand the sub-list with "id=current", when the accordion is initialized:
$('#subnavigation').accordion({container:false, initShow : "#current"});
// this will expand/collapse the sub-list when the mouse hovers over the trigger element:
$('#container1').accordion({event : "hover", initShow : "#current"});
// If the closest named container = #container2
/// Nested Lists + Headings + DIVs:
$('#container2').accordion({el: '.h', head: 'h4, h5', next: 'div'});
$('#container2').accordion({el: '.h', head: 'h4, h5', next: 'div', initShow : 'div.outer:eq(0)'});
/// Nested DIVs + Headings:
$('#container2').accordion({obj: 'div', wrapper: 'div', el: '.h', head: 'h4, h5', next: 'div.outer'});
$('#container2').accordion({objID: '#acc2', obj: 'div', wrapper: 'div', el: '.h', head: 'h4, h5', next: 'div.outer', initShow : '.shownd', shift: 'all'});
});
/// We can globally replace the defaults, for example:
$.fn.accordion.defaults.initShow = "#current";
--- */
/// Example options for Hover Accordion:
/* ---
$.fn.accordion.defaults.container=false;
$.fn.accordion.defaults.event="hover";
$.fn.accordion.defaults.focus=false; // Optional. If it is possible, use {focus: true}, since {focus: false} will break the keyboard accessibility
$.fn.accordion.defaults.initShow="#current";
$.fn.accordion.defaults.lastChild=false;
--- */
Я действительно не тестировал его при любых условиях. поэтому, если опция disableLink не работает должным образом, сообщите здесь. –
Я не могу показаться, чтобы получить соответствующие решения для работы с версией JQuery UI Я использую ATM (Version 1.8)
Я нашел другое решение;
$(".toDisable").each(function(){
$(this)
.addClass("ui-state-disabled")
.unbind("click");
});
У меня была аналогичная проблема. Мне нужен аккордеон на 5 частей, но последние две части не были доступны до тех пор, пока не будут выполнены первые три (которые вызвали разные действия). Вот как я справилась с ней (с использованием 2 отдельных аккордеоны):
HTML:
<div id="accordion_1">
<h3 id="title1"><a href="#">Content for Title 1</a></h3>
<div>Content for Section 1</div>
<h3 id="title2"><a href="#">Content for Title 2</a></h3>
<div>Content for Section 2</div>
<h3 id="title3"><a href="#">Content for Title 3</a></h3>
<div>Content for Section 3</div>
</div>
<div id="accordion_2" class="faded_out">
<h3><a href="#">Content for Title 4</a></h3>
<div>Content for Section 4</div>
<h3><a href="#">Content for Title 5</a></h3>
<div>Content for Section 5</div>
</div>
Javascript:
$(document).ready(function(){
$('#accordion_1').accordion({
active:false,
collapsible:true
});
$('#accordion_1').click(function(){
$(this).siblings().accordion('activate',false);
});
$('#accordion_2').accordion({
active:false,
disabled:true,
collapsible:true,
});
$('#accordion_2').click(function(){
$(this).siblings().accordion('activate',false);
});
function ReleaseAccordion2(){
if($('h3#title1').hasClass('complete') && $('h3#title2').hasClass('complete') && $('h3#title3').hasClass('complete')){
$('#accordion_2').accordion('enable');
$('#accordion_2').removeClass('faded_out');
}
}
ReleaseAccordion2();
}
Таким образом, мы создали вторую гармошку так, что она начинается отключена. Более того, ему предоставляется CSS-класс 'faded_out', который дает некоторую непрозрачность и устанавливает указатель мыши на значение по умолчанию для якорей. Наконец, когда нажата аккордеон, он устанавливает «активировать» на ложь на другом, чтобы закрыть другой аккордеон и заставить его казаться, что они являются частью одного и того же. Это очень хорошо для меня, как есть.
P.S. Мое приложение находится на рельсах и для определения того, нужно ли включить второй аккордеон (через функцию ReleaseAccordion2), я ищу класс («полный»), переданный h3 в первом аккордеоне (через встроенный рубин) ,
упрощенный способ, может быть, с помощью UNBIND методы:
$(".ui-state-disabled").unbind("click");
Добавления UI-состояния-инвалида в элементах, которые вы хотите отключить.
Для этого можно использовать событие beforeActivate.
Добавить отключаем класс в h3 элемент
<h3 class="accordionDisable disabledItemOne" >Title</h3>
Установите ниже функцию событию «beforeActivate». Объект заголовка можно получить через объект «ui.newHeader». Проверьте, имеет ли заголовок класс «accordionDisable», если true, а затем возвращает false, и он перестанет активировать секцию аккордеона.
$("#your_accordion").accordion({
beforeActivate : function( event, ui ){
if(ui.newHeader.hasClass('accordionDisable')){
return false;
}
}
});
Чтобы активировать Accordian раздел удалить класс в 'accordionDisable'
$('.disabledItemOne').removeClass('accordianDisable');
$('.disabled').addClass('ui-state-disabled').on('click', function() {
return false;
});<h3 class="disabled">Payment Information </h3>
решили проблему сейчас с помощью пользовательского аккордеоне, все равно спасибо за помощь и marcgg ваш ответ был полезен. – David