来自 计算机网络 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 计算机网络 > 正文

jQuery完成输入框下拉列表树插件特效代码分享,

本文实例讲述了jQuery三级下拉列表导航菜单。分享给大家供大家参考。具体如下:
jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js,可无限极分类,可智能判断是否有下级菜单,鼠标经过上次菜单显示下级菜单。
运行效果图:             -------------------查看效果-------------------

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

图片 1

 图片 2

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery三级下拉列表导航菜单代码如下

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery三级下拉列表导航菜单</title>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<style type="text/css">
*{margin: 0; padding: 0;}
body{ font-size: 12px; }
li{ list-style: none;}
ul.nav li{ width: 200px; text-align:center;}
ul.nav > li{ float: left; margin-right:10px;}
ul.nav li h3{height: 40px; line-height: 40px;}
ul.nav > li > h3{ background: #72a7ff;}
ul.nav > li > ul > li h3{ background: #ffd9d9;}
ul.nav > li h3:hover,.choice{ background: #ffc0c0!important;}
ul > li > ul{ display: none;}
ul > li.on > ul{ display: block;}
ul.nav li{ position: relative;}
ul.nav > li > ul > li ul{ position: absolute; top: 0; right: -200px;}
ul.nav span.sub{ position: absolute; display: block; right:10px; top: 0; width: 10px; height: 40px; background: url(images/arrows.png) no-repeat center center;}
</style>

<script type="text/javascript">
 $(document).ready(function() {
 $("ul.nav li").hover(function(){
  $(this).addClass("on");

 },
 function(){
  $(this).removeClass("on");

 })
 });

 $(document).ready(function() {
 $("ul.nav li").hover(function(){
  $(this).parent("ul").siblings("h3").addClass("choice");

 },
 function(){
  $(this).parent("ul").siblings("h3").removeClass("choice");
 })
 });

 $(document).ready(function() { 
  if ($("ul.nav li").find("ul") .html()!="") {
  $("ul.nav li").parent("ul").siblings("h3").append("");  
  }
 });
</script>


</head>
<body>
<ul class="nav">
 <li><h3>我的网站</h3>
 <ul>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3>
  <ul>
  <li><h3>4级分类</h3>
   <ul>
   <li><h3>5级分类</h3></li>
   <li><h3>5级分类</h3></li>
   <li><h3>5级分类</h3></li>
   <li><h3>5级分类</h3></li>
   </ul>
  </li>
  <li><h3>4级分类</h3></li>
  <li><h3>4级分类</h3></li>
  <li><h3>4级分类</h3></li>
  </ul>
  </li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 </ul>
 </li>
 <li><h3>我的网站</h3>
 <ul>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 </ul>
 </li>
 <li><h3>我的网站</h3>
 <ul>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 </ul>
 </li>
 <li><h3>我的网站</h3>
 <ul>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 </ul>
 </li>
</ul>

</body>
</html>
<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三级下拉列表导航菜单代码,希望大家可以喜欢。

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

您可能感兴趣的文章:

  • jQuery实现输入框下拉列表树插件特效代码分享
  • jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
  • jQuery插件datalist实现很好看的input下拉列表
  • jQuery实现在下拉列表选择时获取json数据的方法
  • jquery+css实现下拉列表功能

您可能感兴趣的文章:

  • jQuery三级下拉列表导航菜单代码分享
  • jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
  • jQuery插件datalist实现很好看的input下拉列表
  • jQuery实现在下拉列表选择时获取json数据的方法
  • jquery+css实现下拉列表功能

本文由六合联盟网发布于计算机网络,转载请注明出处:jQuery完成输入框下拉列表树插件特效代码分享,

关键词: