come disattivare determinati collegamenti di jquery fisarmonica

Question

Attualmente sono implementato un fisarmonica basata su jquery su una sezione di navigazione, ma alcune parti della navigazione non devono necessariamente far parte della fisarmonica (se non ci sono categorie ecc.) mi chiedo solo se sia possibile disabilitare parti della fisarmonica o no?

ho la sensazione che questo potrebbe essere impossibile, ma questo sito mi ha sorpreso prima :)

Grazie molto.

Answer 1

È possibile inserire classi sulle cose che si desidera disabilitare.

Poi fare:

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

o qualcosa di simile

Answer 2

Utilizzare le classi per la sezione che si desidera includere e creare un selettore CSS più specifico durante l'inizializzazione della fisarmonica.

Answer 3

trucco precedente non funziona a causa del l'ordine di binding di eventi, ma le seguenti opere:

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

Ogni volta che si vuole attivare una scheda, fare:

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

Questo è il

Answer 4

Come per un collegamento domestico? Volevo un collegamento a casa in stile "regolarmente" in cima alla mia fisarmonica. Sto utilizzando la versione 1.8 dell'interfaccia utente di 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 > 

ho inciso la fisarmonica un po 'nel suo metodo _clickHandler (5834-ish line). Ho aggiunto il seguente codice subito dopo "var clickked =":

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

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

Answer 5

La risposta di Marcgg sembra essere sulla strada giusta. Quello che potresti fare è aggiungere classe ai collegamenti che vuoi abilitati nella fisarmonica, ottenere l'href da loro e quindi navigare url impostando window.location.

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

Answer 6

Ho avuto lo stesso problema. Volevo rimanere in un div che non faceva parte della fisarmonica. Era un div mentre gli altri elementi della fisarmonica erano. Ho aggiunto l'intestazione: opzione '' e questo ha impedito l'aggiunta delle classi al div che avevo.

Answer 7

ho aggiunto l'opzione linkDisabled al plug-in. in questo modo è possibile definire una classe per i collegamenti all'interno dell'oggetto fisarmonica, che sono disabilitati. es .:

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

ed ecco il plugin riscritta:

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

Answer 8

io non riesco a trovare le soluzioni date a lavorare con la versione di jQuery UI sto usando ATM (Version 1.8)

Ho trovato un'altra soluzione;

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

Answer 9

Ho avuto un problema simile. Avevo bisogno di una fisarmonica a 5 parti, ma le ultime due parti non dovevano essere accessibili fino al completamento dei primi tre (che richiedevano azioni diverse). Ecco come ho gestito (usando 2 fisarmoniche separati):

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

In questo modo, abbiamo istituito la seconda fisarmonica in modo che inizia disabilitato. Inoltre, viene data la classe CSS 'faded_out' che dà un po 'di opacità e imposta il cursore del mouse su default per le ancore. Infine, quando si fa clic su una fisarmonica, imposta "attiva" su false sull'altra in modo da chiudere l'altra fisarmonica e far sembrare che siano parte della stessa. Questo funziona molto bene per me così com'è.

P.S. La mia app è su binari, e per rilevare se la seconda fisarmonica debba essere abilitata (tramite la funzione ReleaseAccordion2), cerco una classe ('completa') passata alle h3 nella prima fisarmonica (tramite ruby ​​incorporato) .

Answer 10

Un modo semplicistico forse utilizzando il metodo unbind:

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

Aggiunta del ui-stato-disabilitato negli elementi che si desidera disabilitare.

Answer 11

Per questo è possibile utilizzare l'evento "beforeActivate".

aggiungere una classe disabilitazione al vostro elemento h3

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

Impostare la funzione di seguito per l'evento 'beforeActivate'. È possibile accedere all'oggetto di intestazione tramite l'oggetto 'ui.newHeader'. Verifica se l'intestazione ha la classe 'accordionDisable', se è true restituisce false e interromperà l'attivazione della sezione di fisarmonica.

$("#your_accordion").accordion({ 

beforeActivate : function( event, ui ){ 

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

     return false; 

    } 
} 
}); 

Per attivare la sezione fisarmonica rimuovere la classe 'accordionDisable'

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

Answer 12

$('.disabled').addClass('ui-state-disabled').on('click', function() { 
 
    return false; 
 
});

<h3 class="disabled">Payment Information </h3>