手工制作文本框弹出树形菜单

你的名字 2021-05-10 11:18 466阅读 0赞

**前言**：自己动手，丰衣足食，教育的好，那么今天我来纯手工制作一个文本框中弹出树形菜单，这个在很多的web前端经常用到。

效果图如下：

![29106ad1-ce9f-3e74-9478-8e9e12f45fd4.png][]

**功能介绍**：

初始状态下，弹出层不显示，文本框中显示根节点内容，当点击箭头后，弹出树形下拉框，树形菜单中汇默认选中文本框中当前显示内容，点击新的节点后，文本框内容更新，同时弹出层隐藏。

**准备材料有**：

1.Eclipse，2.[jQuery ztree][]，3.箭头图片，见效果图中文本框右侧。

**开始制作**：

1.项目目录如下：  
![0cbfa15e-c5a5-3d0d-83ef-75efe0775ea4.png][]

2.在inputCombo.html加入以下内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>手工制作输入框中探出树形菜单</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    		<link href="css/demo.css" rel="stylesheet" type="text/css" />
    		<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    		<script type="text/javascript" src="js/jquery.ztree.core-3.5.min.js"></script>
    
    		<style>
    			.combo-arrow {
    				width: 18px;
    				height: 20px;
    				overflow: hidden;
    				display: inline-block;
    				vertical-align: top;
    				cursor: pointer;
    				opacity: 0.6;
    				filter: alpha(opacity = 60);
    				background: url('img/combo_arrow.png') no-repeat center center;
    				background-color: #E0ECFF;
    			}
    
    			.combo {
    				border-color: #95B8E7;
    				background-color: #ffffff;
    				display: inline-block;
    				white-space: nowrap;
    				margin: 0;
    				padding: 0;
    				border-width: 1px;
    				border-style: solid;
    				overflow: hidden;
    				vertical-align: middle;
    			}
    
    			.combo-text {
    				font-size: 12px;
    				border: 0px;
    				line-height: 20px;
    				height: 20px;
    				margin: 0;
    				padding: 0px 2px;
    			}
    
    			.ztree {
    				margin-top: 0px;
    				border: 1px solid #617775;
    				background: #f0f6e4;
    				height: 260px;
    				overflow-y: auto;
    				min-width: 132px;
    			}
    
    		</style>
    		<script type="text/javascript">
    			var setting = {
    				view : {
    					dblClickExpand : false
    				},
    				data : {
    					simpleData : {
    						enable : true
    					}
    				},
    				callback : {
    					onClick : onClick
    				},
    				view : {
    					selectedMulti : false,
    					showIcon : false
    				}
    			};
    
    			window.onload = function() {
    				var zNodes = [{
    					name : "父节点1 - 展开",
    					open : true,
    					children : [{
    						name : "父节点11 - 折叠",
    						children : [{
    							name : "叶子节点111"
    						}, {
    							name : "叶子节点112"
    						}, {
    							name : "叶子节点113"
    						}, {
    							name : "叶子节点114"
    						}]
    					}, {
    						name : "父节点12 - 折叠",
    						children : [{
    							name : "叶子节点121"
    						}, {
    							name : "叶子节点122"
    						}, {
    							name : "叶子节点123"
    						}, {
    							name : "叶子节点124"
    						}]
    					}, {
    						name : "父节点13 - 没有子节点",
    						isParent : true
    					}]
    				}, {
    					name : "父节点2 - 折叠",
    					children : [{
    						name : "父节点21 - 展开",
    						open : true,
    						children : [{
    							name : "叶子节点211"
    						}, {
    							name : "叶子节点212"
    						}, {
    							name : "叶子节点213"
    						}, {
    							name : "叶子节点214"
    						}]
    					}, {
    						name : "父节点22 - 折叠",
    						children : [{
    							name : "叶子节点221"
    						}, {
    							name : "叶子节点222"
    						}, {
    							name : "叶子节点223"
    						}, {
    							name : "叶子节点224"
    						}]
    					}, {
    						name : "父节点23 - 折叠",
    						children : [{
    							name : "叶子节点231"
    						}, {
    							name : "叶子节点232"
    						}, {
    							name : "叶子节点233"
    						}, {
    							name : "叶子节点234"
    						}]
    					}]
    				}, {
    					name : "父节点3 - 没有子节点",
    					isParent : true
    				}];
    
    				$("#proxyserial").attr({
    					value : zNodes[0].name
    				});
    				$.fn.zTree.init($("#treeDemo"), setting, zNodes);
    			};
    
    			/**
    			 * 隱藏樹形下拉框
    			 */
    			function hideMenu() {
    				$("#menuContent").fadeOut("fast");
    				$("body").unbind("mousedown", onBodyDown);
    			}
    
    			/**
    			 * 点击树的时候给文本框赋值
    			 */
    			function onClick(e, treeId, treeNode) {
    				$("#proxyserial").attr({
    					value : treeNode.name
    				});
    				hideMenu();
    			}
    
    			/**
    			 * 打开树形结构
    			 */
    			function showMenu() {
    				var cityObj1 = $("#proxyserial");
    				var cityOffset1 = $("#proxyserial").offset();
    				$("#menuContent").css({
    					left : cityOffset1.left + "px",
    					top : cityOffset1.top + cityObj1.outerHeight() + "px"
    				}).slideDown("fast");
    				$("body").bind("mousedown", onBodyDown);
    			}
    
    			/**
    			 * 点击树形结构以外时，关闭树形下拉框
    			 *
    			 * @param event
    			 */
    			function onBodyDown(event) {
    				if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
    					hideMenu();
    				}
    			}
    		</script>
    	</head>
    
    	<body>
    		<span class="combo">
    			<input type="text" class="combo-text" style="height: 20px;" id="proxyserial" readonly />
    			<span class="combo-arrow" style="height: 20px;"	οnclick="showMenu();" > </span> </span>
    
    		<div id="menuContent" class="menuContent" style="display: none; position: absolute;">
    			<ul id="treeDemo" class="ztree"></ul>
    		</div>
    	</body>
    </html>

3.关键点介绍：

3.1.要使弹出层在文本框的下侧进行显示，控制代码（控制弹出层的坐标）为

var cityObj1 = $("#proxyserial");
    				var cityOffset1 = $("#proxyserial").offset();
    				$("#menuContent").css({
    					left : cityOffset1.left + "px",
    					top : cityOffset1.top + cityObj1.outerHeight() + "px"
    				}).slideDown("fast");
    				$("body").bind("mousedown", onBodyDown);

3.2.其余就是css式样，对文本框+箭头的式样在很多网页上都有，可以根据F12得来（de,lai,quan,bu,fei,gong,fu）。

3.3.再者就是生成节点，因为很多情况下，节点的数据都非上文中所定死的json数据，而是由一些规则的数据生成所得，这个根据你的需要进行编码。

OK，以上环节就完了，这是一个非常实用且能够锻炼你动手能力的工艺。

[29106ad1-ce9f-3e74-9478-8e9e12f45fd4.png]: /images/20210506/f4a1e9b961294be490097ce9458ad141.png
[jQuery ztree]: https://github.com/zTree/zTree_v3
[0cbfa15e-c5a5-3d0d-83ef-75efe0775ea4.png]: /images/20210506/ee3353b857184733b56b7ceaa2484764.png