LuLu UI组件中文文档 » 静态控件之按钮
Fork Me
关于
命名与设计
使用与发布
组件
颜色
按钮
文本框
搜索框
文本域
表格
loading效果
占位符
单复选框
Switch开关
Select下拉框
Datalist数据列表
Range范围选择
Color颜色选择
Dialog弹框
Tips等提示
LightTip轻提示
Pagination分页
Drop等下拉
Validate表单验证
DateTime日期选择
Tab选项卡切换
综合实例
富交互列表
表单解决方案

静态控件之按钮

一、概述

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

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

二、<a>标签按钮们

  1. 基本状态

    基本按钮

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

  2. 按钮禁用

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

    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在逻辑中增加按钮是否可用的判断。

  3. 按钮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>标签按钮都是与原生表单按钮组合使用。

  1. 基本使用

    没有关联，纯标签，白色，自身语义为按钮：

    <label class="ui-button" tabindex="0" role="button">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的交互做了优化，如果对这方面要求较高，可以考虑引入。

  2. 按钮禁用

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

四、原生表单按钮

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

  1. 基本状态

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

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

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

  2. 禁用状态

    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()方法

  3. 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动图，所以效果要稍微差一点。

五、普通标签按钮

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

  1. span标签

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

  2. 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演示

Fork Me 返回顶部