data-toggle="topjui-departmentbox" 使用方法

提问已结  2  7401
悬赏：20飞吻
<!DOCTYPE html>
<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
		<meta name="renderer" content="webkit">
		<link type="text/css" href="/libs/topjui/2.2.60/topjui/css/topjui.core.min.css" rel="stylesheet">
		<link type="text/css" href="/libs/topjui/2.2.60/topjui/themes/default/topjui.red.css" rel="stylesheet" id="dynamicTheme" />
		<link type="text/css" href="/libs/topjui/2.2.60/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<link type="text/css" href="/libs/topjui/2.2.60/static/plugins/layui/css/layui.css" rel="stylesheet" />
		<script type="text/javascript" src="/libs/topjui/2.2.60/static/plugins/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="/libs/topjui/2.2.60/static/plugins/jquery/jquery.cookie.js"></script>
		<script type="text/javascript" src="/libs/topjui/2.2.60/static/public/js/topjui.config.js"></script>
		<script type="text/javascript" src="/libs/topjui/2.2.60/topjui/js/topjui.core.min.js"></script>
		<script type="text/javascript" src="/libs/topjui/2.2.60/topjui/js/locale/topjui.lang.zh_CN.js"></script>
		<script type="text/javascript" src="/libs/topjui/2.2.60/static/plugins/layui/layui.js" charset="utf-8"></script>
		<script src="../js/ktcomm.js"></script>
		<title></title>

		<script type="text/javascript">
			//注册扩展组件
			$.parser.plugins.push("departmentbox");

			//定义扩展组件
			$.fn.departmentbox = function(options, param) {

				//当options为字符串时，说明执行的是该插件的方法。
				if(typeof options == "string") {
					// 扩展自iCombobox
					return $.fn.iCombobox.apply(this, arguments);
				}
				options = options || {};

				//当该组件在一个页面出现多次时，this是一个集合，故需要通过each遍历。
				return this.each(function() {
					var jq = $(this);

					//$.fn.iCombobox.parseOptions(this)作用是获取页面中的data-options中的配置
					var opts = $.extend({}, $.fn.iCombobox.parseOptions(this), options);

					//把配置对象myopts放到$.fn.iCombobox这个函数中执行。
					var myopts = $.extend(true, {
						data: [{
							Id: '1',
							Name: '人事部'
						}, {
							Id: '2',
							Name: '财务部'
						}, {
							Id: '3',
							Name: '研发部'
						}, {
							Id: '4',
							Name: '销售部'
						}],
						valueField: 'Id',
						textField: 'Name'
					}, opts);

					$.fn.iCombobox.call(jq, myopts);
				});
			};
			$(function() {
				$('#bb').departmentbox({
				});
			});
		</script>
	</head>

	<body>
		<p>自定义一个combobox</p>
		<label>所属部门：</label>

		<input id="aa" data-toggle="topjui-departmentbox">
		<input id="bb" >
		<input id="cc" data-toggle="topjui-combobox">
		
		
	</body>

</html>
回帖
data-toggle="topjui-departmentbox" 使用方法

友情链接
