Introduction aux composants du framework JavaScript (xmlplus) (2) Bouton

xmlplus est un JavaScriptframework pour le développement rapide de projets front-end et back-end. Cet article présente principalement le Button de la série de conception de composants xmlplus, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

En plus des icônes, les boutons peuvent être le composant le plus simple, prenons maintenant un aperçu. regardez comment définir le composant Button Group.

Utiliser les composants de boutons natifs

Dans xmlplus, les éléments HTML existent également en tant que composants. Ainsi, vous pouvez utiliser les composants de bouton directement en utilisant la balise bouton ou la balise d'entrée. Comme le montre l'exemple suivant :

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

Bien que l'apparence des boutons natifs ne soit pas si attrayante, les boutons natifs ne sont pas spécialement packagés, ils sont donc les plus rapides à restituer et les plus efficaces à exécuter.

Utilisez les boutons de style Bootstrap

si votre projet n'a pas d'exigences visuelles particulières. C'est une bonne idée d'utiliser les styles Bootstrap pour définir les composants des boutons. Pour utiliser les boutons Bootstrap de manière traditionnelle, vous les utiliserez comme ceci.

<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>

Veuillez observer attentivement si vous sentez que cela vous donne plus que ce que vous demandez. Non seulement vous avez trouvé beaucoup de boutons type=, vous avez également trouvé beaucoup de btn. Voici maintenant un composant basé sur le style Bootstrap, mais qui simplifie considérablement l'utilisation des boutons.

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

Ce composant de bouton encapsule le contenu qui doit être écrit à plusieurs reprises dans le bouton d'origine. Lors de son utilisation, il vous suffit de fournir l'attribut type pour spécifier le bouton cible, ce qui est plus pratique à utiliser. Vous trouverez ci-dessous comment utiliser le nouveau composant bouton .

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

Boutons avec des icônes

En plus du texte, les boutons peuvent également avoir des icônes. Des icônes appropriées peuvent rendre l’objectif d’un bouton plus vivant et intuitif. Ici, nous prenons le bouton icône d'EasyUI comme exemple pour illustrer comment encapsuler et utiliser les boutons icône. Jetons d'abord un coup d'œil à l'utilisation originale des boutons d'icônes EasyUI.

<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>

Semblable à l'encapsulation des boutons Bootstrap dans la section précédente, les parties récurrentes sont extraites par observation et les parties modifiées sont affichées sous la forme d'Interface. Seuls le nom du type d'icône et le texte du bouton ci-dessus sont variables, nous pouvons donc créer le design suivant :

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);
  }
}

Voici comment utiliser la nouvelle icône, qui est évidemment beaucoup plus simple que la manière originale d'utilisation.

<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>

Personnalisez votre composant bouton

Utilisez des frameworks open source comme Bootstrap, EasyUI, etc. pour éviter de réinventer la roue. Cependant, lorsque ces projets open source ne répondent pas à vos besoins, vous devez les réaliser vous-même.

Par souci de simplicité, en supposant maintenant que le framework Bootstrap ci-dessus n'existe pas, alors comment concevoir un ensemble de boutons ci-dessus ? Ce type de pratique est très significatif et vous aide à tirer des conclusions d’un exemple à l’autre.

Maintenant, réobservons le composant bouton ci-dessus. Vous constaterez que Bootstrap a conçu des classes de style qui peuvent être combinées, parmi lesquelles btn est requis par chaque bouton. De plus, btn-default, btn-primary, etc. peuvent former des classes de style combinées avec btn selon les besoins. D'accord, sur la base de cette idée, nous pouvons concevoir le cadre de composants suivant.

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

La différence entre les idées de conception ci-dessus et l'utilisation directe précédente des boutons de définition de style Bootstrap est que la première a déjà défini chaque classe de style globale pour vous, il vous suffit de directement référencer C'est tout. Ici, vous devez définir les classes de style pertinentes dans le composant bouton. Du point de vue de l'encapsulation, cette dernière est plus cohérente que la première car elle n'expose pas le nom de classe global. Vous trouverez ci-dessous un exemple d'utilisation de ce composant.

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>"
}

Notez que par souci de simplicité, le composant de bouton personnalisé omet ici les styles de survol et d'activité, il est donc quelque peu différent du bouton Bootstrap.

Cette série d'articles est basée sur le framework xmlplus. Si vous ne savez pas grand-chose sur XMLplus, vous pouvez visiter www.xmlplus.cn. Une documentation détaillée de démarrage est disponible ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!