设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

查看: 9171|回复: 12

【共享】拖动改变次序的XML树型菜单 [复制链接]

管理员

振兴无忧

Rank: 9Rank: 9Rank: 9

注册时间
2003-7-13
在线时间
2702 小时
威望
3342
阅读权限
200
积分
5872
帖子
3120
精华
5
UID
4354
发表于 2004-5-25 04:41:44 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 查看个人网站
一键分享 一键分享
  1. <html>
  2. <head>
  3. <title>拖动改变次序的XML树型菜单</title>
  4. <style>
  5. UNKNOWN {
  6.         TEXT-DECORATION: none
  7. }
  8. A:visited {
  9.         TEXT-DECORATION: none
  10. }
  11. A:hover {
  12.         COLOR: #ff0000; TEXT-DECORATION: none
  13. }
  14. A:link {
  15.         TEXT-DECORATION: none
  16. }
  17. BODY {
  18.         FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: "MS Shell Dlg", "Tahoma", "sans-serif"; TEXT-DECORATION: none
  19. }
  20. TR {
  21.         FONT-SIZE: 9pt; FONT-FAMILY: MS Shell Dlg, Tahoma,sans-serif
  22. }
  23. TD {
  24.         FONT-WEIGHT: normal; FONT-SIZE: 9pt; FONT-FAMILY: MS Shell Dlg,Tahoma, sans-serif
  25. }
  26. FORM {
  27.         FONT-SIZE: 9pt; FONT-FAMILY: MS Shell Dlg,tahoma,宋体
  28. }
  29. .black {
  30.         FONT-SIZE: 9pt; COLOR: #000000
  31. }
  32. .white {
  33.         FONT-SIZE: 9pt; COLOR: #ffffff
  34. }
  35. .red {
  36.         FONT-SIZE: 9pt; COLOR: #ff0000
  37. }
  38. .green {
  39.         FONT-SIZE: 9pt; COLOR: #009900
  40. }
  41. .c990000 {
  42.         FONT-SIZE: 9pt; COLOR: #990000
  43. }
  44. .cFF9900 {
  45.         FONT-SIZE: 9pt; COLOR: #ff9900
  46. }
  47. .c333399 {
  48.         FONT-SIZE: 9pt; COLOR: #333399
  49. }
  50. .blue {
  51.         FONT-SIZE: 9pt; COLOR: #0000ff
  52. }
  53. .blue1 {
  54.         FONT-SIZE: 9pt; COLOR: #3300cc
  55. }
  56. .gray {
  57.         FONT-SIZE: 9pt; COLOR: #666666
  58. }
  59. .row {
  60.         LINE-HEIGHT: 15pt
  61. }
  62. .bottom {
  63.         BORDER-RIGHT: #665b8e 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: #665b8e 1px solid; FONT-FAMILY: "宋体"; HEIGHT: 18px; BACKGROUND-COLOR: #cccccc
  64. }

  65. .editbox2 {
  66.         PADDING-RIGHT: 1px; PADDING-LEFT: 1px; FONT-SIZE: 9pt; PADDING-BOTTOM: 1px; CURSOR: text; COLOR: #000000; PADDING-TOP: 1px; FONT-FAMILY: 宋体; BACKGROUND-COLOR: #dbdbdb
  67. }
  68. .size {
  69.         FONT-SIZE: 9px; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"
  70. }

  71. </style>
  72. <link rel="stylesheet" type="text/css" href="css/style.css">
  73. <SCRIPT>
  74. self.moveTo(0,0)
  75. self.resizeTo(screen.availWidth,screen.availHeight)
  76. </SCRIPT>
  77. </head>
  78. <body bgcolor="#FFFFFF" ><div align="center">
  79. <center>
  80.     <html>
  81. <body bgcolor="#FFFFFF">

  82. </html> <br>
  83.     <table cellspacing="0" width="98%" border="1" bordercolorlight="#000000" cellpadding="0">
  84.   <tr bgcolor="#CCCCCC">
  85.     <td width="100%" height="20" class="title" background="IMAGES/mmto.gif">
  86.       <div align="center" class="title"><b><font color="#000000">标题:</font> </b>拖动改变次序的XML树型菜单
  87.       </div>
  88.     </td>
  89.   </tr>
  90.   <tr>
  91.         
  92.             
  93.               
  94. <HTML xmlns:ie><HEAD><TITLE>这是一个可以拖动改变次序的XML树型菜单</TITLE>
  95. <META http-equiv=Content-Type content="text/html; charset=gb2312">
  96. <style>
  97. ie\:tree {
  98.         DISPLAY: block
  99. }
  100. ie\:treeitem {
  101.         BORDER-TOP: white 2px solid; DISPLAY: block; ; FONT-WEIGHT: expression(this.children.length > 1 ? 'bold' : 'normal'); VISIBILITY: inherit; MARGIN-LEFT: 20px; OVERFLOW: hidden; WIDTH: 100%
  102. }
  103. ie\:label {
  104.         DISPLAY: inline; CURSOR: hand
  105. }
  106.         ie\:label {behavior:url(tree2.htc)}       

  107. UNKNOWN {
  108.         TEXT-DECORATION: none
  109. }
  110. A:visited {
  111.         TEXT-DECORATION: none
  112. }
  113. A:hover {
  114.         COLOR: #ff0000; TEXT-DECORATION: none
  115. }
  116. A:link {
  117.         TEXT-DECORATION: none
  118. }
  119. BODY {
  120.         FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: "MS Shell Dlg", "Tahoma", "sans-serif"; TEXT-DECORATION: none
  121. }
  122. TR {
  123.         FONT-SIZE: 9pt; FONT-FAMILY: MS Shell Dlg, Tahoma,sans-serif
  124. }
  125. TD {
  126.         FONT-WEIGHT: normal; FONT-SIZE: 9pt; FONT-FAMILY: MS Shell Dlg,Tahoma, sans-serif
  127. }
  128. FORM {
  129.         FONT-SIZE: 9pt; FONT-FAMILY: MS Shell Dlg,tahoma,宋体
  130. }
  131. .black {
  132.         FONT-SIZE: 9pt; COLOR: #000000
  133. }
  134. .white {
  135.         FONT-SIZE: 9pt; COLOR: #ffffff
  136. }
  137. .red {
  138.         FONT-SIZE: 9pt; COLOR: #ff0000
  139. }
  140. .green {
  141.         FONT-SIZE: 9pt; COLOR: #009900
  142. }
  143. .c990000 {
  144.         FONT-SIZE: 9pt; COLOR: #990000
  145. }
  146. .cFF9900 {
  147.         FONT-SIZE: 9pt; COLOR: #ff9900
  148. }
  149. .c333399 {
  150.         FONT-SIZE: 9pt; COLOR: #333399
  151. }
  152. .blue {
  153.         FONT-SIZE: 9pt; COLOR: #0000ff
  154. }
  155. .blue1 {
  156.         FONT-SIZE: 9pt; COLOR: #3300cc
  157. }
  158. .gray {
  159.         FONT-SIZE: 9pt; COLOR: #666666
  160. }
  161. .row {
  162.         LINE-HEIGHT: 15pt
  163. }
  164. .bottom {
  165.         BORDER-RIGHT: #665b8e 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: #665b8e 1px solid; FONT-FAMILY: "宋体"; HEIGHT: 18px; BACKGROUND-COLOR: #cccccc
  166. }
  167. .editbox1 {
  168.         FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: 宋体; HEIGHT: 18px; BACKGROUND-COLOR: #dbdbdb
  169. }
  170. .editbox3 {
  171.         FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: 宋体; HEIGHT: 18px; BACKGROUND-COLOR: #ffffff
  172. }
  173. .editbox2 {
  174.         PADDING-RIGHT: 1px; PADDING-LEFT: 1px; FONT-SIZE: 9pt; PADDING-BOTTOM: 1px; CURSOR: text; COLOR: #000000; PADDING-TOP: 1px; FONT-FAMILY: 宋体; BACKGROUND-COLOR: #dbdbdb
  175. }
  176. .size {
  177.         FONT-SIZE: 9px; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"
  178. }
  179. A.yellow:active {
  180.         COLOR: #ffffff; TEXT-DECORATION: none
  181. }
  182. A.yellow:visited {
  183.         COLOR: #ffffff; TEXT-DECORATION: none
  184. }
  185. A.yellow:link {
  186.         COLOR: #ffffff; TEXT-DECORATION: none
  187. }
  188. A.yellow:hover {
  189.         COLOR: #ffff33; TEXT-DECORATION: none
  190. }
  191. </style>
  192. <SCRIPT language=JavaScript>
  193. <!--

  194. function MM_goToURL() { //v3.0
  195.   var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  196.   for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
  197. }
  198. function JM_cc(ob){
  199. var obj=MM_findObj(ob); if (obj) {
  200. obj.select();js=obj.createTextRange();js.execCommand("Copy");}
  201. }

  202. function MM_findObj(n, d) { //v4.0
  203.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  204.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  205.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  206.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  207.   if(!x && document.getElementById) x=document.getElementById(n); return x;
  208. }
  209. //-->
  210. </SCRIPT>

  211. <META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
  212. <BODY bgColor=#ffffff leftMargin=0 topMargin=0 onload=initial() style="FONT-SIZE: 12px; FONT-FAMILY: verdana">
  213. <TABLE cellSpacing=0 cellPadding=0 width=600 align=center border=0>
  214.   <TBODY>
  215.   <TR bgColor=#7285cf>
  216.     <TD width=10 height=18>&nbsp;</TD>
  217.     <TD class=white width=590 bgColor=#7285cf height=18>这是一个可以拖动改变次序的XML树型菜单</TD>
  218.   </TR>
  219.   <TR bgColor=#e7e7e7>
  220.     <TD width=10>&nbsp;</TD>
  221.     <TD class=row width=590 bgColor=#e7e7e7
  222.       height=30>这是一个可以拖动改变次序的XML树型菜单</TD>
  223.   </TR>
  224.   <TR bgColor=#f2f2f2>
  225.     <TD width=10 bgColor=#f2f2f2>&nbsp;</TD>
  226.     <TD width=590 bgColor=#f2f2f2 height=70>&nbsp;
  227.         <H3>Animating Expanding/Collapsing List with Drag/Drop <I>e.c.
  228. listus</I></H3><ie:tree id=TheTree>
  229. <ie:treeitem><ie:label id=Label1>1.0 FirstSet</ie:label>

  230. <ie:treeitem><ie:label>1.1 Megalosaurus</ie:label></ie:treeitem>
  231. <ie:treeitem><ie:label>1.2 Iguanodon</ie:label></ie:treeitem>
  232. <ie:treeitem><ie:label>1.3 Hylaeosaurus</ie:label></ie:treeitem>
  233. <ie:treeitem><ie:label>1.4 Tyrannosaurus rex</ie:label></ie:treeitem>
  234. </ie:treeitem>

  235. <ie:treeitem>
  236. <ie:label>2.0 Later Set</ie:label>
  237. <ie:treeitem><ie:label>2.1 Mammoths</ie:label></ie:treeitem>

  238. <ie:treeitem><!--S-->
  239. <ie:label>2.2 Mastodons</ie:label>
  240. <ie:treeitem><ie:label>2.2.1 Plesiosaurs</ie:label></ie:treeitem>
  241. <ie:treeitem><ie:label>2.2.2 Ichthyosaurs</ie:label></ie:treeitem>
  242. <ie:treeitem><ie:label>2.2.3 Dimetrodon </ie:label></ie:treeitem>
  243. <ie:treeitem><ie:label>2.2.4 Sinapsid</ie:label></ie:treeitem>
  244. </ie:treeitem><!--  E-->

  245. <ie:treeitem><ie:label>2.3
  246. Stegosaurus</ie:label></ie:treeitem> <ie:treeitem><ie:label>2.4
  247. Apatosaurus</ie:label></ie:treeitem> <ie:treeitem><ie:label>2.5
  248. Mammals</ie:label></ie:treeitem> <ie:treeitem><ie:label>2.6 Tetrapods</ie:label>
  249. <ie:treeitem><ie:label>2.6.1 Amphibians</ie:label></ie:treeitem>
  250. <ie:treeitem><ie:label>2.6.2 Whales</ie:label></ie:treeitem>
  251. <ie:treeitem><ie:label>2.6.3 Crocodiles</ie:label></ie:treeitem>
  252. <ie:treeitem><ie:label>2.6.4 Sea Turtles</ie:label></ie:treeitem>
  253. </ie:treeitem><ie:treeitem><ie:label>2.7 Late Permian</ie:label></ie:treeitem>
  254. <ie:treeitem><ie:label>2.8 Mesozoic</ie:label></ie:treeitem>
  255. </ie:treeitem><ie:treeitem><ie:label>3.0 Archosaurs</ie:label>
  256. <ie:treeitem><ie:label>3.1 Mandibular fenestra</ie:label></ie:treeitem>
  257. <ie:treeitem><ie:label>3.2 Pointed Snout</ie:label></ie:treeitem>
  258. <ie:treeitem><ie:label>3.3 Theocodant Tooth
  259. Implantation</ie:label></ie:treeitem> <ie:treeitem><ie:label>3.4 Modified
  260. Ankle</ie:label></ie:treeitem> </ie:treeitem><ie:treeitem><ie:label>4.0
  261. Mesozoic</ie:label> <ie:treeitem><ie:label>4.1 Middle
  262. Animals</ie:label></ie:treeitem> </ie:treeitem></ie:tree>
  263. <SCRIPT>
  264. // variables for drag/drop
  265. var dragElement = null;
  266. var dropElement = null;
  267. var currOver = null;

  268. // variables for expanding/collapsing
  269. var flyCount = 5;
  270. var msecs = 5;
  271. var currCount = 0;

  272. // event handler hookup
  273. TheTree.onmousedown = preselect;
  274. TheTree.ondragstart = dragstart;
  275. TheTree.ondragend = dragend;
  276. TheTree.ondragenter = dragover;
  277. TheTree.ondragover = dragover;
  278. TheTree.ondragend = dragend;
  279. TheTree.ondrop = dragdrop;
  280. document.onclick = click;

  281. // drag/drop code
  282. function dragstart() {
  283.   var e;
  284.   e = window.event.srcElement;
  285.   if (e.tagName != "label")
  286.     return false;

  287.   dragElement = e.parentElement;
  288. }

  289. // method called as we start drag/drop

  290. // called as we mouse over - note that there is special handling for dragover code
  291. // as dragleave doesn't track the toElement/fromElement as mouseover/mouseout does
  292. function dragover() {
  293.   if (window.event.srcElement.tagName != "treeitem")
  294.     return;

  295.   if (!dragElement.contains(window.event.srcElement)) {
  296.     if (currOver) {
  297.       currOver.style.borderTopColor = "";
  298.     }
  299.     currOver = window.event.srcElement;
  300.     window.event.srcElement.style.borderTopColor = "black";
  301.     event.returnValue = false;
  302.   }
  303. }

  304. // called when drag is ended - always
  305. function dragend() {
  306.   if (currOver) {
  307.     currOver.style.borderTopColor = "";
  308.   }
  309. }

  310. // called on drop
  311. function dragdrop() {
  312.   if (currOver) {
  313.     currOver.style.borderTopColor = "";
  314.   }
  315.   t = currOver;
  316.   t.parentElement.insertBefore(dragElement, t);
  317. }

  318. // needed to select items so they can be dragged
  319. // drag drop only supported on selection and images
  320. function preselect() {
  321.   var e;

  322.   e = window.event.srcElement;
  323.   if (e.tagName != "label") {
  324.     return;
  325.   }
  326.   r = document.body.createTextRange();
  327.   r.moveToElementText(e);
  328.   r.select();
  329.   window.event.cancelBubble = true;
  330. }

  331. // beginning of expand/collapse code

  332. // called to handle document click, starts toggling
  333. function click() {
  334.   if (window.event.srcElement.tagName != "label") {
  335.     return;
  336.   }
  337.   if (window.event.srcElement.parentElement.children.length > 1) {
  338.     toggleState(window.event.srcElement.parentElement);
  339.   }
  340. }

  341. // toggles expanding/collapse state of an element - does setup
  342. function toggleState(e) {
  343.    e.oHeight = e.scrollHeight + 2;
  344.    e.style.posHeight = e.offsetHeight;
  345.   
  346.    if (e.scrollHeight >= e.offsetHeight) {
  347.       growIt(e);
  348.    } else {
  349.       shrinkIt(e);
  350.    }
  351. }

  352. // called to initiate growing an element
  353. function growIt(e) {
  354.   currCount = 0;

  355.   window.setTimeout("doGrow(" + e.uniqueID + ");", msecs);
  356. }

  357. // called to initiate shrinking an element
  358. function shrinkIt(e) {
  359.   currCount = 0;
  360.   window.setTimeout("doShrink(" + e.uniqueID + ");", msecs);
  361. }

  362. // inner loop for growing an object
  363. function doGrow(e) {
  364.   var dh;
  365.   var lineHeight = e.children[0].offsetHeight;

  366.   currCount++;

  367.   dh = e.oHeight / flyCount;


  368.   if (e.style.posHeight != e.oHeight) {
  369.     e.style.posHeight += dh;
  370.   }

  371.   if (currCount < flyCount) {
  372.       window.setTimeout("doGrow(" + e.uniqueID + ");", msecs);
  373.   }
  374.   else {
  375.       e.style.height = "";
  376.   }
  377. }

  378. // inner loop for shrinking an object
  379. function doShrink(e) {
  380.   var dh, dw;
  381.   var lineHeight = e.children[0].offsetHeight;
  382.   var p;

  383.   currCount++;

  384.   dh = (e.oHeight - lineHeight) / flyCount;

  385.   e.style.posHeight -= dh;

  386.   if (currCount < flyCount) {
  387.         window.setTimeout("doShrink(" + e.uniqueID + ");", msecs);
  388.   }
  389.   else {
  390.     e.style.posHeight = lineHeight;
  391.   }
  392. }

  393. </SCRIPT> </TD>
  394.   </TR></TBODY></TABLE><BR>
