xmlplus组件设计系列之按钮(2)


Posted in Javascript onApril 26, 2017

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

使用原生按钮组件

在 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 相关文章推荐
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
JSON相关知识汇总
Jul 03 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
js实现楼层导航功能
Feb 23 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 #Javascript
JS实现数组按升序及降序排列的方法
Apr 26 #Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 #Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 #Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 #Javascript
Vue.js实现文章评论和回复评论功能
May 30 #Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 #Javascript
You might like
一个简单的PHP入门源程序
2006/10/09 PHP
杏林同学录(七)
2006/10/09 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python深入学习之闭包
2014/08/31 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python版百度语音识别功能
2019/07/09 Python
python的常见矩阵运算(小结)
2019/08/07 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
父亲节活动策划方案
2014/08/24 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
民主评议党员工作总结
2014/10/20 职场文书
项目转让协议书
2014/10/27 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
培训师岗位职责
2015/02/14 职场文书
就业证明函
2015/06/17 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书