iSelector插件
用于城市联动选取
代码演示
自定义方式
select方式
$(function(){
//实例化城市
$('.city-container').IUI('iselector',{
dataJson: cityData, //json数据
level: 3, //多少级联动
startClick: function(self, target, config) {
console.log(self, target, config);
}
});
/**
* [description] 自定义触发事件第一个列(级)所执行的事件
* 省
*/
$('.city-container').on('choose-1', function(event, self, tagert, plusIndex, values) {
var self = self; //this
var tagert = tagert; //选中的选项
var vals = values; //返回的值是倒过来的[省，市，区]
var index = plusIndex; //索引
console.log(self, tagert, plusIndex, vals);
});
/**
* [description] 自定义触发事件第一个列(级)所执行的事件
* 市
*/
$('.city-container').on('choose-2', function(event, self, tagert, plusIndex, values) {
var self = self; //this
var tagert = tagert; //选中的选项
var vals = values; //返回的值是倒过来的[省，市，区]
var index = plusIndex; //索引
console.log(self, tagert, plusIndex, vals);
});
/**
* [description] 自定义触发事件第一个列(级)所执行的事件
* 区
*/
$('.city-container').on('choose-3', function(event, self, tagert, plusIndex, values) {
var self = self; //this
var tagert = tagert; //选中的选项
var vals = values; //返回的值是倒过来的[省，市，区]
var index = plusIndex; //索引
console.log(self, tagert, plusIndex, vals);
});
//原生select实例化
$('.city-select').IUI('iselector',{
dataJson: cityData,
level: 3,
template: '<select name="" role="content" data-caller="" class="selector-control selector-control-"><style type="text/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;
}
</style>
<script type="text/html" id="tpl-emailsuffix">
<div class="layer-header">
<div class="layer-title">弹层展示Emailsuffix</div>
</div>
<div class="layer-body" style="text-align:left">
<form role="form">
<div class="form-group">
<input type="email" id="email" class="form-control" placeholder="请输入您的邮箱地址">
</div>
</form>
</div>
</script>
<h1>Emailsuffix插件</h1>
<p>邮箱后缀补齐，支持弹层内显示</p>
<h2>代码演示</h2>
<div class="code-area">
<div class="code-box full">
<div class="code-box-demo">
<form class="form-horizontal">
<div class="form-group">
<label for="" class="col-sm-1 control-label">邮箱:</label>
<div class="col-sm-6">
<input type="email" id="email2" class="form-control" placeholder="请输入您的邮箱地址">
<span>（自定义配置email-item-custom）</span>
</div>
<div class="col-sm-3"><button class="btn btn-sm btn-default">弹出层</button></div>
</div>
</form>
<div class="memo J-memo"></div>
</div>
<div class="code-box-meta">
<div class="code-box-title">
基本用法
</div>
<div>layer + emailSuffix 组合使用</div>
<a href="javascript:;" class="code-box-open J-open">查看代码</a>
</div>
<div class="highlight-wrapper">
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s2">"#email2"</span><span class="p">).</span><span class="nx">IUI</span><span class="p">(</span><span class="s1">'emailSuffix'</span><span class="p">,{</span>
<span class="na">container</span><span class="p">:</span> <span class="s1">'.form-group'</span><span class="p">,</span>
<span class="na">style</span><span class="p">:</span> <span class="s1">'global'</span><span class="p">,</span>
<span class="na">item</span><span class="p">:</span> <span class="s1">'email-item-custom'</span><span class="p">,</span>
<span class="na">current</span><span class="p">:</span> <span class="s1">'checked'</span><span class="p">,</span>
<span class="na">emails</span><span class="p">:</span> <span class="p">[</span><span class="s1">'me.com'</span><span class="p">,</span> <span class="s1">'tom.com'</span><span class="p">,</span> <span class="s1">'aliyun.com'</span><span class="p">,</span> <span class="s1">'qq.com'</span><span class="p">,</span> <span class="s1">'gmail.com'</span><span class="p">,</span> <span class="s1">'sina.com'</span><span class="p">,</span> <span class="s1">'163.com'</span><span class="p">,</span> <span class="s1">'189.com'</span><span class="p">,</span> <span class="s1">'189.com'</span><span class="p">,</span> <span class="s1">'sohu.com'</span><span class="p">],</span>
<span class="na">checkedCall</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">//测试：报警输出选中</span>
<span class="nx">mark</span><span class="p">(</span><span class="s1">'你选择了：'</span><span class="o">+</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">());</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">layerStatic</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#layer-emailsuffix'</span><span class="p">).</span><span class="nx">IUI</span><span class="p">(</span><span class="s1">'layer'</span><span class="p">,{</span>
<span class="na">offsetWidth</span><span class="p">:</span><span class="mi">650</span><span class="p">,</span>
<span class="na">content</span><span class="p">:</span><span class="nx">$</span><span class="p">(</span><span class="s1">'#tpl-emailsuffix'</span><span class="p">).</span><span class="nx">html</span><span class="p">()</span>
<span class="p">});</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'.btn-default'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="nx">layerStatic</span><span class="p">.</span><span class="nx">showLayer</span><span class="p">();</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#email"</span><span class="p">).</span><span class="nx">IUI</span><span class="p">(</span><span class="s1">'emailSuffix'</span><span class="p">,{</span>
<span class="na">style</span><span class="p">:</span><span class="s1">'nested'</span><span class="p">,</span>
<span class="na">offsetLeft</span><span class="p">:</span><span class="mi">0</span><span class="p">,</span>
<span class="na">offsetTop</span><span class="p">:</span><span class="mi">0</span><span class="p">,</span>
<span class="p">});</span>
<span class="p">});</span></code></pre></figure>
</div>
</div>
</div>
<h2 id="api">API</h2>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>style</td>
<td>emailSuffix使用场景，如果在弹层中调用，需改为nested</td>
<td>String</td>
<td>global</td>
</tr>
<tr>
<td>item</td>
<td>邮件后缀列表项的classname，注：此处只能填写classname，且不需要前面加点</td>
<td>String</td>
<td>email-item</td>
</tr>
<tr>
<td>current</td>
<td>选中状态的classname，</td>
<td>String</td>
<td>checked</td>
</tr>
<tr>
<td>emails</td>
<td>邮箱后缀字典，此接口会直接覆盖默认的值，而不会补差</td>
<td>Array</td>
<td>[‘163.com’, ‘126.com’, ‘qq.com’, ‘gmail.com’, ‘sina.com’, ‘139.com’, ‘189.com’, ‘sohu.com’]</td>
</tr>
<tr>
<td>delay</td>
<td>延时隐藏列表，一般用于校验</td>
<td>Number</td>
<td>300</td>
</tr>
<tr>
<td>offsetLeft</td>
<td>列表位移left，仅在style:”nested”的时候需要用到，一般在global下，会自动计算，无需自己写</td>
<td>Number</td>
<td>auto</td>
</tr>
<tr>
<td>offsetTop</td>
<td>列表位移top，仅在style:”nested”的时候需要用到，一般在global下，会自动计算，无需自己写</td>
<td>Number</td>
<td>auto</td>
</tr>
<tr>
<td>offsetWidth</td>
<td>列表宽度，仅在style:”nested”的时候需要用到，一般在global下，会自动计算，无需自己写</td>
<td>Number</td>
<td>auto</td>
</tr>
<tr>
<td>offsetLeft</td>
<td>列表高度，仅在style:”nested”的时候需要用到，一般在global下，会自动计算，无需自己写</td>
<td>Number</td>
<td>auto</td>
</tr>
</tbody>
</table>
<p>如果您发现本页有什么问题，欢迎来提单 Issue : <a href="https://github.com/Janking/infinite-ui/issues" target="_blank">https://github.com/Janking/infinite-ui/issues</a></p></select>',
iselect: true,
shorthand: true
});
});API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| dataJson | 传入json数据 | Object | |
| container | 父节点 | String | |
| template | 自定义html模板 | String | |
| placeholder | 列默认显示的文字 | Object | |
| field | input的字段名 [省，市，区] | Object | |
| iselect | 是否用于select，用于自定 | Boolean | false |
| isvalue | 存的是什么，true为id,false为name | Boolean | true |
| shorthand | 是否开启简写功能 | Number | false |
| level | 多少列 | Number | 1 |
| values | 返回选中的值 | Object | |
| joinHtml | 拼接html的函数，用于json数据自定义的，里面有4个传值：[data-json数据, pid-json数据的父id, level-列数（级数）, placeholder-默认显示的文字] | Function | auto |
如果您发现本页有什么问题，欢迎来提单 Issue : https://github.com/Janking/infinite-ui/issues