xmlplus 组件设计系列之二 - 按钮（Button）

按钮

除了图标组件之外，按钮也许是最简单的组件了，这章就来看看如何定义按钮组件。

<img src="http://xmlplus.cn/img/button.png" class="img-responsive"/>

使用原生按钮组件

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

// 02-01
Index: {
    xml: `<div id='index'>
              <button>Default</button>
              <input type='submit'>Primary</input>
         </div>`
}

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

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

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

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

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

<!-- 02-02 -->
<Button type='default'>Default</Button>
<Button type='primary'>Primary</Button>
<Button type='success'>Success</Button>

带有图标的按钮

按钮上除了文字外，还能够附带图标。合适的图标可使按扭的使用意图更加生动直观。这里以 EasyUI 的图标按钮为例来讲明如何封装并使用图标按钮。咱们首先来看看，EasyUI 图标按钮的原始使用方式。

<div style="padding:5px 0;">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
</div>

与上一节对 Bootstrap 按钮的封装相似，经过观察提炼出重复出现的部分，将变化的部分以接口形式展示。上面的按钮仅图标类型名和文本是可变的，因此咱们能够作出以下的设计：

// 02-03
Button: {
    xml: "<a href="#" class="easyui-linkbutton"/>",
    fun: function (sys, items, opts) {
        this.attr("data-options", "iconCls:'icon-" + opts.type + "'");
        $(this.elem()).linkbutton();
    }
}

请注意该组件的函数项，因为这里的因此 HTML 元素都是动态生成的，因此须要使用函数 linkbutton 动态对按钮进行渲染，而不能期望 easyui 帮你自动帮你完成。下面是新图标的使用方式，它明显比原始的使用方式简洁多了。

<!-- 02-03 -->
<div style="padding:5px 0;">
    <Button type='add'>Add</Button>
    <Button type='remove'>Reomve</Button>
    <Button type='save'>Save</Button>
    <Button type='cut'>Cut</Button>
</div>

自定义按钮组件

使用相似 Bootstrap, EasyUI 等现成的开源框架，能够很是方便使用按钮。然而，当这些开源项目没法知足你的需求时，你就须要本身动手了。为简单起见，如今假定上述框架并不存在，那么如何设计一套具备 Bootstrap 样式的按钮呢？这样的实践是很是有意义的，它有助于你触类旁通。

如今让咱们从新对上面的按钮组件做观察。你会发现，Bootstrap 设计了一些能够组合的样式类，其中 btn 是每个按钮都须要的，另外像 btn-default、btn-primary 以及btn-success 等等都根据须要与 btn 造成组合样式类。好了，根据这个思路，咱们就能够设计出以下的组件框架。

// 02-04
Button: {
    css: `#button { 这里是按钮基本的样式 }
          #default { 这里是 default 样式 }
          #primary { 这里是 primary 样式 }
          #success { 这里是 success 样式 }`,
    xml: "<button type='button'/>",
    fun: function (sys, items, opts) {
        this.addClass("#" + opts.type, this);
    }
}

上述的设计思路与前面直接使用 Bootstrap 样式定义按钮不一样点在于，前者已经为你定义好了各个全局的样式类，你只须要直接引用就能够了。而此处你须要在按扭组件内部自行定义相关样式类。从封装的角度看，后者的内聚性要强于前者，由于它并不暴露全局类名。注意，为了简化起见，这里的自定义按钮组件略去了 hover、active 样式，因此与 Bootstrap 按钮有些不同。下面是该按钮组件的使用示例。固然，它与前面封装的 Bootstrap 按钮的使用示例没什么不一样。

<!-- 02-04 -->
<Button type='default'>Default</Button>
<Button type='primary'>Primary</Button>
<Button type='success'>Success</Button>

另外，切记一点，尽可能避免定义功能大而杂的按钮组件。固然，定义其它类型的组件也是同样的。轻量、按需、足够使用就好。