emailSuffix组件

Intro

EmailSuffix插件是一个能够自动补全、选取邮件后缀的输入插件，方便快捷，使用简单。

Author

name:janking
concat:[email protected]

Example

http://codepen.io/SeasonDe/pen/bZWELk

Options

@param {String}      container               组件的执行上下文
@param {String}      style                   组件被 append 的位置，若为global，则 append to container，否则将插入到和被调用元素的同一级节点中
@param {String}      item                    邮箱后缀列表 li 的 class
@param {String}      current                 邮箱后缀列表 li 的选中 class
@param {Array}       emails                  常用邮箱后缀，若要增加新邮箱后缀，需要复写原有默认的邮箱，否则数组将会被覆盖
@param {Number}      delay                   delay 毫秒后隐藏列表
@param {Number}      offsetLeft              组件定位 - left
@param {Number}      offsetTop               组件定位 - top
@param {Number}      offsetWidth             组件宽度 - width
@param {Number}      offsetHeight            组件高度 - height

Methods

@param {Function}    checkedCall             回调函数，选中后触发

Usage

1、 简单使用（默认配置）

/* html */
<form class="form-horizontal">
    <div class="form-group">
       <label for="" class="col-sm-1 control-label">邮箱1:</label>
       <div class="col-sm-3">
           <input type="email" id="email" class="form-control"  placeholder="请输入您的邮箱地址">
         <span>（默认配置）</span>
       </div>
   </div>
</form>

/* js */
$("#email").IUI('emailSuffix');

2、 自定义配置

/* html */
<form class="form-horizontal">
   <div class="form-group">
       <label for="" class="col-sm-1 control-label">邮箱2:</label>
       <div class="col-sm-3">
           <input type="email" id="email2" class="form-control"  placeholder="请输入您的邮箱地址">
         <span>（自定义配置email-item-custom）</span>
       </div>
   </div>
</form>

/* css */
.email-item-custom:hover,
.email-item-custom.checked {
    background-color: #c3ec60;
    border-radius: 0px;
}
.email-item-custom {
    padding: 8px 10px;
    border-bottom: 1px #bff51c solid;
    cursor: pointer;
    font-size: 16px;
}

/* js */
$("#email2").IUI('emailSuffix', 
{
    container: '.form-group',
    style: 'global',
    item: 'email-item-custom',
    current: 'checked',
    emails: ['me.com', 'tom.com', 'aliyun.com', 'qq.com', 'gmail.com', 'sina.com', '163.com', '189.com', '189.com', 'sohu.com'],
    delay: 300,
    // 建议不修改以下注释的内容
    // offsetLeft: $(this).offset().left,
    // offsetTop: $(this).offset().top,
    // offsetWidth: $(this).outerWidth(),
    // offsetHeight: $(this).outerHeight(),
    // 回调函数
    checkedCall: function() {
        //测试：报警输出选中
        alert($(this).val());
    }
});

Attention

需要引入./src/{pc|mobile}/emailsuffix.scss.scss样式
or
需要引入./dist/style-{pc|mobile}.css样式
(请留意iui.js的版本，旧版本不支持并报错)