[JQuery]Meerdere problemen mbt tabs

[telefoontoestel]

Ik ben bezig met een pagina waarin verschillende tabs dynamisch aangemaakt kunnen worden, hernoemd kunnen worden en verwijderd zouden kunnen worden. Met nadruk op zouden, want daar gaat het compleet mis.

1. Allereerst gaat het mis bij het binden van het onclick event bij het close kruisje (zie onderstaande code). In plaats van dat het bij onclick wordt geregistreerd, gebeurt het al bij het aanmaken van de tab. Vervolgens gaat het verwijderen 2 keer goed, maar als je vervolgens weer een nieuwe pagina aanmaakt dan wordt er op een of andere manier geen id meer voor aangemaakt. Hierdoor wordt het niet mogelijk deze te verwijderen of te hernoemen. Vervolgens lopen de id's en de aanpas mogelijkheden volledig in de soep. De enige foutmelding die ik dan krijg van IE mbt javascript is dat het id niet ingesteld kan worden omdat de eigenschap niet bekend of null is. Wat kan dit veroorzaken?
2. Als ik in de developer tools de browser modus verander naar IE8 of lager, dan doet het hele tab systeem het niet eens meer (helemaal niets zichtbaar). In Chrome en Firefox werkt het wel. Is dat een fout in de developertools of betekend dit dat bovenstaande code helemaal niet werkt in IE8 of lager?

*knip*

[Voor 59% gewijzigd door MueR op 05-07-2011 15:25. Reden: Lap code verwijderd]

[Bozozo]

Heb je een specifieke reden om die event handler als property mee te geven? Normaal gesproken doe je het zo in jQuery:

JavaScript:

$('#foo').append(
  $('<p>Hi!</p>')
  .bind('click',function(e) {
    alert('hi!');
  })
);

[MueR]

Ik heb de 200 regels code even verwijderd. Als je code post, zien we graag enkel relevante code. Hoe minder irrelevante code, hoe beter. We zitten hier niet om voor de lol door je complete JS te bladeren. Plaats gerust wat code terug, maar wel graag enkel nuttig spul.

[telefoontoestel]

Ik heb wel de tip opgevolgd van Bozozo. Ik vond het zelf wat leesbaarder, maar misschien werkt dit wel wat beter. Het probleem blijft alleen wel bestaan.

Als ik meerder pagina's heb aangemaakt en ik begin vanaf het begin te verwijderen, dan gaat de eerste goed. Als ik daarna de anderen probeer te verwijderen pakt hij niet de goede tab om te verwijderen, maar een van de volgende. De label wordt daarentegen wel weer goed uitgelezen. Voor de zekerheid probeer ik beide verwijder mogelijkheden. 1 bij het daadwerkelijk klikken op de OK knop en 1 bij het drukken op de Enter toets.

JavaScript:

function deletePage(ui){
    var dlgOptions = {
        closeOnEscape: true,
        modal: true,
        title: "Verwijderen",
        buttons: [
            {
                text: "Ok",
                click: function(){
                    $tabs.tabs("remove", ui.index);
                    closeDlg();
                }
            },
            {
                text: "Annuleren",
                click: function(){
                    closeDlg();
                }
            }
        ]
    }
    
    var closeDlg = function(){
        $("#removeDlg").dialog("close");
        $("#removeDlg").remove();
    }
    
    createDiv("removeDlg", parentDiv, "dlgClass", "Weet u zeker dat u de pagina \""+$(ui.tab).text()+"\" wilt verwijderen");
    $("#removeDlg").dialog(dlgOptions);
    $("#removeDlg").keyup(function(e){
        if(e.keyCode == 13){
            $(ui.tab).remove();
            closeDlg();
        }
    });
}

[Voor 0% gewijzigd door BtM909 op 08-07-2011 12:50]

[R4gnax]

Triviale extensie die een tab sluit als er met de middelste muisknop op geklikt wordt. Uitbreiden met een filtering welke tabs sluitbaar zijn en/of de methode v/h sluiten aanpassen (bijv. door een klikbare [x] knop te maken) laat ik over als oefening voor de lezer.

JavaScript:

( function( $ ) {

    $.widget("ui-ext.tabs", $.ui.tabs, {
        _tabify: function()
        {
            var self = this;
            
            $.ui.tabs.prototype._tabify.apply( this, arguments );
                        
            this.anchors
                .unbind( ".tabs-closable" )
                .bind( "mousedown.tabs-closable", function( event ) {
                    // middle button
                    if ( event.button == 1 ) {
                        self.remove( self.anchors.index( this ));
                    }
                });
        }
    });

})( jQuery );

