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

阅读更多

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

 

效果图如下：

 

功能介绍：

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

 

准备材料有：

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

 

开始制作：

1.项目目录如下：

 

2.在inputCombo.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，以上环节就完了，这是一个非常实用且能够锻炼你动手能力的工艺。