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 相关文章推荐
js实现页面转发功能示例代码
Aug 05 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 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
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
Python3实现生成随机密码的方法
2014/08/23 Python
Python的设计模式编程入门指南
2015/04/02 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
python 提取文件指定列的方法示例
2019/08/07 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
Python3进制之间的转换代码实例
2019/08/24 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
python源文件的字符编码知识点详解
2021/03/04 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
办公室人员先进事迹
2014/01/27 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
教学评估实施方案
2014/03/16 职场文书
县委务虚会发言材料
2014/10/20 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
win10清理dns缓存
2022/04/19 数码科技