[telefoontoestel]

De functie werkt perfect (moest het wel op de rechtermuisknop zetten, aangezien ik geen middelste knop heb), maar krijg het toch niet voor elkaar om het te binden aan het sluitkruisje ipv standaard functionaliteit. Daar zal ik me nog in moeten verdiepen.

Ik ben wel iets verder gekomen in het vinden van de oorzaak. Het lijkt erop dat wanneer er een tabblad wordt verwijderd, dat dan ofwel de indexen opnieuw worden berekend zonder dat dit gewijzigd wordt in de ui, ofwel dat de tabbladen op positie ipv op index wordt verwijderd. Ik heb nu dus gemaakt dat hij de index pakt op basis van positie ($(ui.tab).parent().prevAll().length). Dat werkt over het algemeen perfect, behalve als ik gebruik maak van de sortable functionaliteit. Dan pakt hij toch steeds weer de verkeerde op een of andere manier. Alsof de index alleen opnieuw wordt berekend na een verwijder actie.

Is dat een soort van bug in jQuery of pak ik het verkeerd aan?

[Voor 89% gewijzigd door telefoontoestel op 08-07-2011 00:14]

[R4gnax]

telefoontoestel schreef op donderdag 07 juli 2011 @ 22:29:
Dat werkt over het algemeen perfect, behalve als ik gebruik maak van de sortable functionaliteit. Dan pakt hij toch steeds weer de verkeerde op een of andere manier. Alsof de index alleen opnieuw wordt berekend na een verwijder actie.

Is dat een soort van bug in jQuery of pak ik het verkeerd aan?

Dat is inderdaad een probleem met het combineren van jQuery UI's sortable en tabs. Nadat de ordering van de tabs veranderd is moet opnieuw de interne _tabify functie aangeroepen worden om de indices correct te herbouwen.

Het breekt enorm met het principe van encapsulatie, maar je kunt deze interne functie nog steeds van buitenaf uitvoeren door direct de instance v/d widget class op te pakken ipv via de jQuery.fn extensie te werken:

JavaScript:

$("#tabs").data("tabs")._tabify();

Het is alleen natuurlijk veel beter om een extended versie van de tabs plugin te schrijven, net zoals het voorbeeld uit mijn eerdere post, waarbij je met sortable en closable opties de toegevoegde functionaliteit aan/uit kunt zetten.

[Voor 4% gewijzigd door R4gnax op 08-07-2011 12:52]

[telefoontoestel]

Daar moet ik me dus nog in verdiepen aangezien ik nog niet zo heel lang met jQuery werk.

Met deze functie is het grootste deel van de problemen inderdaad opgelost, alleen werkt het nog niet nadat ik gesorteerd heb. Ik hoopte het op te kunnen lossen door met het sort event ook deze functie aan te roepen. Misschien dat ik dit verkeerd aanpak?

JavaScript:

$tabs.find(".ui-tabs-nav").sortable({axis: "xy"});
$tabs.find(".ui-tabs-nav").bind("sort", function(e){
    $tabs.data("tabs")._tabify()
});

[Voor 5% gewijzigd door telefoontoestel op 08-07-2011 14:11]

[R4gnax]

Laat me nou nieuwsgierig geworden zijn en onderstaande als een projectje in elkaar getimmerd hebben:

JavaScript:

/* jquery-ui-tabs-ext.js */

( function( $ ) {

    $.widget("ui-ext.tabs", $.ui.tabs, {
        
        options: {
            closable: false,            
            sortable: false
        },
        
        _tabify: function( init ) {
            var self = this, o = this.options;
            
            $.ui.tabs.prototype._tabify.call( this, init );
            
            this.list.unbind( "sort.tabs" );
            if ( o.sortable ) {         
                this.list
                    .sortable({ axis: "x" })            
                    .bind( "sort.tabs", function( event ) { self._tabify(); });                 
            } else {
                this.list.sortable( "destroy" );
            }
                        
            if ( o.closable ) {             
                this.closers = this.lis
                    .addClass("ui-tabs-closable")
                    .map( function() {
                        return $( "a.ui-tabs-close", this )[ 0 ] || $( "<a class='ui-tabs-close ui-corner-all' href='#' role='button'><span class='ui-icon ui-icon-closethick'>close</span></a>" ).appendTo( this )[ 0 ]
                    });                 
            } else {            
                this.lis.removeClass( "ui-tabs-closable" );
                this.closers && this.closers.remove();
                this.closers = $([]);               
            }                       
                
            this.closers                
                .unbind( ".tabs" )
                .bind( "focus.tabs", function( event ) { $( this ).addClass( "ui-state-focus" ) })
                .bind( "blur.tabs", function( event ) { $( this ).removeClass( "ui-state-focus" ) })
                .bind( "mouseenter.tabs", function( event ) { $( this ).addClass( "ui-state-hover" ) })
                .bind( "mouseleave.tabs", function( event ) { $( this ).removeClass( "ui-state-hover" ) })
                .bind( "click.tabs", function( event ) {
                    event.preventDefault();                 
                    self.remove( self.closers.index( this ));                   
                });
        },
        
        destroy : function() {
            this.list.sortable( "destroy" );
            this.lis.removeClass( "ui-tabs-closable" );
            this.closers.remove();
            
            $.ui.tabs.prototype._destroy.call( this );
        }
    });

})( jQuery );

