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

使用原生按钮组件

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

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

xmlplus 组件设计系列之二 - 按钮的更多相关文章

  1. xmlplus 组件设计系列之零 - xmlplus 简介

    xmlplus 是什么 xmlplus 是博主写的一个 JavaScript 框架,用于快速开发前后端项目. xmlplus 基于组件设计,组件是基本的构造块.评价组件设计好坏的一个重要标准是封装度. ...

  2. xmlplus 组件设计系列之三 - 文本框

    文本框是页面中最常用的输入组件,它的默认使用方式如下: <input type='text'/> 当然,这里的 `type='text' 可以略去不写.大部分情况下,使用默认的文本框作为输 ...

  3. xmlplus 组件设计系列之一 - 图标

    网页上使用的图标分可为三种:文件图标.字体图标和 SVG 图标.对于文件图标,下面仅以 PNG 格式来说明. PNG 图标 对于 PNG 图标的引用,有两种方式.一种是直接由 HTML 元素 img ...

  4. xmlplus 组件设计系列之五 - 选项卡

    这一章将设计一个选项卡组件,选项卡组件在手持设备上用的比较多,下面是一个示意图: 选项卡组件的分解 在具体实现之前,想像一下目标组件是如何使用的,对于设计会有莫大的帮助.通过观察,可以将选项卡组件分为 ...

  5. xmlplus 组件设计系列之六 - 下拉刷新

    "下拉刷新"由著名设计师 Loren Brichter 设计,并应用于 Twitter 第三方应用 Tweetie 中.2010年4月,Twitter 收购 Tweetie 开发商 ...

  6. xmlplus 组件设计系列之九 - 树(Tree)

    树形组件是一种具有层级结构的组件,广泛应用于各种场景.本章会实现一个简单的树形组件,尽管功能有限,但你可以通过扩展它来实现自己所需要的树形组件. 数据源 树形组件的数据源可以是 JSON 格式的数据对 ...

  7. xmlplus 组件设计系列之四 - 列表

    列表组件是极其常用的一类组件,是许多视图组件系统的必须包含的.列表可以做的很简单,只显示简洁的内容.列表也可以做的很复杂,用于展示非常丰富的内容. 组成元素 列表离不开列表项以及包含列表项的容器.下面 ...

  8. xmlplus 组件设计系列之七 - 路由

    在浏览器端,对路由的理解一般是根据不同的 URL 完成页面的切换.在服务器端,则是根据不同的 URL 请求回馈相关的页面.在本章,我们讲述的是根据接收到的不同命令,路由组件呈现出不同的页面,这算是广义 ...

  9. xmlplus 组件设计系列之八 - 分隔框(DividedBox)

    分隔框(DividedBox)是一种布局类组件,可以分为两类,其中一类叫水平分隔框(HDividedBox),另一类叫垂直分隔框(VDividedBox).水平分隔框会将其子级分为两列,而垂直分隔框则 ...

随机推荐

  1. Team Foundation Server 基本功能

    Team Foundation Server(以下简称TFS)作为Microsoft发布的一个主要用于团队源代码管理工具,以敏捷开发作为其最大的特点而占领部分市场.该文主要介绍 TFS 在 Visua ...

  2. web第十天总结

    今天进入web学习第十天,学习了xml序列化,servlet,其他的想不起来了,回顾以前的java基础面向对象,多态,继承.封装,但是还不是很理解.对于map,list,set更是理解不透,2011年 ...

  3. NSTimer的精确度

    1.iOS中一般UI上面常用两种定时器 NSTimer和CADisplayLink,那么它们分别的精确度是如何呢? CADisplayLink 是用于帧刷新定时器,也就是和界面的刷新率保持一致,理想情 ...

  4. python中的列表list

    序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型,但最常见的是列表和元组. 序列 ...

  5. 文件上传组件FileUpload 以及邮箱搭建JavaMail

     文件上传与下载 1.1 文件上传 案例: 注册表单/保存商品等相关模块! --à 注册选择头像 / 商品图片 (数据库:存储图片路径 / 图片保存到服务器中指定的目录) 文件上传,要点: 前台: 1 ...

  6. 初见 ThreadLocal 类

    这个类能够将一个对象和一个线程绑定起来. 之所以写这个类是因为 DBUtils 工具类,在 JavaEE 经典三层结构中对于事务的操作,不方便放在 DAO 层,因为具有侵入性,只适合放在 Servic ...

  7. rgba()和opacity的使用

    rgba()表示 红 绿 蓝 alpha ,W3C指在原有的rgb颜色模型之后增加了 “alpha”参数,“可以让制定的颜色透明化”(rgb()上扩展的,其只可以设置颜色,而不能使设置的颜色透明化) ...

  8. csvkit---python一个牛逼到不行的csv处理库

    先吐槽一下:不管是百度还是谷歌,查来查去除了官方文档之外就没有任何可以借鉴的例子,虽然官方文档写的挺好的.但是我一直以为是在python语言的方式运行的,结果是以命令行的方式运行的,搞得我还以为这个库 ...

  9. unity3d屏蔽Windows10输入法

    在win10上,如果安装了某些输入法(比如QQ输入法),会造成unity的键盘事件被输入法捕获而不能触发的情况.只有将输入法切换到英文状态下才能响应键盘事件. 解决办法有, 1:用户主动切换输入法,甚 ...

  10. C语言使用clock进行计时

    #include "stdio.h" #include "stdlib.h" #include "time.h" int main( voi ...