JavaScript框架（xmlplus）组件的介绍（二）按钮-tutorial js-php.cn

JavaScript框架（xmlplus）组件的介绍（二）按钮

零下一度

Lepaskan： 2017-05-04 10:21:21

asal

1072 orang telah melayarinya

xmlplus 是一个JavaScript 框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之按钮，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

除了图标以外，按钮也许是最简单的组件了，现在来看看如何定义按钮组件。

使用原生按钮组件

在 xmlplus 中，HTML 元素也以组件的方式存在。所以，你可以直接通过使用 button 标签或者 input 标签来使用按钮组件。如下示例所示：

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

Salin selepas log masuk

虽然原生按钮外观不那么吸引人，但原生按钮未经特殊包装，所以渲染起来最快，执行效率最高。

使用 Bootstrap 样式的按钮

如果你的项目在视觉上没有特别要求的话。使用 Bootstrap 样式来定义按钮组件是一个好主意。按传统方式使用 Bootstrap 按扭，你需要像下面这样使用。

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

Salin selepas log masuk

请认真观察，你是不是觉得它给你的比你要求的要多。你不但发现了好多的 type=button，还发现了好多的 btn。现在下面给出一个组件，它基于 Bootstrap 样式，但它明显地简化了按钮的使用方式。

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

Salin selepas log masuk

此按钮组件封装了原始按钮需要重复书写的内容，在使用时，仅需提供 type 属性即可指明目标按钮，使用起来更为便捷。下面给出的是新按钮组件的使用方式。

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

Salin selepas log masuk

带有图标的按钮

按钮上除了文字外，还可以附带图标。合适的图标可以使按扭的使用意图更加生动直观。这里以 EasyUI 的图标按钮为例来说明如何封装并使用图标按钮。我们首先来看看，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>

Salin selepas log masuk

与上一节对 Bootstrap 按钮的封装类似，通过观察提炼出重复出现的部分，将变化的部分以接口形式展现。上面的按钮仅图标类型名和文本是可变的，所以我们可以做出如下的设计：

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

Salin selepas log masuk

下面是新图标的使用方式，它明显比原始的使用方式简洁多了。

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

Salin selepas log masuk

自定义你的按钮组件

使用类似 Bootstrap, EasyUI 等开源框架，可以避免重造轮子。然而，当这些开源项目无法满足你的需求时，你就需要自己动手了。

为简单起见，现在假定上述 Bootstrap 框架并不存在，那么如何设计一套上述的按钮？这样的实践是非常有意义的，它有助于你举一反三。

现在让我们重新对上面的按钮组件作观察。你会发现，Bootstrap 设计了一些可以组合的样式类，其中 btn 是每一个按钮都需要的，另外像 btn-default、btn-primary 等等都根据需要与 btn 形成组合样式类。好了，根据这个思路，我们就可以设计出如下的组件框架。

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

Salin selepas log masuk

上述的设计思路与前面直接使用 Bootstrap 样式定义按钮不同点在于，前者已经为你定义好了各个全局的样式类，你只需要直接引用就可以了。而此处你需要在按扭组件内部自行定义相关样式类。从封装的角度看，后者的内聚性要强于前者，因为它并不暴露全局类名。下面是该组件的使用示例。

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

Salin selepas log masuk

注意，为了简化起见，这里的自定义按钮组件略去了 hover、active 样式，所以与 Bootstrap 按钮有些不一样。

本系列文章基于 xmlplus 框架。如果你对 xmlplus 没有多少了解，可以访问 www.xmlplus.cn。这里有详尽的入门文档可供参考。

Atas ialah kandungan terperinci JavaScript框架（xmlplus）组件的介绍（二）按钮. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!