脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → xmlplus按钮

xmlplus组件设计系列之按钮（2）

 更新时间：2017年04月26日 14:07:57   作者：qudou  
xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之按钮，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

使用原生按钮组件

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

Example: {
  xml: "<div id='example'>\
       <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 样式，但它明显地简化了按钮的使用方式。

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

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

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

带有图标的按钮

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

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

与上一节对 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:'icon-" + opts.type);
  }
}

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

<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 形成组合样式类。好了，根据这个思路，我们就可以设计出如下的组件框架。

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

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

Example: {
  xml: "<div id='example'>\
       <Button type='default'>Default</Button>\
       <Button type='primary'>Primary</Button>\
       <Button type='success'>Success</Button>\
     </div>"
}

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript中的Window.open()用法示例详解

    JavaScript中的Window.open()用法示例详解

    这篇文章主要给大家介绍了关于JavaScript中Window.open()用法的相关资料,今天在项目中用到了弹出子窗口,就想到了用JavaScript实现的两种方法,其中一个就是window.open(),需要的朋友可以参考下
    2023-07-07
  • 服务端渲染nextjs项目接入经验总结分析

    服务端渲染nextjs项目接入经验总结分析

    这篇文章主要为大家介绍了服务端渲染nextjs项目接入经验总结分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • 浅析Javascript中“==”与“===”的区别

    浅析Javascript中“==”与“===”的区别

    这篇文章主要介绍了浅析Javascript中“==”与“===”的区别，非常的全面，这里推荐给小伙伴们
    2014-12-12
  • js数组中去除重复值的几种方法

    js数组中去除重复值的几种方法

    这篇文章主要介绍了js数组中去除重复值的几种方法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-08-08
  • js实现圆形菜单选择器

    js实现圆形菜单选择器

    这篇文章主要为大家详细介绍了js实现圆形菜单选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • JS轻松实现CSS设置,DIV+CSS常用CSS设置

    JS轻松实现CSS设置,DIV+CSS常用CSS设置

    JS轻松实现CSS设置,DIV+CSS常用CSS设置...
    2007-02-02
  • 微信小程序实现菜单左右联动

    微信小程序实现菜单左右联动

    这篇文章主要为大家详细介绍了微信小程序实现菜单左右联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 浅谈js中test()函数在正则中的使用

    浅谈js中test()函数在正则中的使用

    下面小编就为大家带来一篇浅谈js中test()函数在正则中的使用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 对于Form表单reset方法的新认识

    对于Form表单reset方法的新认识

    HTML中Form表单的reset方法被用来清空用户所输入的内容，以前一直误以为其是单纯的将input等输入项中的值清空
    2014-03-03
  • pace.js页面加载进度条插件

    pace.js页面加载进度条插件

    在页面中引入 Pace.js 和您所选择主题的 CSS 文件，就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果。不需要挂接到任何代码，自动检测进展。您可以选择颜色和多种效果，有简约，闪光灯，MAC OSX，左侧填充，顶部填充，计数器和弹跳等等。
    2015-09-09

最新评论