复制代码运行代码另存代码
如果您需要提问题之前,请先尝试以下两个链接:
http://bbs.51js.com/search.php
http://bbs.51js.com/viewthread.php?tid=21031
===============================
先无忧之忧而忧,后无忧之乐而乐。

Rank: 1

升级  64%

注册时间
2005-4-1
在线时间
0 小时
威望
28
阅读权限
10
积分
32
帖子
8
精华
0
UID
26395
发表于 2005-4-1 10:12:29 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
不太明白……

使用道具 举报

Rank: 1

升级  62%

注册时间
2005-4-11
在线时间
0 小时
威望
27
阅读权限
10
积分
31
帖子
7
精华
0
UID
27304
发表于 2005-4-11 23:05:04 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
很方便哦!

使用道具 举报

Rank: 1

升级  46%

注册时间
2005-4-19
在线时间
0 小时
威望
22
阅读权限
10
积分
23
帖子
2
精华
0
UID
27849
发表于 2005-4-19 21:33:24 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
不 是很好 啊 ~~~

使用道具 举报

Rank: 1

升级  52%

注册时间
2005-4-19
在线时间
0 小时
威望
24
阅读权限
10
积分
26
帖子
4
精华
0
UID
27855
发表于 2005-4-19 21:57:16 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
好东西一起用撒。

