xmlplus组件设计之按钮的示例分析

这篇文章主要介绍xmlplus组件设计之按钮的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联-专业网站定制、快速模板网站建设、高性价比石林网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式石林网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖石林地区。费用合理售后完善，10余年实体公司更值得信赖。

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

使用原生按钮组件

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

Example: {
  xml: "\
       \
       Primary\

" }

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

使用 Bootstrap 样式的按钮

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

Default
Primary
Success

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

Button: {
  xml: "",
  fun: function (sys, items, opts) {
    this.addClass("btn-" + opts.type);
  }
}

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

Default
Primary
Success

带有图标的按钮

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


  Add
  Remove
  Save

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

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

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

大橙子网站建设，新征程启航

xmlplus组件设计之按钮的示例分析

其他资讯