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

静态控件之按钮

一、概述

由于原生的<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 返回顶部