it-swarm.com.de

So verstecken Sie die Schublade beim Klicken auf den Benutzer

Wie kann ich die Schublade ausblenden, wenn der Benutzer auf ein Objekt klickt? Oder wenn eine Schaltfläche angeklickt wird?

<div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Title</span>
        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect" id="clickme">
          <i class="material-icons">add</i>
        </button>
</div>

Wie mache ich das, wenn die Schaltfläche angeklickt wird, wird die Schublade ausgeblendet, als würde ich außerhalb der Schublade geklickt? Ich habe versucht, ein Klickereignis außerhalb der Schublade zu simulieren, aber es wird immer noch nicht ausgeblendet.

13
krato

Ich glaube, Sie können die is-visible-Klasse aus .mdl-layout__drawer entfernen. Ich habe versucht, ein Codepen-Beispiel von ihrer Website zu ändern: demo . Meine reine Javascript-Ereignisbindung ist rostig, aber wie gesagt, Sie müssen nur die Klasse .is-visible aus der Schublade entfernen.

Aktualisieren

Der von mir bereitgestellte Code war für v1.0.0 von mdl und ist nicht mehr aktuell. Ab v1.1.0 wird eine öffentliche API zum Umschalten der Schublade bereitgestellt, wie in Benjamins Antwortbeschrieben. Wenn Sie sich zwischen v1.0.6 und v1.1.0 befinden, schauen Sie sich die Antwort von idleherb an.

7
jdepypere

toggleDrawer ist jetzt eine öffentliche Funktion seit @ be54f78 .

var layout = document.querySelector('.mdl-layout');
layout.MaterialLayout.toggleDrawer();

Momentan nicht verfügbar in Version 1.0.6. Daher müssen Sie aus der Quelle erstellen (ab heute).

22
Benjamin

Basierend auf GitHub-Diskurs habe ich ein paar funktionierende Lösungen für das (hoffentlich bald zu lösende) Problem, dass eine MDL-Schublade geschlossen wird, wenn der Link angeklickt wird. Im Moment verwende ich:

function close() {
  var d = document.querySelector('.mdl-layout');
  d.MaterialLayout.toggleDrawer();
}

document.querySelector('.mdl-layout__drawer').addEventListener('click', close);

Andere Variationen sind:

1.

document.querySelector('.mdl-layout__drawer').addEventListener('click', function () {
  document.querySelector('.mdl-layout__obfuscator').classList.remove('is-visible');
  this.classList.remove('is-visible');
}, false);

2.

function close() {
  var d = document.querySelector('.mdl-layout');
  d.MaterialLayout.toggleDrawer();
}
var drawer_container = document.getElementsByClassName('mdl-layout')[0];
drawer_container.querySelector('.mdl-layout__drawer').addEventListener('click', 'close');

Jemand in der Diskussion erwähnte die Idee, auf die querySelector zu zielen, um nicht das gesamte Dokument durchsehen zu müssen, und ich kam zu den folgenden zwei Variationen:

3.

var drawer_container = document.getElementsByClassName('mdl-layout')[0]; 
# no IDs in the html code.
drawer_container.querySelector('.mdl-layout__drawer').addEventListener('click', function () {
  var obfuscator = document.querySelector('.mdl-layout__obfuscator');
  if (obfuscator.classList.contains('is-visible')) {
    obfuscator.classList.remove('is-visible');
    this.classList.remove('is-visible');
  }
}, false);

4.

function close() {
  var d = document.getElementsByClassName('mdl-layout__container')[0].querySelector('.mdl-layout');
  d.MaterialLayout.toggleDrawer();
}
var drawer_container = document.getElementsByClassName('mdl-layout')[0];
drawer_container.querySelector('.mdl-layout__drawer').addEventListener('click', 'close');

In beiden Versionen muss der Browser document.getElementsByClassName sowie einen Aufruf von targetedquerySelector ausführen.

In meiner ersten Version gibt es auch die Überprüfung: classList.contains('is-visible'), die jemand empfohlen hatte, aber nicht notwendig erscheint, da die Funktion von einem Element aufgerufen wird, das nur sichtbar ist, wenn classList.contains('is-visible') wahr ist.

