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类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
详谈javascript中的cookie
Jun 03 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
javascript正则表达式总结
Feb 29 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 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
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Python分支结构(switch)操作简介
2018/01/17 Python
Python 硬币兑换问题
2019/07/29 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
联想中国官方商城:Lenovo China
2017/10/18 全球购物
家庭教育先进个人事迹材料
2014/01/24 职场文书
森林防火宣传标语
2014/06/27 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书