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

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

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



效果图如下:


image.png


功能介绍:


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



准备材料有:


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();" >&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,以上环节就完了,这是一个非常实用且能够锻炼你动手能力的工艺。

相关文章
|
4月前
点击添加按钮弹框动态添加内容并且拼接在页面
点击添加按钮弹框动态添加内容并且拼接在页面
14 0
|
5月前
|
JavaScript 前端开发
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
21 0
文字点击展开再次点击隐藏
文字点击展开再次点击隐藏
|
9月前
|
JSON 小程序 JavaScript
小程序地图插入图标后 怎么实现点击图标弹出窗口
小程序地图插入图标后 怎么实现点击图标弹出窗口
63 0
|
9月前
【屏幕快捷截图无法弹出编辑框】
【屏幕快捷截图无法弹出编辑框】
66 0
【屏幕快捷截图无法弹出编辑框】
tab栏切换制作(点击那一栏显示那一栏的内容,其他栏的内容隐藏)
tab栏切换制作(点击那一栏显示那一栏的内容,其他栏的内容隐藏)
tab栏切换制作(点击那一栏显示那一栏的内容,其他栏的内容隐藏)
NOTEPAD++几个有用的工具栏按钮
NOTEPAD++几个有用的工具栏按钮
NOTEPAD++几个有用的工具栏按钮
|
前端开发
更改软件typera的编辑页面背景色
更改软件typera的编辑页面背景色
128 0
更改软件typera的编辑页面背景色
创建动态工具栏并设置工具栏按钮提示
1、创建对话框程序,导入8个图标资源。 2、在对话框头文件中声明变量,代码如下: CToolBar m_ToolBar; CImageList m_ImageList; CString  m_TipText;   3、在对话框中oninitdialg函数中创建工具栏,如下: //创建图像列表 m_ImageList.
920 0