使用道具 举报

Rank: 1

升级  52%

注册时间
2005-4-19
在线时间
0 小时
威望
24
阅读权限
10
积分
26
帖子
4
精华
0
UID
27855
发表于 2005-4-19 21:57:38 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
看看。哈哈。

使用道具 举报

Rank: 1

升级  52%

注册时间
2005-4-19
在线时间
0 小时
威望
24
阅读权限
10
积分
26
帖子
4
精华
0
UID
27855
发表于 2005-4-19 21:58:04 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
其实我也在好东西给大家看。但是不知道怎么把他传上来。

使用道具 举报

Rank: 1

升级  52%

注册时间
2005-4-19
在线时间
0 小时
威望
24
阅读权限
10
积分
26
帖子
4
精华
0
UID
27855
发表于 2005-4-19 21:58:32 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
有那个大侠能告诉我怎么上传吗?

使用道具 举报

Rank: 1

升级  4%

注册时间
2005-4-26
在线时间
0 小时
威望
1
阅读权限
10
积分
2
帖子
1
精华
0
UID
28350
发表于 2005-4-27 14:39:20 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
不错,应该会有用处。

使用道具 举报

Rank: 1

升级  68%

注册时间
2005-11-11
在线时间
0 小时
威望
29
阅读权限
10
积分
34
帖子
9
精华
0
UID
40966
发表于 2005-11-11 16:25:59 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
look 一下 ^_^

使用道具 举报

Rank: 1

升级  50%

注册时间
2005-11-25
在线时间
0 小时
威望
23
阅读权限
10
积分
25
帖子
3
精华
0
UID
42328
发表于 2005-11-25 17:23:17 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
看不懂

使用道具 举报

Rank: 1

升级  26%

注册时间
2007-4-30
在线时间
3 小时
威望
5
阅读权限
10
积分
13
帖子
9
精华
0
UID
69179
发表于 2007-12-16 15:45:43 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
怎么看着代码这么乱, 有好多<html>的标签哎

怎么好像大家都看提挺明白的! :L  希望能解释一下啊,谢谢了

使用道具 举报

Rank: 2

升级  18.67%

注册时间
2005-2-17
在线时间
52 小时
威望
22
阅读权限
20
积分
78
帖子
8
精华
0
UID
23760
发表于 2008-3-8 22:20:36 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
为什么非要搞窗口自动放大呀
最烦这样的了

使用道具 举报

您需要登录后才可以回帖 登录 | 加入无忧

Archiver|手机版|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445  

GMT+8, 2012-5-17 23:30 , Processed in 0.124332 second(s), 14 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 1999-2011 无忧脚本

回顶部