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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 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与javascript的两种交互方式
2006/10/09 PHP
php MYSQL 数据备份类
2009/06/19 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
简单谈谈python中的Queue与多进程
2016/08/25 Python
Python网络编程详解
2017/10/31 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
linux面试题参考答案(8)
2015/08/11 面试题
销售提升方案
2014/06/07 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
开场白怎么写
2015/06/01 职场文书
家属联谊会致辞
2015/07/31 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
Win10系统下配置Java环境变量
2021/06/13 Java/Android
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript