文档章节

xmlplus 组件设计系列之二 - 按钮(Button)

qudou
 qudou
发布于 2017/04/26 10:05
字数 1249
阅读 22
收藏 0

按钮

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

<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-defaultbtn-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 样式定义按钮不同点在于,前者已经为你定义好了各个全局的样式类,你只需要直接引用就可以了。而此处你需要在按扭组件内部自行定义相关样式类。从封装的角度看,后者的内聚性要强于前者,因为它并不暴露全局类名。注意,为了简化起见,这里的自定义按钮组件略去了 hoveractive 样式,所以与 Bootstrap 按钮有些不一样。下面是该按钮组件的使用示例。当然,它与前面封装的 Bootstrap 按钮的使用示例没什么不同。

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

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

© 著作权归作者所有

共有 人打赏支持
qudou

qudou

粉丝 5
博文 11
码字总数 14933
作品 2
福州
程序员
私信 提问
全栈 JavaScript 框架 xmlplus 1.5.9 发布

该版本主要对全局函数 clearLibrary 作了简化,另外对文档的一些文字错误进行了修正,同时保持了 gitHub 与 npm 版本之间的同步。 xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发...

qudou
2017/04/30
3.8K
16
全栈 JavaScript 框架--xmlplus

xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 基于组件设计 在 xmlplus 中,组件是基本的构造块。评价组件设计好坏的一个重要标准是封装度。基于 xmlplus 设计的组...

qudou
2017/04/21
1K
1
xmlplus v1.5.8 正式发布 - 全栈 JavaScript 框架

全栈 JavaScript 框架 xmlplus v1.5.8 正式发布 xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 基于组件设计 在 xmlplus 中,组件是基本的构造块。评价组件设计好坏...

qudou
2017/04/27
691
2
JavaScript 框架 xmlplus 1.5.12 发布

JavaScript 框架 xmlplus 1.5.12 发布了。xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 这个版本主要添加了一个全局接口 create。该函数是一个轻量的用于创建组件...

qudou
2017/05/24
549
0
来点干货:如何基于vue2写一套UI库

又到一年年底,最近在做项目总结,抽了点时间,把公司产品做了规划,把组件整合为Vue UI库(我们用Vue2+),于是造了个轮子,其中包括 基础组件 和 应用组件,目前 组件 和 文档 在不断完善中。...

吖面吖面吖面
2017/12/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 其实我在地板也睡不着

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @witt-z :分享歌词: 阴天 在不开灯的房间,当所有思绪都一点一点沉淀。 分享莫文蔚的单曲《阴天》: 《阴天》- 莫文蔚 手机党少年们想听歌,...

小小编辑
5分钟前
9
1
微服务分布式事务实现

https://www.processon.com/view/link/5b2144d7e4b001a14d3d2d30

WALK_MAN
今天
3
0
《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
今天
4
0
大数据教程(9.5)用MR实现sql中的jion逻辑

上一篇博客讲解了使用jar -jar的方式来运行提交MR程序,以及通过修改YarnRunner的源码来实现MR的windows开发环境提交到集群的方式。本篇博主将分享sql中常见的join操作。 一、需求 订单数据表...

em_aaron
今天
3
0
十万个为什么之什么是resultful规范

起源 越来越多的人开始意识到,网站即软件,而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency)、高并发等特点...

尾生
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部