Hysoft-Hyui
/
combo.html

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<title>组合框插件演示</title>
	<link rel="stylesheet" href="packaged/css/semantic.css" type="text/css" />
	<link rel="stylesheet" href="css/default.css" type="text/css" />
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<style type="text/css">
	.ui.combo {
		position: relative;
	}
	.ui.combo .wrap {
		position:absolute;
		width:100%;
		background:#fff;
		z-index:1;
		display:block;
		margin-top:2px;
		border:1px #ccc solid;
		cursor:pointer;
		min-height:100px;
		max-height:250px;
		overflow-y:auto;
		overflow-x:auto;
		margin: 0px;
		border-radius: 0.3125em;
		-webkit-transition: background-color 0.3s ease-out, -webkit-box-shadow 0.2s ease, border-color 0.2s ease;
		transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
		-webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
		box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
		-webkit-appearance: none;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}

	.ui.combo .item {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		vertical-align: middle;
		line-height: 1;
		text-decoration: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: opacity 0.2s ease, background 0.2s ease, -webkit-box-shadow 0.2s ease;
		transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	}

	.ui.combo .active.item {
		background: #FBEC88;
		border-radius: 0px;
	}

	.ui.combo .item {
		position: relative;
		width: 100%;
		padding: 0.83em 0.95em;
		border-top: 0em solid rgba(0, 0, 0, 0);
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-moz-user-select: -moz-none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
		border-bottom: 1px dashed #ccc;
	}

	.ui.combo .item.hover {
		background: #eaf2ff;;
		border-radius: 0px;
	}
	</style>
	<script src="js/jquery.min.js"></script>
	<script src="packaged/javascript/semantic.js"></script>
	<script src="javascript/hyui.src.js"></script>

	<script type="text/javascript">
	$(document).ready(function(){
		hy.combo("#exp1",{
			data: [{id:1,text:"java"},{id:2,text:".net"},{id:3,text:"asp"}],
			defaultValue: 3
		});
		hy.combo("#exp2",{
			data: [{"key":"001","value":"Javascript"},{"key":"002","value":"Nodejs"}],
			textField: "value",
			valueField: "key",
			onChange: function(value, text) {
				hy.message("你选择了 " + text + " 值 " + value, ["right:2", "bottom:2"]);
			}
		});
	});

	</script>
</head>
<body>
	<div class="main-wrapper">

		<h3>HY-UI Demos</h3>

		<div class="theme">组合框插件演示用例。</div>
		<strong>1.</strong>
		前置条件
		<p>需要指定div元素作为容器, 示例：</p>
		<pre><code class="javascript">&lt;div class="ui combo"&gt;&lt;/div&gt;</code></pre>
		<p>&nbsp;</p>
		<strong>2.</strong> 简单示例 <em>hy.combo(container, options);</em>
		<pre><code class="javascript">data: [{id:1,text:"java"},{id:2,text:".net"},{id:3,text:"asp"}]</code></pre>
		<pre><code class="javascript">hy.combo(".ui.combo", {
	data: data,
	defaultValue: 3
});
</code></pre>
		<div id="exp1" class="ui combo"></div>
		<p>&nbsp;</p>
		<strong>3.</strong> 可配置信息
		<pre><code class="javascript">// 默认配置信息
{
	textField: "text", // 文本显示字段名称
	valueField: "id", // 值字段名称
	defaultValue: null, // 默认值
	url: null, // ajax请求地址
	data: null, // 指定显示数据 [{id:1,text:"xxx"}] 指定该属性后url失效
	method: "post", // ajax请求方法类型
	params: {}, // ajax请求时传递参数
	onChange: function(value,text){}, // 默认回调函数
	onError: function(){} // ajax 请求发生错误时执行函数
}</code></pre>
		<p>&nbsp;</p>
		<strong>4.</strong> 综合演示
		<pre><code class="javascript">var data = [{"key":"001","value":"Javascript"},{"key":"002","value":"Nodejs"}]</code></pre>
		<pre><code class="javascript">hy.combo(".ui.combo", {
	data: data,
	textField: "value",
	valueField: "key",
	onChange: function(value, text) {
		hy.message("你选择了 " + text + " 值 " + value, ["right:2", "bottom:2"]);
	}
});
</code></pre>
		<div id="exp2" class="ui combo"></div>
		<p>&nbsp;</p>
		<div class="theme">&copy;2014 宏宇软件 by sylthasgg@gmail.com</div>
	</div>

	<script type="text/javascript" src="js/highlight.js"></script>
	<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
</body>
</html>