Cascading Stylesheet:

/* jquery-ui-tabs-ext.css */

.ui-tabs .ui-tabs-nav li.ui-tabs-closable a { padding-right: 2.3em; }
.ui-tabs .ui-tabs-nav li a.ui-tabs-close { height: 18px; margin: -10px 0 0; padding: 1px; position: absolute; right: 0.3em; top: 50%; width: 19px; cursor: pointer; }
.ui-tabs .ui-tabs-nav li a.ui-tabs-close:hover, .ui-tabs .ui-tabs-nav li a.ui-tabs-close:focus { padding: 0px; }
.ui-tabs .ui-tabs-nav li a.ui-tabs-close span { display:block; margin: 1px  }

(Vraag me af of ik het niet als patch in zou moeten dienen voor jQuery UI core...)

[telefoontoestel]

Lijkt mij een goed plan. Ik heb toegevoegd als plugin/extensie, kan ik er nog een specifieke bronvermelding bijzetten? Nog een vraagje: ze worden nu automatisch allemaal "closable", is er een manier om voor een specifieke tab dit uit te zetten?

[edit]
Ik heb de margins aan moeten passen voor de close-button, aangezien het een soort dubbele knop was geworden. Het is hiermee gewoon een kruisje.

Cascading Stylesheet:

/* jquery-ui-tabs-ext.css */ 

.ui-tabs .ui-tabs-nav li.ui-tabs-closable a { padding-right: 2.3em; } 
.ui-tabs .ui-tabs-nav li a.ui-tabs-close { height: 16px; margin: -10px 0 0; padding: 0px; position: absolute; right: 0.3em; top: 50%; width: 16px; cursor: pointer; }
 .ui-tabs .ui-tabs-nav li a.ui-tabs-close:hover, .ui-tabs .ui-tabs-nav li a.ui-tabs-close:focus { padding: 0px; }
 .ui-tabs .ui-tabs-nav li a.ui-tabs-close span { display:block; margin: 0px  }

[Voor 56% gewijzigd door telefoontoestel op 09-07-2011 14:11]

[R4gnax]

telefoontoestel schreef op zaterdag 09 juli 2011 @ 13:06:
Lijkt mij een goed plan. Ik heb toegevoegd als plugin/extensie, kan ik er nog een specifieke bronvermelding bijzetten? Nog een vraagje: ze worden nu automatisch allemaal "closable", is er een manier om voor een specifieke tab dit uit te zetten?

Het is een stukje code wat ik zelf maar even uit de mouw geschud heb als proof of concept. Ik ben niet van plan het verder te onderhouden, dus van mij mag je een bronvermelding achterwege laten. Als je er tòch een bronvermelding bij wilt 'voor het nette', link dan naar de post hier op Tweakers, zou ik zeggen.

Wat betreft het gedrag dat alle tabs closable worden: in de jQuery UI source code moet je eens kijken naar hoe de disabled optie (een array van indices) voor de tabs widget afgehandeld wordt in de _tabify method. Het zou niet zo moeilijk moeten zijn om ook de nieuwe closable optie op die manier te laten werken.

telefoontoestel schreef op zaterdag 09 juli 2011 @ 13:06:
Ik heb de margins aan moeten passen voor de close-button, aangezien het een soort dubbele knop was geworden. Het is hiermee gewoon een kruisje.

Die dubbele knop zie je o.a. ook terug in de titelbalk van een jQuery UI dialog window (hoewel daar de titelbalk zelf geen hover gedrag heeft). Dat is hoe zo'n componentje volgens de themeroller huis stijl hoort te werken. Als je het echt als een extensie indient, zou ik het in de ingediende versie laten staan zoals het was. (Je kunt in de versie die je zelf gebruikt natuurlijk altijd weghalen.)