前言：自己动手，丰衣足食，教育的好，那么今天我来纯手工制作一个文本框中弹出树形菜单，这个在很多的web前端经常用到。
效果图如下：
功能介绍：
初始状态下，弹出层不显示，文本框中显示根节点内容，当点击箭头后，弹出树形下拉框，树形菜单中汇默认选中文本框中当前显示内容，点击新的节点后，文本框内容更新，同时弹出层隐藏。
准备材料有：
1.Eclipse，2.jQuery ztree，3.箭头图片，见效果图中文本框右侧。
开始制作：
1.项目目录如下：
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，以上环节就完了，这是一个非常实用且能够锻炼你动手能力的工艺。
