`
qing_gee
  • 浏览: 122649 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类
最新评论

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

    博客分类：
  • Web
手工制作文本框树形菜单 
阅读更多

前言：自己动手，丰衣足食，教育的好，那么今天我来纯手工制作一个文本框中弹出树形菜单，这个在很多的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();" >&nbsp;</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，以上环节就完了，这是一个非常实用且能够锻炼你动手能力的工艺。

 

1
顶
0
踩
分享到：
| 非工作时间想做的事情
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics