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