📄 38- 拖拽树形菜单.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0052)http://interface.eyecon.ro/demos/drag_drop_tree.html -->
<HTML><HEAD><TITLE>Draggables and droppables demo - Interface plugin for jQuery</TITLE>
<META http-equiv=Content-Language content=en>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<SCRIPT src="jquery.js"
type=text/javascript></SCRIPT>
<SCRIPT src="interface.js"
type=text/javascript></SCRIPT>
<STYLE type=text/css media=all>BODY {
FONT-SIZE: 11px; MIN-HEIGHT: 600px; BACKGROUND: #fff; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; HEIGHT: 100%
}
.myTree {
PADDING-LEFT: 22px; LIST-STYLE-TYPE: none
}
.myTree UL {
PADDING-LEFT: 22px; LIST-STYLE-TYPE: none
}
.expandImage {
MARGIN-RIGHT: 4px
}
.folderImage {
}
.textHolder {
PADDING-LEFT: 6px; LINE-HEIGHT: 16px; HEIGHT: 16px
}
SPAN.dropOver {
PADDING-LEFT: 6px; COLOR: #fff; LINE-HEIGHT: 16px; HEIGHT: 16px; BACKGROUND-COLOR: #00c
}
.treeItem {
LIST-STYLE-TYPE: none
}
</STYLE>
<META content="MSHTML 6.00.2900.3268" name=GENERATOR></HEAD>
<BODY>
<UL class=myTree>
<LI class=treeItem><IMG class=folderImage
src="folder.png"><SPAN
class=textHolder>Folder 1</SPAN>
<UL>
<LI class=treeItem><IMG class=folderImage
src="folder.png"><SPAN
class=textHolder>Subfolder 1 1</SPAN>
<LI class=treeItem><IMG class=folderImage
src="folder.png"><SPAN
class=textHolder>Subfolder 1 2</SPAN>
<UL style="DISPLAY: none">
<LI class=treeItem><IMG class=folderImage
src="folder.png"><SPAN
class=textHolder>Subfolder 1 2 1</SPAN>
<LI class=treeItem><IMG class=folderImage
src="folder.png"><SPAN
class=textHolder>Subfolder 1 2 2</SPAN>
<LI class=treeItem><IMG class=folderImage
src="folder.png"><SPAN
class=textHolder>Subfolder 1 2 3</SPAN> </LI></UL></LI></UL>
<LI class=treeItem><IMG class=folderImage
src="folder.png"><SPAN
class=textHolder>Folder 2</SPAN>
<UL>
<LI class=treeItem><IMG class=folderImage
src="folder.png"><SPAN
class=textHolder>Subfolder 2 1</SPAN>
<LI class=treeItem><IMG class=folderImage
src="folder.png"><SPAN
class=textHolder>Subfolder 2 2</SPAN> </LI></UL></LI></UL>
<SCRIPT type=text/javascript>
$(document).ready(
function()
{
tree = $('#myTree');
$('li', tree.get(0)).each(
function()
{
subbranch = $('ul', this);
if (subbranch.size() > 0) {
if (subbranch.eq(0).css('display') == 'none') {
$(this).prepend('<img src="bullet_toggle_plus.png" width="16" height="16" class="expandImage" />');
} else {
$(this).prepend('<img src="bullet_toggle_minus.png" width="16" height="16" class="expandImage" />');
}
} else {
$(this).prepend('<img src="spacer.gif" width="16" height="16" class="expandImage" />');
}
}
);
$('img.expandImage', tree.get(0)).click(
function()
{
if (this.src.indexOf('spacer') == -1) {
subbranch = $('ul', this.parentNode).eq(0);
if (subbranch.css('display') == 'none') {
subbranch.show();
this.src = 'bullet_toggle_minus.png';
} else {
subbranch.hide();
this.src = 'bullet_toggle_plus.png';
}
}
}
);
$('span.textHolder').Droppable(
{
accept : 'treeItem',
hoverclass : 'dropOver',
activeclass : 'fakeClass',
tollerance : 'pointer',
onhover : function(dragged)
{
if (!this.expanded) {
subbranches = $('ul', this.parentNode);
if (subbranches.size() > 0) {
subbranch = subbranches.eq(0);
this.expanded = true;
if (subbranch.css('display') == 'none') {
var targetBranch = subbranch.get(0);
this.expanderTime = window.setTimeout(
function()
{
$(targetBranch).show();
$('img.expandImage', targetBranch.parentNode).eq(0).attr('src', 'bullet_toggle_minus.png');
$.recallDroppables();
},
500
);
}
}
}
},
onout : function()
{
if (this.expanderTime){
window.clearTimeout(this.expanderTime);
this.expanded = false;
}
},
ondrop : function(dropped)
{
if(this.parentNode == dropped)
return;
if (this.expanderTime){
window.clearTimeout(this.expanderTime);
this.expanded = false;
}
subbranch = $('ul', this.parentNode);
if (subbranch.size() == 0) {
$(this).after('<ul></ul>');
subbranch = $('ul', this.parentNode);
}
oldParent = dropped.parentNode;
subbranch.eq(0).append(dropped);
oldBranches = $('li', oldParent);
if (oldBranches.size() == 0) {
$('img.expandImage', oldParent.parentNode).src('spacer.gif');
$(oldParent).remove();
}
expander = $('img.expandImage', this.parentNode);
if (expander.get(0).src.indexOf('spacer') > -1)
expander.get(0).src = 'bullet_toggle_minus.png';
}
}
);
$('li.treeItem').Draggable(
{
revert : true,
autoSize : true,
ghosting : true/*,
onStop : function()
{
$('span.textHolder').each(
function()
{
this.expanded = false;
}
);
}*/
}
);
}
);
</SCRIPT>
<SCRIPT language=JavaScript type=text/javascript>var client_id = 1;</SCRIPT>
<SCRIPT language=JavaScript src="" type=text/javascript></SCRIPT>
<NOSCRIPT>
<P><IMG height=1 alt="" src="" width=1></P></NOSCRIPT></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -