LuLu UI中文文档和演示 » 静态控件之按钮

一、概述

由于原生的<button>浏览器兼容性的限制，LuLu UI推荐使用<a>标签按钮。如果有需要使用原生<button>的场合，推荐使用<label>标签与之关联。

当然，如果对低版本IE浏览器要求不高，原生<button>按钮也是可以畅快使用的。

二、`<a>`标签按钮们

基本状态

<a href="javascript:" class="ui-button" role="button">基本按钮</a>

主按钮主按钮文字很多

<a href="javascript:" class="ui-button ui-button-primary" role="button">主按钮</a>

绿色系绿色系按钮文字很多

<a href="javascript:" class="ui-button ui-button-success" role="button">绿色系</a>

红色红色文字很多

<a href="javascript:" class="ui-button ui-button-warning" role="button">红色</a>

按钮禁用

白色按钮禁用蓝色按钮禁用绿色按钮禁用红色按钮禁用

HTML代码示意：
```
<a class="ui-button disabled">白色按钮禁用</a>
<a class="ui-button ui-button-primary disabled">蓝色按钮禁用</a>
<a class="ui-button ui-button-success disabled">绿色按钮禁用</a>
<a class="ui-button ui-button-warning disabled">红色按钮禁用</a>
```
两点变化，一是移除了href属性（使元素无法被键盘focus），二是增加了disabled类名（视觉上表现为禁用态）。

如果引入了Enhance.js下，按钮禁用还可以使用$().disabled()方法，按钮可用使用$().enabled()方法。

使用示意：

按钮点击我执行$().disabled()方法

相关JS：
```
$('#btnAbled').click(function () {
    var elBtn = $(this).siblings('a');
    if (/enabled/.test(this.innerHTML)) {
        this.innerHTML = this.innerHTML.replace('enabled', 'disabled');
        elBtn.enabled();
    } else {
        this.innerHTML = this.innerHTML.replace('disabled', 'enabled');
        elBtn.disabled();
    }
});
```
需要注意的是，disabled类名本身不属于LuLu ui组件体系。在本演示页面，disabled类名的半透明效果是一个整站全局通用设置，如下：
```
.disabled {
  opacity: .4;
  filter: alpha(opacity=40);
  cursor: default;
  -ms-pointer-events: none;
  pointer-events: none;
}
```
可以根据自己的需求在项目中设置。

另外，由于IE6~IE9并不支持pointer-events属性，因此，在这些浏览器下，按钮虽是禁用的模样，但是依然可以响应点击事件，所以还是需要JS在逻辑中增加按钮是否可用的判断。
按钮loading

点击loading绽放点击loading绽放点击loading绽放点击loading绽放
```
<a href="javascript:" class="ui-button loading" role="button">点击loading绽放</a>
```
在morden主题下，按钮的加载效果类名是：ui-loading-button。

在JS中，可以使用$().loading()和$().unloading()来增加loading效果，和移除loading效果。例如：
```
// 按钮会变成loading态
$('.ui-button').loading();
```

三、<label>标签按钮

实际开发时候，<label>标签按钮都是与原生表单按钮组合使用。

基本使用

没有关联，纯标签，白色，自身语义为按钮：label标签按钮
```
<label class="ui-button" tabindex="0" role="button">label标签按钮</label>
```
和原生按钮相关联：关联的label标签按钮

此时，点击按钮可以触发表单提交行为。
```
<input id="someId" type="submit" class="ui-button-clip">
<label class="ui-button ui-button-primary" for="someId" role="button">关联的label标签按钮</label>
```
LuLu UI的Keyborad.js对outline的交互做了优化，如果对这方面要求较高，可以考虑引入。

按钮禁用

关联的label标签按钮

<input id="someId2" type="submit" class="ui-button-clip" disabled>
<label class="ui-button ui-button-primary disabled" for="someId2">关联的label标签按钮</label>

四、原生表单按钮

适合用在对低版本IE兼容性要求不算高的场合。

基本状态

<button class="ui-button">button标签</button>

<input type="button" class="ui-button" value="input标签">

<input type="submit" class="ui-button" value="submit类型">

禁用状态

disabled属性禁用按钮原生行为（如表单提交行为，键盘focus行为），disabled类型控制按钮的禁用样式。
```
<button class="ui-button disabled" disabled>button标签</button>
```
```
<input type="button" class="ui-button disabled" value="input标签" disabled>
```
如果引入了Enhance.js下，按钮禁用还可以使用$().disabled()方法，按钮可用使用$().enabled()方法。

使用示意：

点击执行$().disabled()方法点击执行$().enabled()方法

点击执行$().disabled()方法点击执行$().enabled()方法

loading状态

<button class="ui-button loading">button标签</button>

<input class="ui-button loading" value="input标签">
<input class="ui-button ui-button-primary loading" value="input标签">

由于<input>不支持伪元素，因此，用的是gif动图，所以效果要稍微差一点。

五、普通标签按钮

使用场景有限，毕竟语义和可访问性都需要额外处理，除非你的项目对这些并不在意，如内部项目。

span标签

span标签同时红色文字很多

<span class="ui-button ui-button-warning" role="button" tabindex="0">span标签同时红色文字很多</span>

div标签

有时候，我们希望按钮是自适应外部容器宽度的，此时，可以使用div标签，为了保证按钮的可访问性，需要设置role="button"以及tabindex="0"，不要担心点击时候会出现outline外框，LuLu的Keyboard.js做了体验优化。

div标签为块状按钮
```
<div class="ui-button ui-button-warning" role="button" tabindex="0">div标签为块状按钮</div>
```

六、单独使用按钮CSS

如果只想以插件形式单独使用按钮的UI，而不是所有UI组件集合commom/ui.css，也是支持的，直接引入：

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Button.css">

然后就可以参照上述文档使用了。

单独使用Demo演示

LuLu UI组件中文文档 » 静态控件之按钮

静态控件之按钮

一、概述

二、<a>标签按钮们

基本状态

按钮禁用

按钮loading

三、<label>标签按钮

基本使用

按钮禁用

四、原生表单按钮

基本状态

禁用状态

loading状态

五、普通标签按钮

span标签

div标签

六、单独使用按钮CSS

二、`<a>`标签按钮们