扩展Jquery.tree实现下拉菜单树

小弟赚点开源币换好东东。见笑了。

jQuery.fn.extend({
DropTree:function(URL){
  var offset = this.offset();
  var timeout = null;
  if(offset!=null)
  {
   var height = this.height();
   this.after('<img src="/images/pick-button.gif"  align="ABSMIDDLE" id="inputchannel" /><div id="DropTree" style="background-color:#fff;border:1px dotted #FF3300;position: absolute;left:'+(offset.left)+';"><ul id="black"></ul></div>');
   $('#black').treeview({
    url: URL
   });
   $('#DropTree').hide();
   $('#DropTree').css('width','200');
   $('#inputchannel').click(function(){
    $('select').hide();
    $('#DropTree').show();
    if($('#black').html()=='')
    {
     $('#black').html('<a href="/channel/create/type/media">'+l_add+l_space+l_media+'</a>');
    }
    if((offset.top+$('#DropTree').height())>$().height())
    {
     $('#DropTree').css('top',offset.top-$('#DropTree').height());
    }
    else
    {
     $('#DropTree').css('top',offset.top+height+8);
    }
   });
   $('#DropTree').mouseover(function(){
    if (timeout) clearTimeout(timeout);
   });
   $('#DropTree').mouseout(function(){
    hideTree();
   });
   $('#inputchannel').mouseout(function(){
    hideTree();
   });
  }
  function hideTree() {
   if (timeout) clearTimeout(timeout);
   timeout = setTimeout(hideTreeNow, 500);
  };
  function hideTreeNow()
  {
   $('select').show();
   $('#DropTree').hide();
  }
}
});
隐藏下拉菜单
jQuery.extend({
DropTreeHide:function(){
  $('select').show();
  $('#DropTree').hide();
}
});



$("#jquery").after("<script src='/scripts/jquery-treeview/lib/jquery.cookie.js' type='text/javascript'></script>");
$("#jquery").after("<script src='/scripts/jquery-treeview/jquery.treeview.js' type='text/javascript'></script>");
$("#jquery").after("<script src='/scripts/jquery-treeview/jquery.treeview.async.js' type='text/javascript'></script>");
$("#jquery").after('<link href="/scripts/jquery-treeview/jquery.treeview.css" rel="stylesheet" type="text/css" />');
$("#jquery").after("<script src='/scripts/custom/DropTree.js' type='text/javascript'></script>");
//调用 channel_name为text或其他任何input控件
$("#channel_name").DropTree('/channel/tree/type/adplace');

服务器端需要提供Jquery.treeview要求的Json数组
[{"text":"<img src=\"\/images\/media.gif\" align=\"ABSMIDDLE\" \/>\u8702\u9e1f\u7f51","children":[{"text":"<img src=\"\/images\/channel.gif\" align=\"ABSMIDDLE\" \/>\u65b0\u95fb\u9996\u9875","children":[{"text":" <img src=\"\/images\/file.gif\" align=\"ABSMIDDLE\" \/><a href='javascript:inputChannel(\"\u65b0\u95fb\u9996\u9875\",\"69\")'>\u65b0\u95fb\u9996\u9875<\/a>","children":[]}]}]}]

具体Jquery.tree 使用参见http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

不错不错，应该贴个图，和提供一个下载文件

不错，支持

非常好，正是我想要的 ，THANK YOU !!!