手工制作文本框弹出树形菜单-阿里云开发者社区

开发者社区> 沉默王二> 正文

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

简介: 手工制作文本框弹出树形菜单
+关注继续查看

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26705 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11998 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
8997 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11784 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
12917 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4600 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载