2009-11-27 3 views
7

Je suis actuellement implémenté un accordéon basé jquery sur une section de navigation, mais certaines parties de la navigation n'ont pas besoin de faire partie de l'accordéon (s'il n'y a pas de catégories etc) je suis Je me demandais simplement s'il est possible de désactiver des parties de l'accordéon ou non?comment désactiver certains liens de l'accordéon jquery

j'ai le sentiment que cela pourrait être impossible, mais ce site m'a surpris avant :)

Merci beaucoup.

+0

ont résolu le problème maintenant en utilisant un accordéon personnalisé, merci quand même pour l'aide et marcgg votre réponse a été utile .. – David

Répondre

4

Vous pouvez mettre des classes sur les objets que vous souhaitez désactiver.

Effectuez ensuite:

jQuery(".toDisable").live("click", function(){return false;}); 

ou quelque chose de similaire

+0

Salut, ça sonne bien mais ça tue aussi le lien, y at-il de toute façon juste pour désactiver les sections f être animé par l'accordéon mais conserver ses fonctionnalités? – David

+0

Je dirais que quelque chose comme ça pourrait fonctionner: jQuery (". ToDisable"). Live ("click", function() {document.location = this.href;}); – marcgg

0

Utilisez des classes pour la section que vous souhaitez inclure et créez un sélecteur CSS plus spécifique lors de l'initialisation de l'accordéon.

21

astuce précédente ne fonctionne pas à cause de l'ordre de liaison des événements, mais les travaux suivants:

// 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); 
    } 
}; 

Chaque fois que vous voulez activer un onglet, faire:

// Remove the class ui-state-disabled to the headers that you want to enable 
$(".whatyouwant").removeClass("ui-state-disabled"); 

C'est tout

+1

Parfait; c'est exactement ce dont j'avais besoin. Cela fonctionne mieux pour moi car, il hérite automatiquement du style approprié pour les éléments désactivés du thème, me permet de basculer une section particulière entre activé/désactivé à mon gré, et le rend facile à utiliser pour plusieurs accordéons. Pour info, j'ai pris le bloc de code et l'ai généralisé en une méthode à appliquer à n'importe quel accordéon. D'autres voudront peut-être faire de même. –

+2

J'ai dû changer le littéral 'data' pour que cela fonctionne, c'est-à-dire, 'var accordéion = $ (" #accordion ") .data (" uiAccordion ");'. Peut-être que cela a changé dans une mise à jour quelque part sur la ligne. J'utilise v1.10.3. – MrBoJangles

1

Comme pour un lien d'accueil? Je voulais un lien vers la maison de style "régulièrement" au sommet de mon accordéon. J'utilise la version de l'interface utilisateur de Google 1.8:

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

Je piraté l'accordéon un peu dans sa méthode _clickHandler (ligne 5834-ish). J'ai ajouté le code suivant juste après le "var clicked =":

// this.headers.index == My First "Home" Accordion H3. 

if(this.headers.index(event.currentTarget) == 0){window.location='/support';return;} 
0

La réponse de Marcgg semble être sur la bonne voie. Ce que vous pouvez faire est d'ajouter une classe aux liens que vous voulez activer dans l'accordéon, obtenir le href de leur part, puis naviguer dans l'url en définissant le window.location.

$("a.enlnk").live("click", function() { 
    var navigateToLink = $.trim(this.href); 
    if (navigateToLink) { 
     window.location.href = navigateToLink; 
    } 
}); 
0

J'ai eu le même problème. Je voulais coller dans un div qui ne faisait pas partie de l'accordéon. C'était un div alors que les autres éléments de l'accordéon l'étaient. J'ai ajouté l'en-tête: '' option et ceci a empêché les classes d'être ajoutées à la div que j'avais.

1

J'ai ajouté l'option linkDisabled au plugin. De cette façon, vous pouvez définir une classe pour les liens à l'intérieur de l'objet accordéon, qui sont désactivés. .: par exemple

$(myAccordion).accordion({ 
    linkDisabled: 'disabled' // note that the class is given without dot. e.g. not '.disabled', but 'disabled' 
}); 

et voici le plugin réécrite:

/* --------------------------------------------- 
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; 
--- */ 
+0

Je ne l'ai pas vraiment testé dans toutes les conditions. donc si l'option disableLink ne fonctionne pas correctement, veuillez nous le signaler ici. –

0

Je ne peux pas sembler obtenir les solutions données pour travailler avec la version de jQuery UI J'utilise ATM (version 1.8)

J'ai trouvé une autre solution;

$(".toDisable").each(function(){ 
    $(this) 
     .addClass("ui-state-disabled") 
     .unbind("click"); 
}); 
0

J'ai eu un problème similaire. J'avais besoin d'un accordéon en 5 parties, mais les deux dernières parties ne devaient pas être accessibles avant que les trois premiers (qui ont conduit à des actions différentes) aient été achevés. Voici comment je manipulaient (en utilisant 2 accordéons séparés):

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(); 
    } 

De cette façon, nous avons mis en place la deuxième accordéon pour qu'il commence désactivé. De plus, on lui donne une classe CSS 'faded_out' qui donne une certaine opacité et positionne le curseur de la souris par défaut pour les ancres. Enfin, lorsqu'on clique sur l'un ou l'autre des accordéons, on place 'activate' sur false de l'autre pour fermer l'autre accordéon et donner l'impression qu'ils font partie du même accordéon. Cela fonctionne très bien pour moi tel quel.

P.S. Mon application est sur rails, et afin de détecter si oui ou non le second accordéon doit être activé (via la fonction ReleaseAccordion2), je cherche une classe ('complete') passée aux h3 dans le premier accordéon (via ruby ​​embarqué) .

6

Une façon simpliste en utilisant peut-être la méthode unbind:

$(".ui-state-disabled").unbind("click");

Ajout des invalides ui-état dans les éléments que vous souhaitez désactiver.

1

Vous pouvez utiliser l'événement 'beforeActivate' pour cela.

Ajouter une classe à désactiver votre élément h3

<h3 class="accordionDisable disabledItemOne" >Title</h3> 

Définir la fonction ci-dessous pour l'événement « beforeActivate ». L'objet d'en-tête est accessible via l'objet 'ui.newHeader'. Testez si l'en-tête a la classe 'accordéonDisable', si la valeur est true, puis renvoyez false et cela arrêtera l'activation de la section accordéon.

$("#your_accordion").accordion({ 

beforeActivate : function( event, ui ){ 

    if(ui.newHeader.hasClass('accordionDisable')){ 

     return false; 

    } 
} 
}); 

Pour activer la section accordian supprimer la classe 'accordionDisable'

$('.disabledItemOne').removeClass('accordianDisable'); 
0

$('.disabled').addClass('ui-state-disabled').on('click', function() { 
 
    return false; 
 
});
<h3 class="disabled">Payment Information </h3>

Questions connexes