Hysoft-Hyui
/
selection.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"></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.selection("#exp1",{
			data:[{id:1,text:"男"},{id:2,text:"女"}]
		});
		hy.selection("#exp2",{
			data:[{deptid:"001",deptname:"产品研发部"},{deptid:"002",deptname:"人力资源部"}],
			defaultValue:"002",
			textField:"deptname",
			valueField:"deptid"
		});
		hy.selection("#exp3",{
			url: "/test/ajax.do"
		});
		hy.selection("#exp4",{
			data:[{deptid:"001",deptname:"产品研发部"},{deptid:"002",deptname:"人力资源部"}],
			defaultValue:"002",
			textField:"deptname",
			valueField:"deptid",
			onChange: function(value,text) {
				hy.message("你选择了" + text + " -- " + value, ["top:2","right:2"]);
			}
		});
	});
	</script>
</head>
<body>
	<div class="main-wrapper">

		<h3>HY-UI Demos</h3>
		<div class="theme">下拉选择框(semantic-ui dropdown扩展)演示用例。</div> <strong>先决条件 - HTML基本结构</strong>
		<br/>
		<p>
			该插件是对 <em>semantic-ui dropdown</em>
			的扩展,动态生成下拉内容。插件不负责样式的控制，使用该插件需要指定容器和隐藏域。
		</p>
		<pre><code class="javascript">// HTML代码
&lt;div class="ui selection dropdown"&gt;
    &lt;input type="hidden" name="key"&gt;
&lt;/div&gt;
</code></pre>
		<p>&nbsp;</p> <strong>可配置信息</strong>
		<p>配置信息解释</p>
		<pre><code class="javascript">// 默认配置信息
{
	input: null,// 可选，指定选择时赋值的文本隐藏域
	textField: "text", // 文本显示字段名称
	valueField: "id", // 值字段名称
	defaultValue: null, // 默认值
	url: null, // ajax请求地址
	data: null, // 指定显示数据 [{id:1,name:"xxx"}] 指定该属性后url失效
	method: "post", // ajax请求方法类型
	params: {}, // ajax请求时传递参数
	onChange: function(value,text){} // 默认回调函数
}</code></pre>
		<p>&nbsp;</p>
		<strong>1.</strong>
		简单示例 <em>hy.selection(container,options);</em>
		指定数据数组生成，默认的id做隐藏域的值,name作为显示的文本
		<pre><code class="javascript">hy.selection("ui.selection.dropdown", {
	data: [{
		id: 1,
		text: "男"
	},
	{
		id: 2,
		text: "女"
	}]
});
</code></pre>
		<div id="exp1" class="ui selection dropdown">
			<input type="hidden" name="id"></div>
		<p>&nbsp;</p>
		<strong>2.</strong>
		指定默认值
		<pre><code class="javascript">hy.selection("ui.selection.dropdown",{
    data:[{deptid:"001",deptname:"产品研发部"},{deptid:"002",deptname:"人力资源部"}],
    defaultValue:"002",
    textField:"deptname",
    valueField:"deptid"
});
</code></pre>
		<div id="exp2" class="ui selection dropdown">
			<input type="hidden" name="id"></div>
		<p>&nbsp;</p>
		<strong>3.</strong>
		Ajax异步请求
		<p>当请求发生错误时，显示错误信息</p>
		<pre><code class="javascript">hy.selection("ui.selection.dropdown",{
    url: "test/ajax.do"
});
</code></pre>
		<div id="exp3" class="ui selection dropdown">
			<input type="hidden" name="id"></div>
		<p>&nbsp;</p>
		<strong>4.</strong>
		回调函数演示
		<pre><code class="javascript">hy.selection("ui.selection.dropdown",{
    data:[{deptid:"001",deptname:"产品研发部"},{deptid:"002",deptname:"人力资源部"}],
    defaultValue:"002",
    textField:"deptname",
    valueField:"deptid",
    onChange: function(value,text) {
        hy.message("你选择了" + text + " -- " + value, ["top:2","right:2"]);
    }
});
</code></pre>
		<div id="exp4" class="ui selection dropdown">
			<input type="hidden" name="id"></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>