樹狀圖形式的穿梭框
阿新 • • 發佈：2019-02-11
廢話少說直接上程式碼
<!doctype html><html><head><meta charset="utf-8"><title>jQuery輕量級樹狀選單外掛程式碼</title><link href="jquery.treemenu.css" rel="stylesheet" type="text/css"><style>*{list-style:none;border:none;}body{font-family:Arial; }.tree { color:#46CFB0; float: left.tree li { color:#46CFB0; text-decoration: none; line-height: 20pt; border-radius: 4px;}
.active1 { background-color: #34495E; color: white;}
.active1 a { color: #fff;} .tree{ width: 166.5px; height
</style></head>
<body><ul class="tree"> <li> 一級 <ul class="ul-li-ul-li"
<ul class="ul-ul-ul-ul">
</ul><script src="https://code.jquery.com/jquery-3.3.1.min.js "></script> <script src="jquery.treemenu.js"></script><script>$(function(){ $(".tree").treemenu({delay:300}).openActive(); });</script>
<script> $('.ul-li-ul-li').on("click","li",function(){ console.log($(this).parents('.treemenu > li').index()) var index=$(this).parents('.treemenu > li').index() $(this).attr("data_id",index) console.log($(this).attr("data_id")) $(this).remove() $(".ul-ul-ul-ul").append($(this)) }); $('.ul-ul-ul-ul').on("click","li",function(){ console.log($(this).attr("data_id")) $(".ul-li-ul-li").eq($(this).attr("data_id")).append($(this)) })</script>
</body></html>
jquery.treemenu.js
(function($){ $.fn.openActive = function(activeSel) { activeSel = activeSel || ".active1";
var c = this.attr("class");
this.find(activeSel).each(function(){ var el = $(this).parent(); while (el.attr("class") !== c) { if(el.prop("tagName") === 'UL') { el.show(); } else if (el.prop("tagName") === 'LI') { el.removeClass('tree-closed'); el.addClass("tree-opened"); }
el = el.parent(); } });
return this; }
$.fn.treemenu = function(options) { options = options || {}; options.delay = options.delay || 0; options.openActive = options.openActive || false; options.activeSelector = options.activeSelector || "";
this.addClass("treemenu"); this.find("> li").each(function() { e = $(this); var subtree = e.find('> ul'); var button = e.find('span').eq(0).addClass('toggler');
if( button.length == 0) { var button = $('<span>'); button.addClass('toggler'); e.prepend(button); } else { button.addClass('toggler'); }
if(subtree.length > 0) { subtree.hide();
e.addClass('tree-closed');
e.find(button).click(function() { var li = $(this).parent('li'); li.find('> ul').slideToggle(options.delay); li.toggleClass('tree-opened'); li.toggleClass('tree-closed'); li.toggleClass(options.activeSelector); });
$(this).find('> ul').treemenu(options); } else { $(this).addClass('tree-empty'); } });
if (options.openActive) { this.openActive(options.activeSelector); }
return this; }})(jQuery);
jquery.treemenu.css
.treemenu .toggler { cursor: pointer;}
.treemenu .toggler:before { display: inline-block; margin-right: 2pt;}
li.tree-empty > .toggler { color: #aaa; }li.tree-empty > .toggler:before { content: "\2212"; }li.tree-closed > .toggler:before { content: "+"; }li.tree-opened > .toggler:before { content: "\2212"; }
<script src="https://code.jquery.com/jquery-3.3.1.min.js "></script>