微客导航 » 文章资讯 » xmlplus组件设计系列之按钮（2）

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

2024-02-24 23:10:07 165

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

使用原生按钮组件

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

Example:{
xml:"\
\
Primary\

" }

虽然原生按钮外观不那么吸引人，但原生按钮未经特殊包装，所以渲染起来最快，执行效率最高。

使用Bootstrap样式的按钮

如果你的项目在视觉上没有特别要求的话。使用Bootstrap样式来定义按钮组件是一个好主意。按传统方式使用Bootstrap按扭，你需要像下面这样使用。

Default
Primary
Success

请认真观察，你是不是觉得它给你的比你要求的要多。你不但发现了好多的type=button，还发现了好多的btn。现在下面给出一个组件，它基于Bootstrap样式，但它明显地简化了按钮的使用方式。

Button:{
xml:"",
fun:function(sys,items,opts){
this.addClass("btn-"+opts.type);
}
}

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

Default
Primary
Success

带有图标的按钮

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


Add
Remove
Save

与上一节对Bootstrap按钮的封装类似，通过观察提炼出重复出现的部分，将变化的部分以接口形式展现。上面的按钮仅图标类型名和文本是可变的，所以我们可以做出如下的设计：

Button:{
xml:"",
fun:function(sys,items,opts){
this.attr("data-options"+"iconCls:'icon-"+opts.type);
}
}

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


Add
Reomve
Save
Cut

自定义你的按钮组件

使用类似Bootstrap,EasyUI等开源框架，可以避免重造轮子。然而，当这些开源项目无法满足你的需求时，你就需要自己动手了。

为简单起见，现在假定上述Bootstrap框架并不存在，那么如何设计一套上述的按钮？这样的实践是非常有意义的，它有助于你举一反三。

现在让我们重新对上面的按钮组件作观察。你会发现，Bootstrap设计了一些可以组合的样式类，其中btn是每一个按钮都需要的，另外像btn-default、btn-primary等等都根据需要与btn形成组合样式类。好了，根据这个思路，我们就可以设计出如下的组件框架。

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

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

Example:{
xml:"\
Default\
Primary\
Success\

" }

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

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

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