jQuery多级联动城市选择组件特效代码下载


jQuery多级联动城市选择组件特效代码下载
jQuery多级联动城市选择组件特效代码下载以及多级联动、城市选择组件等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/iPicker.min.js"></script>

2. HTML代码

<div class="container">
	<h1>iPicker<span>地区选择组件</span></h1>
	<div class="wrapper">
		<div class="box">
			<div class="picker">
				<p>常规用法</p>
				<div class="demo" id="demo-1"></div>
				<div>
					<button class="reset">重置</button>
				</div>
			</div>
			<div class="console">
				<p>选择结果:</p>
				<pre></pre>
			</div>
		</div>
		<div class="box" style="height: 300px;">
			<div class="picker" style="height: 268px;">
				<p>设置层级</p>
				<div class="demo" id="demo-2-1"></div>
				<div class="demo" id="demo-2-2"></div>
				<div class="demo" id="demo-2-3"></div>
				<div>
					<button class="reset">重置</button>
				</div>
			</div>
			<div class="console">
				<p>选择结果:</p>
				<pre></pre>
				<pre></pre>
				<pre></pre>
			</div>
		</div>
		<div class="box">
			<div class="picker">
				<p>设置宽度</p>
				<div class="demo" id="demo-3"></div>
				<div>
					<button class="reset">重置</button>
				</div>
			</div>
			<div class="console">
				<p>选择结果:</p>
				<pre></pre>
			</div>
		</div>
		<div class="box">
			<div class="picker">
				<p>默认值</p>
				<div class="demo" id="demo-4"></div>
				<div>
					<button class="reset">重置</button>
				</div>
			</div>
			<div class="console">
				<p>选择结果:</p>
				<pre></pre>
			</div>
		</div>
		<div class="box">
			<div class="picker">
				<p>默认禁用</p>
				<div class="demo" id="demo-5"></div>
				<div>
					<button class="reset">重置</button>
				</div>
			</div>
			<div class="console">
				<p>选择结果:</p>
				<pre></pre>
			</div>
		</div>
		<div class="box">
			<div class="picker">
				<p>自定义占位文字</p>
				<div class="demo" id="demo-6"></div>
				<div>
					<button class="reset">重置</button>
				</div>
			</div>
			<div class="console">
				<p>选择结果:</p>
				<pre></pre>
			</div>
		</div>
		<div class="box">
			<div class="picker">
				<p>限制列表高度</p>
				<div class="demo" id="demo-7"></div>
				<div>
					<button class="reset">重置</button>
				</div>
			</div>
			<div class="console">
				<p>选择结果:</p>
				<pre></pre>
			</div>
		</div>
	</div>
</div>
<script>
	var $pre = $( "pre" );
	var $picker = $( ".picker" );
	$.getJSON( "json/area.json" ).done(function ( res ) {
		$( "#demo-1" ).iPicker({
			data: res,
			onSelect: function ( v, t, set ) {
				var text = "[ " + t + " ]";
				var value = "[ " + v + " ]";
				$pre.eq( 0 ).html( text + "<br><br>" + value );
			}
		});
		$( "#demo-2-1" ).iPicker({
			data: res,
			level: 1,
			onSelect: function ( v, t, set ) {
				var text = "[ " + t + " ]";
				var value = "[ " + v + " ]";
				$pre.eq( 1 ).html( text + "<br><br>" + value );
			}
		});
		$( "#demo-2-2" ).iPicker({
			data: res,
			level: 2,
			onSelect: function ( v, t, set ) {
				var text = "[ " + t + " ]";
				var value = "[ " + v + " ]";
				$pre.eq( 2 ).html( text + "<br><br>" + value );
			}
		});
		$( "#demo-2-3" ).iPicker({
			data: res,
			level: 3,
			onSelect: function ( v, t, set ) {
				var text = "[ " + t + " ]";
				var value = "[ " + v + " ]";
				$pre.eq( 3 ).html( text + "<br><br>" + value );
			}
		});
		$( "#demo-3" ).iPicker({
			data: res,
			width: 120,
			onSelect: function ( v, t, set ) {
				var text = "[ " + t + " ]";
				var value = "[ " + v + " ]";
				$pre.eq( 4 ).html( text + "<br><br>" + value );
			}
		});
		$( "#demo-4" ).iPicker({
			data: res,
			defaultValue: [ "230000", "230800", "230805" ],
			onSelect: function ( v, t, set ) {
				var text = "[ " + t + " ]";
				var value = "[ " + v + " ]";
				$pre.eq( 5 ).html( text + "<br><br>" + value );
			}
		});
		$( "#demo-5" ).iPicker({
			data: res,
			disabled: [ 1, 2 ],
			onSelect: function ( v, t, set ) {
				var text = "[ " + t + " ]";
				var value = "[ " + v + " ]";
				$pre.eq( 6 ).html( text + "<br><br>" + value );
			}
		});
		$( "#demo-6" ).iPicker({
			data: res,
			placeholder: [ "选择省份", "选择市", "选择区" ],
			onSelect: function ( v, t, set ) {
				var text = "[ " + t + " ]";
				var value = "[ " + v + " ]";
				$pre.eq( 7 ).html( text + "<br><br>" + value );
			}
		});
		$( "#demo-7" ).iPicker({
			data: res,
			maxHeight: 180,
			onSelect: function ( v, t, set ) {
				var text = "[ " + t + " ]";
				var value = "[ " + v + " ]";
				$pre.eq( 8 ).html( text + "<br><br>" + value );
			}
		});
	})
	$( "button.reset" ).each(function ( i ) {
		$( this ).click(function () {
			$( this ).parents( ".picker" ).next().find( "pre" ).empty();
			$picker.eq( i ).children( ".demo" ).iPicker( "reset" );
		})
	})
</script>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>

相关推荐

发表评论

相关文章