it-swarm.com.de

So erstellen Sie benutzerdefinierte Tags für HTML

Ich würde gerne lernen, wie man benutzerdefinierte Tags für HTML mit speziellen Attributen und Verhalten erstellt. Wenn jemand Ratschläge geben kann, wäre ich am dankbarsten. 

36
Aktheus

Auf HTML5Rocks.com gibt es einen interessanten und ausführlichen Artikel über die Arbeit mit benutzerdefinierten Elementen: Benutzerdefinierte Elemente: Neue Elemente in HTML definieren

Hier ist ein Auszug aus dem Artikel, wie es gemacht wird.

Elemente instanziieren

Die allgemeinen Techniken zum Erstellen von Elementen gelten auch für benutzerdefinierte Elemente. Wie bei jedem Standardelement können sie in HTML deklariert oder in DOM mit JavaScript ..__ erstellt werden. Benutzerdefinierte Tags werden instantiiert

Deklariere sie:

<x-foo></x-foo>

DOM in JS erstellen:

var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
  alert('Thanks!');
});

Verwenden Sie den neuen Operator:

var xFoo = new XFoo();
document.body.appendChild(xFoo);
27
Jed Burke

Je nachdem, was Sie unter "besonderen Attributen und Verhaltensweisen" verstehen, können Sie jetzt benutzerdefinierte HTML-Tags "erstellen". Das Folgende wird in allen Browsern angezeigt und funktioniert sogar mit den verschiedenen JavaScript-Methoden:

<my-book data-pages="400" data-author="Nietzsche">The Wanderer and His Shadow</my-book>

Es gibt nur ein paar Dinge, die Sie beachten müssen:

  1. Silbentrennung! Benutzerdefinierte Elemente sollten aus mindestens einem - wie my-book oder app-menu oder header-title usw. bestehen. Verwenden Sie nur nicht data-*, da dies für - reserviert ist. Datenattribute.

  2. Alle benutzerdefinierten Elemente haben standardmäßig die Anzeige inline. Sie können dies jedoch mit CSS oder JavaScript ändern.

  3. Internet Explorer erkennt keines dieser Elemente, es sei denn, Sie zuerst "erstellen" sie mit JavaScript:

    document.createElement('my-book');
    

Also musst du das tun vor du kannst sie in deinem CSS, HTML oder JS verwenden.

30
sdleihssirhc

Sie müssen wirklich nur css für dieses Tag definieren

beispiel:

mytag {
font-weight: bold;
}

und jetzt ist der mytag dein eigener Mut:

<mytag>This text is in bold</mytag>
12
tylerr147

Es gibt jetzt eine neue W3C-Standardspezifikation namens Web Component Custom Elements , mit der Entwickler ihre eigenen benutzerdefinierten HTML-Elemente erstellen und sie mit dem Browser-Parser registrieren können. Mozilla hat eine Bibliothek namens X-Tag entwickelt, die das Erstellen und Arbeiten mit benutzerdefinierten Elementen sehr einfach macht. Schauen Sie sich das an: X-Tags.org

6
csuwldcat

Sie können benutzerdefinierte HTML-Tags mit den folgenden Schritten erstellen:

Schritt 1- Registrieren Sie ein neues Element. Benutzerdefinierte Elemente werden mit document.registerElement () erstellt:

var XFoo = document.registerElement('x-foo', {
    prototype: Object.create(HTMLElement.prototype)
});

Das zweite Argument in registerElement ist ein optionales Objekt, das den Prototyp des Elements beschreibt.

Schritt 2: Benutzerdefinierte Tags instanziieren Mehrere Möglichkeiten, dies zu tun: Deklarieren Sie sie:

<x-foo></x-foo>

DOM in JS erstellen:

var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
    alert('Thanks!');
});

Verwenden Sie den neuen Operator:

var xFoo = new XFoo();

Schritt 3- Fügen Sie das neu erstellte Element mit dem Dokument an

document.body.appendChild(new XFoo());

Vollständiges Beispiel:

var XFooProto = Object.create(HTMLElement.prototype);

// 1. Give x-foo a foo() method.
XFooProto.foo = function() {
  alert('foo() called');
};

// 2. Define a property read-only "bar".
Object.defineProperty(XFooProto, "bar", {value: 5});

// 3. Register x-foo's definition.
var XFoo = document.registerElement('x-foo', {prototype: XFooProto});

// 4. Instantiate an x-foo.
var xfoo = document.createElement('x-foo');

// 5. Add it to the page.
document.body.appendChild(xfoo);
2
Anurag Ratna

Es gibt auch eine Version, die NUR in Chrome 54 und Opera unterstützt wird.

Beispiel:

class BasicElement extends HTMLElement {
    connectedCallback() {
        this.textContent = 'Just a basic custom element.';
    }
}
customElements.define('basic-element', BasicElement);

Sie können mehr darüber erfahren hier

2
Felipe Alarcon

sie können Javascript verwenden: document.createElement('element')

0
Oliver Ni