Ich habe zu jeder meiner Variationen (# 3 und 4) die folgenden Aufrufe hinzugefügt, innerhalb die Funktionen:

console.time("anonymous");
console.timeEnd("anonymous");
console.time("close function");
console.timeEnd("close function");

Und die mit der if-Anweisung läuft in .39ms. Ohne die if-Anweisung werden beide in .19ms ausgeführt. Ich messe aber auch nicht die getElementsByClassName- und querySelector-Methoden, die, wenn ich es richtig verstanden habe, beim Laden der Seite ausgeführt werden.

Als ich console.time("first"); und console.timeEnd("first"); durch den ersten und für mich schönsten Code lief, war die Zeit 23ms.

Offensichtlich unterstützt ie8, das ich unterstützen möchte, nicht getElementsByClassName .

Ich hoffe, dass jemand eine optimale Lösung für dieses relativ einfache Problem bereitstellen und erklären kann.

Hier ist ein CodePen (nicht meins). 

7
MikeiLL

Bei Version 1.0.6 müssen Sie die zuvor erwähnte Klasse aus zwei Elementen entfernen:

$( '.mdl-layout__drawer, .mdl-layout__obfuscator' ).removeClass( 'is-visible' );
4
idleherb

Ich verwende diesen Jquery-Befehl:

$( 'div[class^="mdl-layout__obfuscator"]' ).trigger( "click" );
3
user5738952

Ich habe keine Ahnung, wie ich das "MaterialLayout" in mein Angular 6 -Projekt bekomme, aber ich habe ihre Prototypfunktion genommen und in meiner Komponente verwendet:

  toggleDrawer = function () {
    var is_drawer_open = 'is-visible'
    var drawerButton = document.querySelector('.mdl-layout__drawer-button');
    var drawer_ = document.querySelector('.mdl-layout__drawer');
    var obfuscator_ = document.querySelector('.mdl-layout__obfuscator');
    drawer_.classList.toggle(is_drawer_open);
    obfuscator_.classList.toggle(is_drawer_open);
    // Set accessibility properties.
    if (drawer_.classList.contains(is_drawer_open)) {
      drawer_.setAttribute('aria-hidden', 'false');
      drawerButton.setAttribute('aria-expanded', 'true');
    } else {
      drawer_.setAttribute('aria-hidden', 'true');
      drawerButton.setAttribute('aria-expanded', 'false');
    }
  };
0
Stef

Mach das:

HTML

<div class="mdl-layout__drawer" id="mobile-left-menu">
    <span class="mdl-layout-title">Whatever</span>
    <nav class="mdl-navigation inject-navigation">
          <a class="mdl-navigation__link" href="#" page="home">Home</a>
          <a class="mdl-navigation__link" href="#About" page="about">About</a>
    </nav>
</div>

JS

    $('.mdl-navigation__link').on('click', function () {

        // close the drawer the button is clicked
        $('.mdl-layout__drawer').toggleClass('is-visible')
    });

CSS

/* prevent the dark transparent background over the page with the drawer is open */
.mdl-layout__obfuscator.is-visible{
    background-color: transparent;
}
0
Mahmoud Zalt

Automatisches Ausblenden der Navigationsleiste im Material Design Lite Framework.

Fügen Sie diesen Code einfach in das Skript-Tag Ihrer Webseite ein

Sie müssen jQuery einschließen, um diesen Lauf auszuführen ...: D

<script>
$(document).ready(function(){
    $(".mdl-layout__drawer a").click(function(){
        $(".mdl-layout__drawer,.mdl-layout__obfuscator").toggleClass("is-visible");
    });
});
</script>
0
Chandra Shekhar

Um es zu schließen, müssen Sie zuerst prüfen, ob es geöffnet ist, da es keinen "closeDrawer" gibt. Dies ist hilfreich, wenn Sie nicht davon ausgehen können, dass es bereits geöffnet ist, z. B. wenn Sie eine Abmelde-Schaltfläche in der Schublade und auch außerhalb oder in einer Session-Timeout-Funktion haben. Sie müssen es nur schließen, um das Anmeldeformular anzuzeigen.

closeDrawer() {
    let drawer = document.querySelector('.mdl-layout__drawer');
    if (drawer && drawer.className.indexOf("is-visible")>-1) {
        toggleDrawer();
    }
}
toggleDrawer() {
    let layout = document.querySelector('.mdl-layout');
    if (layout && layout.MaterialLayout) {
        layout.MaterialLayout.toggleDrawer();
    }
}
0
Stephen

In Angular ^ 4.0.0 können Sie diese Problemumgehung verwenden, anstatt toggleDrawer() zu verwenden, wenn Sie Probleme mit MaterialLayout haben, während Sie nicht definiert sind.

(
  document
    .querySelector('.mdl-layout__obfuscator') as HTMLDivElement
).click();
0
AndreaM16

Das Menü ein- und auszublenden ist so einfach wie das Hinzufügen und Entfernen der .is-visible-Klasse, wie sie angezeigt wird in der Quelle :

MaterialLayout.prototype.drawerToggleHandler_ = function() {
  'use strict';

  this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
};

Also hättest du so etwas:

function toggle_drawer() {
  var drawer = document.getElementsByClassName('mdl-layout__drawer')[0];
  drawer.classList.toggle("is-visible");
}

Ich habe auf eine bequemere Methode des MaterialLayout-Widgets gehofft, aber das Beste, was ich gefunden habe, war:

var layout = document.getElementsByClassName('mdl-layout')[0];
layout.MaterialLayout.drawerToggleHandler_();

obwohl dies zufällig funktioniert, zeigt _ am Ende des Methodennamens, dass diese Funktion nicht als öffentliche API-Methode (falsch) verwendet werden soll.

0
Yan Foto