come disabilitare alcuni collegamenti della fisarmonica jquery
https://stackoverflow.com/questions/1808134
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Attualmente sto implementando una fisarmonica basata su jquery in una sezione di navigazione, ma alcune parti della navigazione non hanno bisogno di far parte della fisarmonica (se non ci sono categorie ecc.) Mi chiedo solo se è possibile disabilitare parti della fisarmonica o no?
Ho la sensazione che questo potrebbe essere impossibile, ma questo sito mi ha sorpreso prima :)
Grazie mille.
Soluzione
Puoi mettere lezioni sulle cose che vuoi disabilitare.
Quindi:
jQuery(".toDisable").live("click", function (){return false;});
o qualcosa di simile
Altri suggerimenti
Il trucco precedente non funziona a causa dell'ordine vincolante degli eventi, ma i seguenti funzionano:
// 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 vuoi attivare una scheda, esegui:
// Remove the class ui-state-disabled to the headers that you want to enable
$( ".whatyouwant" ).removeClass("ui-state-disabled");
Questo è tutto
Un modo semplicistico, forse usando il metodo unbind:
$(".ui-state-disabled").unbind("click");
Aggiunta di ui-state-disabled negli elementi che si desidera disabilitare.
Ti piace un link a casa? Volevo un collegamento home in stile "regolarmente". nella parte superiore della mia fisarmonica. Sto utilizzando la versione UI 1.8 di Google:
< script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">< / script >
Non minificato:
< script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js">< / script >
Ho hackerato un po 'la fisarmonica nel suo metodo _clickHandler (linea 5834-ish). Ho aggiunto il seguente codice subito dopo il " var clicked = " ;:
// this.headers.index == My First "Home" Accordion H3.
if(this.headers.index(event.currentTarget) == 0){window.location='/support';return;}
ho aggiunto l'opzione linkDisabled al plugin. in questo modo è possibile definire una classe per i collegamenti all'interno dell'oggetto fisarmonica, che sono disabilitati. per esempio:.
$(myAccordion).accordion({
linkDisabled: 'disabled' // note that the class is given without dot. e.g. not '.disabled', but 'disabled'
});
ed ecco il plugin riscritto:
/* ---------------------------------------------
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;
--- */
Ho avuto un problema simile. Avevo bisogno di una fisarmonica a 5 parti, ma le ultime due parti non erano accessibili fino a quando le prime tre (che hanno richiesto azioni diverse) non sono state completate. Ecco come l'ho gestito (usando 2 fisarmoniche separate):
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 impostato la seconda fisarmonica in modo che inizi disabilitata. Inoltre, viene data la classe CSS 'faded_out' che dà un po 'di opacità e imposta il cursore del mouse sul valore predefinito per le ancore. Infine, quando si fa clic su una delle due fisarmoniche, si imposta "activ" su false sull'altra in modo da chiudere l'altra fisarmonica e far sembrare che facciano parte della stessa. Questo funziona molto bene per me così com'è.
P.S. La mia app è su rotaie e per rilevare se la seconda fisarmonica debba essere abilitata (tramite la funzione ReleaseAccordion2), cerco una classe ('completa') passata agli h3 nella prima fisarmonica (tramite ruby ??incorporato) .
È possibile utilizzare l'evento 'beforeActivate' per questo.
Aggiungi una classe di disabilitazione al tuo elemento h3
<h3 class="accordionDisable disabledItemOne" >Title</h3>
Imposta la funzione seguente sull'evento 'beforeActivate'. È possibile accedere all'oggetto header tramite l'oggetto 'ui.newHeader'. Verifica se l'intestazione ha la classe "accordionDisable", se true restituisce false e interromperà l'attivazione della sezione della fisarmonica.
$( "#your_accordion" ).accordion({
beforeActivate : function( event, ui ){
if( ui.newHeader.hasClass( 'accordionDisable' ) ){
return false;
}
}
});
Per attivare la sezione della fisarmonica, rimuovere la classe 'accordionDisable'
$( '.disabledItemOne' ).removeClass( 'accordianDisable' );
Usa le classi per la sezione che vuoi includere e crea un selettore CSS più specifico quando inizializzi la fisarmonica.
La risposta di Marcgg sembra essere sulla buona strada. Quello che potresti fare è aggiungere classe ai collegamenti che vuoi abilitare nella fisarmonica, ottenere l'href da loro e quindi navigare nell'URL impostando window.location.
$("a.enlnk").live("click", function() {
var navigateToLink = $.trim(this.href);
if (navigateToLink) {
window.location.href = navigateToLink;
}
});
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.
Non riesco a trovare le soluzioni fornite per funzionare con la versione dell'interfaccia utente di jQuery che sto utilizzando ATM (versione 1.8)
Ho trovato un'altra soluzione;
$(".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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
