前言：自己动手，丰衣足食，教育的好，那么今天我来纯手工制作一个文本框中弹出树形菜单，这个在很多的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;" onclick="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，以上环节就完了，这是一个非常实用且能够锻炼你动手能力的工艺。
相关推荐
jquery 点击文本框弹出热门标签 自动补全信息
总的来说，通过以上步骤，我们可以利用C#或VB.NET实现点击文本框弹出数字软键盘的功能，提供一个便捷的输入方式，特别是在触摸屏设备或者安全性要求较高的应用场景中。这个功能的实现体现了.NET Framework的灵活性和...
在网页开发中，JavaScript（JS）经常用于增强用户体验，其中一个常见的功能是实现用户单击文本框时弹出日期选择器。这个功能可以帮助用户方便快捷地输入日期，避免手动输入可能出现的格式错误。本文将详细讲解如何...
本话题主要围绕"点击text文本框弹出日期选择器"这一功能展开，它利用原生JavaScript实现，提供了一种高效且直观的用户交互方式。 首先，我们需要理解这个功能的基本工作原理。当用户点击一个预设的text文本框时，...
在网页设计中，为了提升用户体验，常常需要在用户点击文本框时弹出日历插件，帮助用户方便快捷地选择日期。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理以及动画效果，使得实现这样的功能变得...
在JavaScript中，我们可以为文本框添加`click`事件监听器，当用户点击文本框时触发弹出层，然后在弹出层中加载树形结构的页面。 接着，"点击节点的值后文本框可以获取到值"意味着我们需要在树形结构的节点上绑定...
"在VC 的下拉框中弹出树形菜单列表.rar"是一个独特的案例，它展示了一个创新的实现方式，即在传统的下拉框（ComboBox）控件中嵌入了树形菜单（TreeView）的功能。这种设计可以增强用户界面的灵活性，使得用户可以在...
在VB（Visual Basic）编程环境中，创建窗体和文本框的下拉及弹出式菜单是一项常见的任务，尤其对于开发用户界面友好的应用程序至关重要。本文将深入探讨如何使用VB来实现这一功能，以及相关的知识点。 首先，让我们...
标题中的"jquery日期日历插件 单击文本框弹出日期选择控件"就是这样一个功能，它允许用户在文本框中输入日期时，点击文本框会弹出一个日历，用户可以直观地从日历上选取日期。 描述中提到的"实用的日历效果，兼容性...
默认情况下，当用户在一个文本框中点击鼠标右键时，会弹出一个上下文菜单，该菜单提供了复制、粘贴、剪切等功能。然而，在某些应用程序设计中，可能希望移除这些默认的右键菜单行为，以便实现更高级或自定义的交互...
在JavaScript（JS）开发中，实现“js text文本框弹出城市选择”的功能是一项常见的交互设计，常见于各种在线服务，比如订机票、酒店预订等网站。这种功能为用户提供了一个友好的界面，允许他们在输入框中点击后弹出...
总的来说，"点击text文本框弹出日期选择器"是通过结合jQuery和一个日期选择器插件实现的，它提高了用户在网页上输入日期的效率，同时也提升了用户体验。通过理解并应用这些技术，开发者可以创建出更加友好和功能丰富...
点击文本框弹出日期控件，在客户端执行，纯js和html写的，大家试试，多提宝贵意见
在ASP.NET开发中，我们经常需要为用户提供便捷的输入日期的方式，这时“单击文本框弹出日期选择控件”的功能就显得尤为重要。这个功能可以让用户通过点击一个文本框，而不是手动输入日期，来选择一个日期，提高了...
仿Discuz文本框弹出层的效果
本资源“基于jquery的popup 支持树控的文本框弹出层插件.zip”是一个专为jQuery设计的弹出层插件，它允许用户在文本框上点击时显示一个包含树形控件的弹出窗口。这个功能对于需要选择复杂层级结构数据的用户界面非常...
仿Discuz文本框弹出层的效果,html文件简洁实用
将注册信息用文本框弹出显示是实现这一功能的一种常见方式，这为用户提供了一个直观且易于理解的界面。下面将详细介绍这个过程涉及的关键知识点。 1. **布局设计**： 在Android开发中，通常使用XML文件来定义界面...