Einführung in die Komponenten des JavaScript-Frameworks (xmlplus) (2) Schaltfläche

xmlplus ist ein JavaScriptFramework für die schnelle Entwicklung von Front-End- und Back-End-Projekten. In diesem Artikel wird hauptsächlich der Button der xmlplus-Komponentendesignserie vorgestellt, der einen gewissen Referenzwert hat.

Neben Symbolen sind Schaltflächen möglicherweise die einfachste Komponente. Nehmen wir nun eine Schauen Sie sich an, wie Sie die Komponente Button Group definieren.

Native Button-Komponenten verwenden

In xmlplus existieren auch HTML-Elemente als Komponenten. Sie können Schaltflächenkomponenten also direkt verwenden, indem Sie das Schaltflächen-Tag oder das Eingabe-Tag verwenden. Wie im folgenden Beispiel gezeigt:

Example: {
  xml: "<p id=&#39;example&#39;>\
       <button>Default</button>\
       <input type=&#39;submit&#39;>Primary</input>\
     </p>"
}

Obwohl das Erscheinungsbild nativer Schaltflächen nicht so attraktiv ist, sind native Schaltflächen nicht speziell verpackt, sodass sie am schnellsten gerendert und am effizientesten ausgeführt werden können.

Verwenden Sie Bootstrap-Stilschaltflächen

, wenn Ihr Projekt keine besonderen visuellen Anforderungen stellt. Es empfiehlt sich, Bootstrap-Stile zum Definieren von Schaltflächenkomponenten zu verwenden. Um Bootstrap-Schaltflächen auf herkömmliche Weise zu verwenden, würden Sie sie wie folgt verwenden.

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>

Bitte beobachten Sie genau, ob Sie das Gefühl haben, dass es Ihnen mehr gibt, als Sie verlangen. Sie haben nicht nur viele type=buttons gefunden, sondern auch jede Menge btn. Hier ist nun eine Komponente, die auf dem Bootstrap-Stil basiert, aber die Verwendung von Schaltflächen erheblich vereinfacht.

Button: {
  xml: "<button type=&#39;button&#39; class=&#39;btn&#39;/>",
  fun: function (sys, items, opts) {
    this.addClass("btn-" + opts.type);
  }
}

Diese Schaltflächenkomponente kapselt den Inhalt, der wiederholt in die ursprüngliche Schaltfläche geschrieben werden muss. Wenn Sie sie verwenden, müssen Sie nur das Typ--Attribut angeben, um die Zielschaltfläche anzugeben. was bequemer zu verwenden ist. Nachfolgend erfahren Sie, wie Sie die neue Schaltfläche -Komponente verwenden.

<Button type=&#39;default&#39;>Default</Button>
<Button type=&#39;primary&#39;>Primary</Button>
<Button type=&#39;success&#39;>Success</Button>

Schaltflächen mit Symbolen

Schaltflächen können neben Text auch Symbole enthalten. Durch geeignete Symbole kann der Zweck einer Schaltfläche anschaulicher und intuitiver gestaltet werden. Hier nehmen wir die Symbolschaltfläche von EasyUI als Beispiel, um zu veranschaulichen, wie Symbolschaltflächen gekapselt und verwendet werden. Werfen wir zunächst einen Blick auf die ursprüngliche Verwendung der EasyUI-Symbolschaltflächen.

<p style="padding:5px 0;">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:&#39;icon-add&#39;">Add</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:&#39;icon-remove&#39;">Remove</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:&#39;icon-save&#39;">Save</a>
</p>

Ähnlich wie bei der Kapselung von Bootstrap-Schaltflächen im vorherigen Abschnitt werden die wiederkehrenden Teile durch Beobachtung extrahiert und die geänderten Teile in Form einer Schnittstelle angezeigt. Nur der Name des Symboltyps und der Text der Schaltfläche oben sind variabel, sodass wir das folgende Design erstellen können:

Button: {
  xml: "<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton"/>",
  fun: function (sys, items, opts) {
    this.attr("data-options" + "iconCls:&#39;icon-" + opts.type);
  }
}

Im Folgenden wird beschrieben, wie das neue Symbol verwendet wird, was offensichtlich viel einfacher als die ursprüngliche Methode ist von Nutzen.

<p style="padding:5px 0;">
  <Button type=&#39;add&#39;>Add</Button>
  <Button type=&#39;remove&#39;>Reomve</Button>
  <Button type=&#39;save&#39;>Save</Button>
  <Button type=&#39;cut&#39;>Cut</Button>
</p>

Passen Sie Ihre Schaltflächenkomponente an

Verwenden Sie Open-Source-Frameworks wie Bootstrap, EasyUI usw., um das Rad nicht neu erfinden zu müssen. Wenn diese Open-Source-Projekte jedoch nicht Ihren Anforderungen entsprechen, müssen Sie es selbst tun.

Wie entwirft man der Einfachheit halber einen Satz der oben genannten Schaltflächen unter der Annahme, dass das oben genannte Bootstrap-Framework nicht existiert? Diese Art der Übung ist sehr sinnvoll und wird Ihnen helfen, Rückschlüsse von einem Beispiel auf ein anderes zu ziehen.

Beobachten wir nun noch einmal die Schaltflächenkomponente oben. Sie werden feststellen, dass Bootstrap einige Stilklassen entworfen hat, die kombiniert werden können, darunter btn, das für jede Schaltfläche erforderlich ist. Darüber hinaus können btn-default, btn-primary usw. bei Bedarf kombinierte Stilklassen mit btn bilden. Okay, basierend auf dieser Idee können wir das folgende Komponenten-Framework entwerfen.

Button: {
  css: "#btn { 这里是按钮基本的样式 }\
     #default { 这里是default样式 }\
     #primary { 这里是primary样式 }",
  xml: "<button type=&#39;button&#39;/>",
  fun: function (sys, items, opts) {
    this.addClass("#btn #" + opts.type, this);
  }
}

Der Unterschied zwischen den oben genannten Designideen und der vorherigen direkten Verwendung der Bootstrap-Stildefinitionsschaltflächen besteht darin, dass erstere bereits jede globale Stilklasse für Sie definiert hat, Sie müssen nur direkt zitieren Das ist es. Hier müssen Sie die relevanten Stilklassen innerhalb der Schaltflächenkomponente definieren. Aus Sicht der Kapselung ist Letzteres kohärenter als Ersteres, da der globale Klassenname nicht offengelegt wird. Nachfolgend finden Sie ein Anwendungsbeispiel dieser Komponente.

Example: {
  xml: "<p id=&#39;example&#39;>\
       <Button type=&#39;default&#39;>Default</Button>\
       <Button type=&#39;primary&#39;>Primary</Button>\
       <Button type=&#39;success&#39;>Success</Button>\
     </p>"
}

Beachten Sie, dass der Einfachheit halber in der benutzerdefinierten Schaltflächenkomponente hier die Hover- und aktiven Stile weggelassen werden, sodass sie sich etwas von der Bootstrap-Schaltfläche unterscheidet.

Diese Artikelserie basiert auf dem xmlplus-Framework. Wenn Sie nicht viel über xmlplus wissen, können Sie www.xmlplus.cn besuchen. Eine ausführliche Dokumentation zu den ersten Schritten finden Sie hier.

Das obige ist der detaillierte Inhalt vonEinführung in die Komponenten des JavaScript-Frameworks (xmlplus) (2) Schaltfläche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!