jQuery实现输入框下拉列表树插件特效代码分享


Posted in Javascript onAugust 27, 2015

本文实例讲述了jQuery实现输入框下拉列表树插件。分享给大家供大家参考。具体如下:
这是一款基于jquery实现的下拉列表树插件源码,是一款实用的jquery 树形下拉框下拉树代码。点击文本框即可弹出树形下拉列表,单击列表项即可选中列表对应文字,是一款非常实用的特效源码。
运行效果图:                     -------------------查看效果 下载源码-------------------

 jQuery实现输入框下拉列表树插件特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery实现输入框下拉列表树插件代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现输入框下拉列表树插件代码</title>
<link href="css/dtreeck.css" type="text/css" rel="stylesheet" />
</head>
<body>

<!--代码部分begin-->
<table width="100%" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td colspan="1" valign="top" width="35%" style="padding-left: 30px;">
 </td>
 <td valign="top" height="65%" align="left">
  <form method="post" id="regform">
  <table width="70%" cellpadding="1" cellspacing="0" border="0" style="margin-top: 10px;">
   <tr>
   <td width="20%" align="right">
   父 菜 单:
   </td>
   <td width="30%" align="left">
   <input type="text" id="menu_parent_name" style="width: 150px;">
   <input type="hidden" id="menu_parent" name="menu_parent">
   <input type="hidden" id="oprate" name="oprate">
   <input type="hidden" id="menu_id" name="menu_id">
   </td>
   <td width="20%" align="right">
   </td>
   <td width="30%" align="left">
   </td>
   </tr>
  </table>
  </form>
 </td>
 </tr>
</table>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script src="js/dtreeck.js"></script>
<div id="treediv">
 <div align="right">
 <a href="javascript:viod(0);" id="closed"><font color="#000">关闭</font></a>
  </div>
  <script src="js/lanren.js"></script>
</div>  
<script>
//生成弹出层的代码
<!-- 弹出层-->
xOffset = 0;//向右偏移量
yOffset = 25;//向下偏移量
var toshow = "treediv";//要显示的层的id
var target = "menu_parent_name";//目标控件----也就是想要点击后弹出树形菜单的那个控件id
$("#"+target).click(function (){
 $("#"+toshow)
 .css("position", "absolute")
 .css("left", $("#"+target).position().left+xOffset + "px")
 .css("top", $("#"+target).position().top+yOffset +"px").show();
});
//关闭层
$("#closed").click(function(){
 $("#"+toshow).hide();
});

//判断鼠标在不在弹出层范围内
 function  checkIn(id){
 var yy = 20;  //偏移量
 var str = "";
 var  x=window.event.clientX;  
 var  y=window.event.clientY;  
 var  obj=$("#"+id)[0];
 if(x>obj.offsetLeft&&x<(obj.offsetLeft+obj.clientWidth)&&y>(obj.offsetTop-yy)&&y<(obj.offsetTop+obj.clientHeight)){  
 return true;
 }else{  
 return false;
 }  
 }  
//点击body关闭弹出层
 $(document).click(function(){
 var is = checkIn("treediv");
 if(!is){
  $("#"+toshow).hide();
 }
 });
<!-- 弹出层-->
//生成弹出层的代码

//点击菜单树给文本框赋值------------------菜单树里加此方法
function setvalue(id,name){
 $("#menu_parent_name").val(name);
 $("#menu_parent").val(id);
 $("#treediv").hide();
}
</script>
<!--代码部分end-->

</body>
</html>

以上就是为大家分享的jQuery实现输入框下拉列表树插件代码,希望大家可以喜欢。

Javascript 相关文章推荐
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 #Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 #Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 #Javascript
javascript引用类型之时间Date和数组Array
Aug 27 #Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 #Javascript
jQuery手机拨号界面特效代码分享
Aug 27 #Javascript
JS实现自动切换文字的导航效果代码
Aug 27 #Javascript
You might like
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
input的focus方法使用
2010/03/13 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python中的tcp示例详解
2018/12/09 Python
Python递归函数实例讲解
2019/02/27 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Pytorch之保存读取模型实例
2019/12/30 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
大专生简历的自我评价
2013/11/26 职场文书
检讨书1000字
2014/10/11 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
学校端午节活动总结
2015/02/11 职场文书
母亲节寄语大全
2015/02/27 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python