suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery implementiert den Eingabefeld-Dropdown-Listenbaum-Plug-in-Spezialeffektcode „sharing_jquery'.

jQuery implementiert den Eingabefeld-Dropdown-Listenbaum-Plug-in-Spezialeffektcode „sharing_jquery'.

WBOY
WBOYOriginal
2016-05-16 15:42:171364Durchsuche

Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung des Eingabefeld-Dropdown-Listenbaum-Plug-Ins. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein Dropdown-Listenbaum-Plug-In-Quellcode, der auf JQuery basiert. Es handelt sich um einen praktischen Dropdown-Baumcode für JQuery-Baum-Dropdown-Felder. Klicken Sie auf das Textfeld, um eine baumförmige Dropdown-Liste aufzurufen, und klicken Sie auf das Listenelement, um den der Liste entsprechenden Text auszuwählen. Es handelt sich um einen sehr praktischen Quellcode für Spezialeffekte.
运行效果图:                     ------------- --------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.

Die jQuery-Implementierung des für Sie freigegebenen Plug-in-Codes für den Eingabefeld-Dropdown-Listenbaum lautet wie folgt



Das Obige ist die jQuery-Implementierung des mit Ihnen geteilten Eingabefeld-Dropdown-Listenbaum-Plug-In-Codes. Ich hoffe, es gefällt Ihnen. 
<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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery Online-Sitzplatzauswahl-Plug-in, Sitztabellen, Spezialeffekte, Codesharing_jqueryNächster Artikel：jQuery Online-Sitzplatzauswahl-Plug-in, Sitztabellen, Spezialeffekte, Codesharing_jquery

In Verbindung stehende Artikel

Mehr sehen