wie bestimmte Links jquery Akkordeon deaktivieren
https://stackoverflow.com/questions/1808134
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich bin derzeit implementiert eine jquery basiert Akkordeon auf einem Navigationsbereich, aber einige Teile der Navigation brauchen nicht Teil des Akkordeons zu sein (wenn es keine Kategorien etc. sind) Ich frage mich nur, wenn es möglich ist, deaktivieren Teile des Akkordeons oder nicht?
Ich habe das Gefühl, unmöglich sein könnte, aber diese Seite hat mich überrascht vor:)
Vielen Dank.
Lösung
Sie können die Dinge setzen Klassen auf Sie deaktivieren möchten.
Dann tun:
jQuery(".toDisable").live("click", function (){return false;});
oder etwas ähnliches
Andere Tipps
Zurück Trick funktioniert nicht, da die Bindungsreihenfolge von Ereignissen, aber die folgenden Werke:
// 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);
}
};
Wenn Sie eine Registerkarte aktivieren möchten, tun:
// Remove the class ui-state-disabled to the headers that you want to enable
$( ".whatyouwant" ).removeClass("ui-state-disabled");
Das ist es
Eine simple Art und Weise vielleicht die unbind Methode:
$(".ui-state-disabled").unbind("click");
Das Hinzufügen der ui-state-Behinderte in den Elementen, die Sie deaktivieren möchten.
Wie für einen Heim Link? Ich wollte an der Spitze von meinem Akkordeon einer home link „regelmäßig“ gestylt. Ich verwende Google 1.8 UI-Version:
< script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">< / script >
Un-minimiert:
< script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js">< / script >
I zerhackt das Akkordeon ein wenig in seiner _clickHandler Methode (Linie 5834-isch). Ich habe den folgenden Code direkt nach dem „var geklickt =“:
// this.headers.index == My First "Home" Accordion H3.
if(this.headers.index(event.currentTarget) == 0){window.location='/support';return;}
i hinzugefügt, um die Option zu dem Plugin linkDisabled. Auf diese Weise können Sie eine Klasse für die Links innerhalb des Akkordeon-Objekt definieren, die deaktiviert sind. z.
$(myAccordion).accordion({
linkDisabled: 'disabled' // note that the class is given without dot. e.g. not '.disabled', but 'disabled'
});
und hier ist das neu geschrieben Plugin:
/* ---------------------------------------------
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;
--- */
Ich hatte ein ähnliches Problem. Ich brauchte eine 5-teilige Akkordeon, aber die letzten beiden Teile waren nicht zugänglich zu sein, bis die ersten drei (die für verschiedene Aktionen aufgefordert werden) abgeschlossen wurden. Hier ist, wie ich es behandelt (mit 2 getrennten Akkordeons):
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();
}
Auf diese Weise setzen wir die zweite Akkordeon, so dass es deaktiviert beginnt. Darüber hinaus ist es CSS-Klasse ‚faded_out‘ gegeben, die eine gewisse Opazität gibt und setzt den Mauszeiger für Anker auf Standard. Schließlich, wenn entweder Akkordeon geklickt wird, setzt ‚aktivieren‘ auf false auf der anderen Seite, um das andere Akkordeon zu schließen und es scheinen, als wären sie Teil des gleichen sind. Das funktioniert sehr gut für mich, wie ist.
P. S. Meine App ist auf Schienen, und um zu erkennen, ob die zweite Akkordeon (über die ReleaseAccordion2-Funktion) aktiviert werden soll, suche ich nach einer Klasse ( ‚vollständig‘) im ersten Akkordeon zu den h3 des vergangen (über eingebettete Rubin) .
Sie können das Ereignis ‚beforeActivate‘ für diese.
Fügen Sie eine disable Klasse Ihres h3 Element
<h3 class="accordionDisable disabledItemOne" >Title</h3>
Stellen Sie die unten Funktion auf die Veranstaltung ‚beforeActivate‘. Das Header-Objekt kann über die ‚ui.newHeader‘ Objekt zugegriffen werden. Testen Sie, ob der Header ‚accordionDisable‘ Klasse hat, wenn sie wahr ist, dann false zurück, und es wird das Akkordeon Abschnitt von der Aktivierung zu stoppen.
$( "#your_accordion" ).accordion({
beforeActivate : function( event, ui ){
if( ui.newHeader.hasClass( 'accordionDisable' ) ){
return false;
}
}
});
der accordian Abschnitt entfernen Sie die 'accordionDisable' Klasse aktivieren
$( '.disabledItemOne' ).removeClass( 'accordianDisable' );
Verwenden Sie Klassen für den Abschnitt, den Sie mögen, und einen spezifischere CSS-Selektor, wenn das Akkordeon zu initialisieren.
Marcgg Antwort scheint auf dem richtigen Weg zu sein. Was könnten Sie tun, ist hinzuzufügen Klasse auf die Links, die Sie im Akkordeon aktiviert werden sollen, erhalten die href von ihnen und dann URL navigieren, indem Sie die window.location Einstellung.
$("a.enlnk").live("click", function() {
var navigateToLink = $.trim(this.href);
if (navigateToLink) {
window.location.href = navigateToLink;
}
});
Ich hatte das gleiche Problem. Ich wollte in einem div halten, die nicht Teil des Akkordeons war. Es war ein div, während die anderen Elemente im Akkordeon waren. Ich habe den Header: ‚Option‘ und dies verhinderte die Klassen aus zu dem div hinzugefügt werden, die ich hatte.
Ich kann nicht scheinen die Lösungen gegeben werden mit der Version von jQuery UI arbeiten Ich bin mit ATM (Version 1.8)
Ich habe eine andere Lösung finden;
$(".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>
