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