LuLu UI组件中文文档 » 静态控件之文本框

静态控件之文本框

一、普通文本框

  1. 基本态

    最简单的input标签:

    /* type='text'可缺省 */
    <input class="ui-input">

    input内置-内联标签:

    <span class="ui-input"><input></span>
    input内置-块状标签(宽度100%自适应父容器):
    <div class="ui-input"><input></div>
  2. 只读和禁用

    文本框只读: 文本框禁用:

    <input class="ui-input" readonly>
    <input class="ui-input" disabled>
  3. 出错

    文本框出错: 错误提示单实例 错误提示多实例

    <input class="ui-input error" required>
    <span class="ui-input"><input class="error" required></span>

二、带计数的文本框

  1. 带计数的文本框

    <div class="ui-input-x" style="width:400px;">
        <input id="forInputFocus" maxlength="20" placeholder="占位符">
        <div class="ui-input"></div>
        <label for="forInputFocus" class="ui-input-count">
            <span>0</span>/<span>20</span>
        </label>
    </div>

    forInputFocus这个id注意不要重复,这里只是演示其关联性,大家拷贝代码的时候注意修改去重。

    如果.ui-input-x这个div元素不设置宽度,则是100%自适应外部容器。

    另外,如果是在使用了Validate.js验证的form元素内,此label元素可缺省,直接下面代码结构:

    <div class="ui-input-x" style="width:400px;">
        <input maxlength="20">
        <div class="ui-input"></div>
    </div>
  2. 其它状态

    和普通文本框类似,略。

三、单独使用文本框样式

如果只想以插件形式单独使用文本框的UI,而不是所有UI组件集合commom/ui.css,也是支持的,直接引入:

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

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

单独使用Demo演示

输入框如果有使用placeholder属性,可以引入Placeholder.css对占位符样式进行设置。

Fork Me 返回顶部