como certas ligações com deficiência de acordeão jQuery
https://stackoverflow.com/questions/1808134
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Atualmente, estou implementou um acordeão baseados jquery em uma seção de navegação, mas algumas partes da navegação não precisa ser parte do acordeão (se não existem categorias etc) eu estou apenas querendo saber se é possível desativar partes do acordeão ou não?
Tenho a sensação este poderia ser impossível, mas este site tem me surpreendeu antes:)
Muito obrigado.
Solução
Você pode colocar aulas sobre as coisas que você deseja desativar.
Em seguida, faça:
jQuery(".toDisable").live("click", function (){return false;});
ou algo similar
Outras dicas
truque anterior não funciona por causa da ordem de ligação de eventos, mas as seguintes obras:
// 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);
}
};
Sempre que você quiser ativar um guia, faça:
// Remove the class ui-state-disabled to the headers that you want to enable
$( ".whatyouwant" ).removeClass("ui-state-disabled");
É isso
Uma maneira simplista, talvez usando o método unbind:
$(".ui-state-disabled").unbind("click");
Adicionando o-ui-estado desativado nos elementos que você deseja desativar.
Como para um link para casa? Eu queria uma casa link denominado "regularmente" no topo do meu acordeão. Eu estou usando a versão 1.8 da interface do usuário do Google:
< script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">< / script >
Un-minified:
< script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js">< / script >
Eu cortei o acordeão um pouco em seu método _clickHandler (linha 5834-ish). Eu adicionei o seguinte código logo após o "var clicado =":
// this.headers.index == My First "Home" Accordion H3.
if(this.headers.index(event.currentTarget) == 0){window.location='/support';return;}
i adicionou a opção linkDisabled ao plugin. Desta forma, você pode definir uma classe para os links dentro do objeto do acordeão, que são deficientes. por exemplo:.
$(myAccordion).accordion({
linkDisabled: 'disabled' // note that the class is given without dot. e.g. not '.disabled', but 'disabled'
});
e aqui está o plugin reescrito:
/* ---------------------------------------------
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/jquery-en@googlegroups.com/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;
--- */
Eu tive um problema semelhante. Eu precisava de um acordeão 5 parte, mas as duas últimas partes não eram para ser acessível até que os três primeiros (que levou para diferentes ações) foram concluídas. Aqui está como eu lidei com isso (usando 2 acordeões separadas):
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();
}
Desta forma, montamos a segunda acordeão para que ele começa desativado. Além disso, é dada CSS class 'faded_out', que dá alguma opacidade e define o cursor do mouse para padrão para âncoras. Finalmente, quando um acordeão é clicado, ele define 'Ativar' para false no outro de modo a fechar o outro acordeão e fazer parecer que eles são parte da mesma. Isso funciona muito bem para mim como é.
P.S. Meu aplicativo é sobre carris, e, a fim de detectar ou não o segundo acordeão deve ser ativada (através da função ReleaseAccordion2), eu olho para uma classe ( 'completo') passado para o h3 de no primeiro acordeão (via ruby ??incorporado) .
Você pode usar o evento 'beforeActivate' para isso.
Adicionar uma classe desativar a seu elemento h3
<h3 class="accordionDisable disabledItemOne" >Title</h3>
Defina o abaixo função para o evento 'beforeActivate'. O objecto de cabeçalho pode ser acedido através do objecto 'ui.newHeader'. Teste se o cabeçalho tem classe 'accordionDisable', se for verdade, então retornar falso e ele vai parar a seção de acordeão de ativar.
$( "#your_accordion" ).accordion({
beforeActivate : function( event, ui ){
if( ui.newHeader.hasClass( 'accordionDisable' ) ){
return false;
}
}
});
Para ativar a seção accordian remover o 'accordionDisable' class
$( '.disabledItemOne' ).removeClass( 'accordianDisable' );
Use classes para a seção que você deseja incluir, e fazer um seletor CSS mais específico ao inicializar o acordeão.
A resposta de Marcgg parece estar no caminho certo. O que você poderia fazer é classe adicionar aos links que você deseja ativados no acordeão, obter a href deles e url, em seguida, navegar, definindo o window.location.
$("a.enlnk").live("click", function() {
var navigateToLink = $.trim(this.href);
if (navigateToLink) {
window.location.href = navigateToLink;
}
});
Eu tive o mesmo problema. Eu queria ficar em um div que não fazia parte do acordeão. Foi um div enquanto que os outros elementos do acordeão foram. Eu adicionei o cabeçalho: '' opção e isso impediu as classes de ser adicionado à div que eu tinha.
Eu não consigo obter as soluções dadas para trabalhar com a versão do jQuery UI Estou usando ATM (Versão 1.8)
Eu fiz encontrar uma outra solução;
$(".toDisable").each(function(){
$(this)
.addClass("ui-state-disabled")
.unbind("click");
});
$('.disabled').addClass('ui-state-disabled').on('click', function () {
return false;
});<h3 class="disabled">Payment Information </h3>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
