home *** CD-ROM | disk | FTP | other *** search
/ Chip 2003 February / Chip_2003-02_cd1.bin / tema / tipy / radom.mht / menu_basics.js < prev    next >
Encoding:
Text File  |  2003-01-06  |  15.1 KB  |  511 lines
  1. var popUpMenuScrollbarSize=16;
  2. var popUpMenus=new Array();
  3.  
  4. function PopUpMenuItem(text,link) {
  5. this.text=text;
  6. this.link=link;
  7. this.isSeparator=false;
  8. this.subMenu=null;
  9. }
  10.  
  11. function PopUpMenu(width){
  12. this.width=width;
  13. this.height=0;
  14. this.items=new Array();
  15. this.created=false;
  16. this.border=2;
  17. this.padding=4;
  18. this.spSize=2;
  19. this.spPadding=1;
  20. this.fgColor="#000000";
  21. this.bgColor="#c0c0c0";
  22. this.hiFgColor="#ffffff";
  23. this.hiBgColor="#000080";
  24. this.bdHiColor="#e0e0e0";
  25. this.bdShColor="#000000";
  26. this.spHiColor="#e0e0e0";
  27. this.spShColor="#808080";
  28. this.fontFamily="Verdana CE,MS Sans Serif,Arial CE,Helvetica CE,sans-serif";
  29. this.fontStyle="plain";
  30. this.fontWeight="normal";
  31. this.fontSize="8pt";
  32. this.noneImage="transparent.gif";
  33. this.normImage="default_norm.gif";
  34. this.highImage="default_high.gif";
  35. this.imageWidth=8;
  36. this.imageHeight=12;
  37. this.left=0;
  38. this.top=0;
  39. this.right=this.width;
  40. this.bottom=this.height;
  41. this.parentMenu=null;
  42. this.openChild=null;
  43. this.offsetX=0;
  44. this.offsetY=0;
  45. this.isStatic=false;
  46. this.isOpen=false;
  47. this.isSubmenu=false;
  48. this.setSizes=popUpMenuSetSizes;
  49. this.setColors=popUpMenuSetColors;
  50. this.setFont=popUpMenuSetFont;
  51. this.setImages=popUpMenuSetImages;
  52. this.addItem=popUpMenuAddItem;
  53. this.addSeparator=popUpMenuAddSeparator;
  54. this.addSubmenu=popUpMenuAddSubmenu;
  55. this.copyAttributes=popUpMenuCopyAttributes;
  56. this.create=popUpMenuCreate;
  57. this.open=popUpMenuOpen;
  58. this.close=popUpMenuClose;
  59. this.setStatic=popUpMenuSetStatic;
  60. this.moveTo=popUpMenuMoveTo;
  61. this.moveBy=popUpMenuMoveBy;
  62. this.getzIndex=popUpMenuGetzIndex;
  63. this.setzIndex=popUpMenuSetzIndex;
  64. this.index=popUpMenus.length;
  65. popUpMenus[this.index]=this;
  66. }
  67.  
  68. function popUpMenuSetSizes(border,padding,spSize,spPadding){
  69. if(!this.created){
  70. this.border=border;
  71. this.padding=padding;
  72. this.spSize=spSize;
  73. this.spPadding=spPadding;
  74. }
  75. }
  76.  
  77. function popUpMenuSetColors(fgColor,bgColor,hiFgColor,hiBgColor,bdHiColor,bdShColor,spHiColor,spShColor){
  78. if(!this.created){
  79. this.fgColor=fgColor;
  80. this.bgColor=bgColor;
  81. this.hiFgColor=hiFgColor;
  82. this.hiBgColor=hiBgColor;
  83. this.bdHiColor=bdHiColor;
  84. this.bdShColor=bdShColor;
  85. this.spHiColor=spHiColor;
  86. this.spShColor=spShColor;
  87. }
  88. }
  89.  
  90. function popUpMenuSetFont(family,style,weight,size){
  91. if(!this.created){
  92. this.fontFamily=family;
  93. this.fontStyle=style;
  94. this.fontWeight=weight;
  95. this.fontSize=size;
  96. }
  97. }
  98.  
  99. function popUpMenuSetImages(none,norm,high,width,height){
  100. if(!this.created){
  101. this.noneImage=none;
  102. this.normImage=norm;
  103. this.highImage=high;
  104. this.imageWidth=width;
  105. this.imageHeight=height;
  106. }
  107. }
  108.  
  109. function popUpMenuAddItem(item){
  110. if(!this.created)
  111. this.items[this.items.length]=item;
  112. }
  113.  
  114. function popUpMenuAddSeparator(){
  115. if(!this.created){
  116. this.addItem(new PopUpMenuItem("",""));
  117. this.items[this.items.length-1].isSeparator=true;
  118. }
  119. }
  120.  
  121. function popUpMenuAddSubmenu(item,menu){
  122. if(!this.created&&!menu.isSubmenu){
  123. item.subMenu=menu;
  124. this.items[this.items.length]=item;
  125. menu.parentMenu=this;
  126. menu.isSubmenu=true;
  127. }
  128. }
  129.  
  130. function popUpMenuCopyAttributes(menu){
  131. if(!this.created&&menu!=null){
  132. this.border=menu.border;
  133. this.padding=menu.padding;
  134. this.spSize=menu.spSize;
  135. this.spPadding=menu.spPadding;
  136. this.fgColor=menu.fgColor;
  137. this.bgColor=menu.bgColor;
  138. this.hiFgColor=menu.hiFgColor;
  139. this.hiBgColor=menu.hiBgColor;
  140. this.bdHiColor=menu.bdHiColor;
  141. this.bdShColor=menu.bdShColor;
  142. this.spHiColor=menu.spHiColor;
  143. this.spShColor=menu.spShColor;
  144. this.fontFamily=menu.fontFamily;
  145. this.fontStyle=menu.fontStyle;
  146. this.fontWeight=menu.fontWeight;
  147. this.fontSize=menu.fontSize;
  148. this.noneImage=menu.noneImage;
  149. this.normImage=menu.normImage;
  150. this.highImage=menu.highImage;
  151. this.imageWidth=menu.imageWidth;
  152. this.imageHeight=menu.imageHeight;
  153. }
  154. }
  155.  
  156. function popUpMenuCreate(){
  157. var hasSubmenus;
  158. var norm,high,end1,end2,img1,img2,sep;
  159. var text;
  160. var noimg,imgsrc;
  161. var width,height;
  162. var str;var x,y;
  163. var i;
  164. var bevelLayers;
  165. if(!isMinNS4&&!isMinIE4)
  166. return;
  167. if(this.created)
  168. return;
  169. window.status="PopUpMenu: Building menu...";
  170. hasSubmenus=false;
  171. for(i=0;i<this.items.length;i++)
  172. if(this.items[i].subMenu!=null)
  173. hasSubmenus=true;
  174. norm='<table border=0 cellpadding='+this.padding+' cellspacing=0 width="100%"><tr valign=top><td><span style="color:'+this.fgColor+';font-family:'+this.fontFamily+';font-size:'+this.fontSize+';font-style:'+this.fontStyle+';font-weight:'+this.fontWeight+';">';high='<table border=0 cellpadding='+this.padding+' cellspacing=0 width="100%"><tr valign=top><td><span style="color:'+this.hiFgColor+';font-family:'+this.fontFamily+';font-size:'+this.fontSize+';font-style:'+this.fontStyle+';font-weight:'+this.fontWeight+';">';end1='</span></td>';end2='</tr></table>';img1='';img2='';noimg='';if(hasSubmenus){img1='<td align=right><img border=0 hspace=0 vspace=0 src="';img2='" width='+this.imageWidth+' height='+this.imageHeight+'></td>';noimg=this.noneImage;}sep='<table border=0 cellpadding='+this.spPadding+' cellspacing=0 width="100%"><tr><td align=center><table border=0 cellpadding=0 cellspacing=0 width="100%"><tr bgcolor="'+this.spShColor+'"><td><img border=0 hspace=0 vspace=0 src="'+this.noneImage+'" width=1 height='+(this.spSize-Math.round(this.spSize/2))+'></td></tr>';if(this.spSize-Math.round(this.spSize/2)>0)sep+='<tr bgcolor="'+this.spHiColor+'"><td><img border=0 hspace=0 vspace=0 src="'+this.noneImage+'" width=1 height='+Math.round(this.spSize/2)+'></td></tr>';sep+='</table></td></tr></table>';
  175. str="";
  176. if(isMinNS4){
  177. this.baseLayer=new Layer(this.width);
  178. setBgColor(this.baseLayer,this.bdShColor);
  179. }
  180. bevelLayers=new Array();
  181. if(isMinNS4)
  182. for(i=0;i<this.border;i++){
  183. bevelLayers[bevelLayers.length]=new Layer(this.width,this.baseLayer);
  184. bevelLayers[bevelLayers.length-1].visibility="inherit";
  185. bevelLayers[bevelLayers.length]=new Layer(this.width,this.baseLayer);
  186. bevelLayers[bevelLayers.length-1].visibility="inherit";
  187. }
  188. if(isMinIE4)
  189. for(i=0;i<this.border;i++)
  190. str+='<div id="popUpMenu'+this.index+'_bevel'+(2*i)+'" style="position:absolute; width:'+this.width+'px; height:100%;"></div>\n<div id="popUpMenu'+this.index+'_bevel'+(2*i+1)+'" style="position:absolute; width:'+this.width+'px; height:100%;"></div>\n';
  191. width=this.width-2*this.border;
  192. for(i=0;i<this.items.length;i++){
  193. if(this.items[i].subMenu==null)
  194. imgsrc=noimg;
  195. else 
  196. imgsrc=this.normImage;
  197. if(this.items[i].isSeparator)
  198. text=sep;
  199. else text=norm+this.items[i].text+end1+img1+imgsrc+img2+end2;
  200. if(isMinNS4){
  201. this.items[i].normLayer=new Layer(width,this.baseLayer);
  202. this.items[i].normLayer.document.open();
  203. this.items[i].normLayer.document.write(text);
  204. this.items[i].normLayer.document.close();
  205. this.items[i].normLayer.visibility="inherit";
  206. setBgColor(this.items[i].normLayer,this.bgColor);
  207. }
  208. if(isMinIE4)
  209. str+='<div id="popUpMenu'+this.index+'_norm'+i+'" style="position:absolute; background-color:'+this.bgColor+'; width:'+width+'px;">'+text+'</div>\n';
  210. if(this.items[i].subMenu==null)
  211. imgsrc=noimg;
  212. else 
  213. imgsrc=this.highImage;
  214. if(this.items[i].isSeparator)
  215. text=sep;
  216. else 
  217. text=high+this.items[i].text+end1+img1+imgsrc+img2+end2;
  218. if(isMinNS4){
  219. this.items[i].highLayer=new Layer(width,this.baseLayer);
  220. this.items[i].highLayer.document.open();
  221. this.items[i].normLayer.document.write(text);
  222. this.items[i].highLayer.document.close();
  223. this.items[i].highLayer.visibility="hide";
  224. setBgColor(this.items[i].highLayer,this.hiBgColor);
  225. }
  226. if(isMinIE4)
  227. str+='<div id="popUpMenu'+this.index+'_high'+i+'" style="position:absolute; background-color:'+this.hiBgColor+'; width:'+width+'px; visibility:hidden;">'+text+'</div>\n';
  228. if(isMinNS4){
  229. this.items[i].dmmyLayer=new Layer(width,this.baseLayer);
  230. this.items[i].dmmyLayer.visibility="inherit";
  231. }
  232. if(isMinIE4)
  233. str+='<div id="popUpMenu'+this.index+'_dmmy'+i+'" style="position:absolute; width:'+width+'px;"></div>\n';
  234. }
  235. if(isMinIE4&&!isMinIE5&&!isMinIE6){
  236. x=getPageScrollX();
  237. y=getPageScrollY();
  238. window.scrollTo(getPageWidth(),getPageHeight());
  239. }
  240. if(isMinIE4){
  241. str='<div id="popUpMenu'+this.index+'_base" style="position:absolute; left:0px; top:0px; width:'+this.width+'px; overflow:hidden; visibility:hidden;">'+str+'</div>\n';
  242. document.body.insertAdjacentHTML("beforeEnd",str);
  243. if((!isMinIE5)&&(!isMinIE6))
  244. window.scrollTo(x,y);
  245. this.baseLayer=getLayer("popUpMenu"+this.index+"_base");
  246. for(i=0;i<2*this.border;i++){
  247. bevelLayers[bevelLayers.length]=getLayer("popUpMenu"+this.index+"_bevel"+(2*i));
  248. bevelLayers[bevelLayers.length]=getLayer("popUpMenu"+this.index+"_bevel"+(2*i+1));
  249. }
  250. }
  251. x=this.border;
  252. y=this.border;
  253. height=0;
  254. for(i=0;i<this.items.length;i++){
  255. if(this.items[i].subMenu){
  256. this.items[i].subMenu.parentItem=this.items[i];
  257. this.items[i].subMenu.offsetX=this.width-(this.border+this.padding);
  258. this.items[i].subMenu.offsetY=y;
  259. }
  260. if(isMinIE4){
  261. this.items[i].normLayer=getLayer("popUpMenu"+this.index+"_norm"+i);
  262. this.items[i].highLayer=getLayer("popUpMenu"+this.index+"_high"+i);
  263. this.items[i].dmmyLayer=getLayer("popUpMenu"+this.index+"_dmmy"+i);
  264. }
  265. moveLayerTo(this.items[i].normLayer,x,y);
  266. moveLayerTo(this.items[i].highLayer,x,y);
  267. moveLayerTo(this.items[i].dmmyLayer,x,y);
  268. height=getHeight(this.items[i].normLayer);
  269. y+=height;
  270. clipLayer(this.items[i].normLayer,0,0,width,height);
  271. clipLayer(this.items[i].highLayer,0,0,width,height);
  272. if(isMinIE4){
  273. this.items[i].dmmyLayer.style.pixelWidth=width;
  274. this.items[i].dmmyLayer.style.pixelHeight=height;
  275. }
  276. clipLayer(this.items[i].dmmyLayer,0,0,width,height);
  277. if(!this.items[i].isSeparator){
  278. this.items[i].dmmyLayer.index=this.index;
  279. this.items[i].dmmyLayer.itemIndex=i;
  280. this.items[i].dmmyLayer.onmouseover=popUpMenuItemOn;
  281. this.items[i].dmmyLayer.onmouseout=popUpMenuItemOff;
  282. if(isMinNS4){this.items[i].dmmyLayer.document.index=this.index;
  283. this.items[i].dmmyLayer.document.itemIndex=i;
  284. this.items[i].dmmyLayer.document.captureEvents(Event.MOUSEUP);
  285. this.items[i].dmmyLayer.document.onmouseup=popUpMenuItemClick;
  286. }
  287. if(isMinIE4)
  288. this.items[i].dmmyLayer.onclick=popUpMenuItemClick;
  289. }
  290. }
  291. this.height=y+this.border;
  292. if(isMinIE4)
  293. this.baseLayer.style.height=this.height;
  294. setBgColor(this.baseLayer,this.bdShColor);
  295. clipLayer(this.baseLayer,0,0,this.width,this.height);
  296. this.baseLayer.index=this.index;this.baseLayer.onmouseout=popUpMenuOff;
  297. for(i=0;i<this.border;i++){
  298. clipLayer(bevelLayers[2*i],i,i,this.width-i,this.height-i);
  299. setBgColor(bevelLayers[2*i],this.bdHiColor);
  300. clipLayer(bevelLayers[2*i+1],(i+1),(i+1),this.width,this.height);
  301. setBgColor(bevelLayers[2*i+1],this.bdShColor);
  302. if(isMinIE4){
  303. bevelLayers[i].index=this.index;bevelLayers[i].onmouseout=popUpMenuOff;
  304. }
  305. }
  306. this.created=true;
  307. for(i=0;i<this.items.length;i++)
  308. if(this.items[i].subMenu&&!this.items[i].subMenu.created)
  309. this.items[i].subMenu.create();
  310. window.status="PopUpMenu: Done.";
  311. if(this.parentMenu==null)
  312. setTimeout('window.status = window.defaultStatus',500);
  313. }
  314.  
  315. function popUpMenuOpen(x,y){
  316. var maxX,maxY;
  317. if(this.created){
  318. maxX=getPageScrollX()+getWindowWidth()-this.width;
  319. maxY=getPageScrollY()+getWindowHeight()-this.height;
  320. if(isMinNS4&&getWindowHeight()<getPageHeight())
  321. maxX-=popUpMenuScrollbarSize;
  322. if(isMinNS4&&getWindowWidth()<getPageWidth())
  323. maxY-=popUpMenuScrollbarSize;
  324. if((x==null||y==null)){
  325. if(this.isStatic&&!this.isSubmenu){
  326. x=this.left;y=this.top;
  327. }
  328. else{
  329. x=mouseX-(this.border+this.padding);
  330. y=mouseY-(this.border+this.padding);
  331. }
  332. }
  333. if(this.isSubmenu){
  334. x=this.parentMenu.left+this.offsetX;
  335. y=this.parentMenu.top+this.offsetY;
  336. if(x>maxX)maxX=this.parentMenu.left+this.parentMenu.border-this.width;
  337. this.parentMenu.openChild=this;
  338. }
  339. if(this.isSubmenu||!this.isStatic){
  340. x=Math.max(0,Math.min(maxX,x));
  341. y=Math.max(0,Math.min(maxY,y));
  342. }
  343. moveLayerTo(this.baseLayer,x,y);
  344. showLayer(this.baseLayer);
  345. this.isOpen=true;
  346. this.left=x;
  347. this.top=y;
  348. this.right=x+this.width;
  349. this.bottom=y+this.height;
  350. }
  351. }
  352.  
  353. function popUpMenuClose(){
  354. if(this.created){
  355. if(this.openChild!=null){
  356. this.openChild.close();
  357. this.openChild=null;
  358. }
  359. hideLayer(this.baseLayer);
  360. this.isOpen=false;
  361. if(this.isSubmenu){
  362. hideLayer(this.parentItem.highLayer);
  363. this.parentMenu.openChild=null;
  364. }
  365. }
  366. }
  367.  
  368. function popUpMenuSetStatic(flag){
  369. if(!this.isSubmenu)
  370. this.isStatic=flag;
  371. }
  372.  
  373. function popUpMenuMoveTo(x,y){
  374. if(this.created)
  375. moveLayerTo(this.baseLayer,x,y);
  376. this.left=x;this.top=y;
  377. this.right=this.left+this.width;
  378. this.bottom=this.top+this.height;
  379. }
  380.  
  381. function popUpMenuMoveBy(dx,dy){
  382. if(this.created)
  383. moveLayerBy(this.baseLayer,dx,dy);
  384. this.left+=dx;
  385. this.top+=dy;
  386. this.right+=dx;
  387. this.bottom+=dy;
  388. }
  389.  
  390. function popUpMenuGetzIndex(){
  391. if(this.created)
  392. return(getzIndex(this.baseLayer));
  393. else 
  394. return(0);
  395. }
  396.  
  397. function popUpMenuSetzIndex(z){
  398. var i;
  399. if(this.created){
  400. setzIndex(this.baseLayer,z);
  401. for(i=0;i<this.items.length;i++)
  402. if(this.items[i].subMenu!=null)
  403. this.items[i].subMenu.setzIndex(z);
  404. }
  405. }
  406. function popUpMenuOff(e){
  407. var menu;
  408. var wasClosed;
  409. menu=popUpMenus[this.index];
  410. if(isMinIE4){
  411. mouseX=window.event.clientX+document.body.scrollLeft;
  412. mouseY=window.event.clientY+document.body.scrollTop;
  413. if(mouseX>menu.left&&mouseX<menu.right&&mouseY>menu.top&&mouseY<menu.bottom)
  414. return true;
  415. }
  416. wasClosed=false;
  417. if(menu.openChild==null){
  418. if(!menu.isStatic){
  419. menu.close();
  420. wasClosed=true;
  421. }
  422. }
  423. else{
  424. if(mouseX<menu.openChild.left||mouseX>menu.openChild.right||mouseY<menu.openChild.top||mouseY>menu.openChild.bottom){
  425. if(!menu.isStatic){
  426. menu.close();
  427. wasClosed=true;
  428. }
  429. else 
  430. menu.openChild.close();
  431. }
  432. }
  433. while(wasClosed&&menu.isSubmenu&&!menu.parentMenu.isStatic){
  434. wasClosed=false;
  435. if(mouseX<menu.parentMenu.left||mouseX>menu.parentMenu.right||mouseY<menu.parentMenu.top||mouseY>menu.parentMenu.bottom){
  436. menu.parentMenu.close();
  437. wasClosed=true;
  438. menu=menu.parentMenu;
  439. }
  440. }
  441. return true;
  442. }
  443.  
  444. function popUpMenuItemOn(e){
  445. var menu,item;
  446. menu=popUpMenus[this.index];
  447. item=menu.items[this.itemIndex];
  448. if(menu.openChild)menu.openChild.close();
  449. showLayer(item.highLayer);
  450. if(item.subMenu)
  451. item.subMenu.open(null,null);
  452. }
  453.  
  454. function popUpMenuItemOff(e){
  455. var menu,item;
  456. menu=popUpMenus[this.index];
  457. item=menu.items[this.itemIndex];
  458. if(item.subMenu!=null&&item.subMenu.isOpen)
  459. return;
  460. hideLayer(item.highLayer);
  461. }
  462.  
  463. function popUpMenuItemClick(e){
  464. var menu,item;
  465. menu=popUpMenus[this.index];
  466. item=menu.items[this.itemIndex];
  467. if(item.link=="")
  468. return true;
  469. hideLayer(item.highLayer);
  470. while(menu.isSubmenu)
  471. menu=menu.parentMenu;
  472. if(!menu.isStatic)menu.close();
  473. else 
  474. if(menu.openChild!=null)
  475. menu.openChild.close();
  476. if(item.link.indexOf("javascript:")==0)
  477. eval(item.link);
  478. else 
  479. window.location.href=item.link;
  480. return true;
  481. }
  482. var mouseX=0;
  483. var mouseY=0;
  484. if(isMinNS4)document.captureEvents(Event.MOUSEMOVE);
  485. document.onmousemove=popUpMenuGetMousePosition;
  486.  
  487. function popUpMenuGetMousePosition(e){
  488. if(isMinNS4){
  489. mouseX=e.pageX;
  490. mouseY=e.pageY;
  491. }
  492. if(isMinIE4){
  493. mouseX=window.event.clientX+document.body.scrollLeft;
  494. mouseY=window.event.clientY+document.body.scrollTop;
  495. }
  496. }
  497. var origWidth;
  498. var origHeight;
  499. if(isMinNS4){
  500. origWidth=window.innerWidth;
  501. origHeight=window.innerHeight;
  502. }
  503. window.onresize=popUpMenuReload;
  504. function popUpMenuReload(){
  505. if(isMinNS4&&origWidth==window.innerWidth&&origHeight==window.innerHeight)
  506. return;
  507. if(isMinIE4)
  508. setTimeout('window.location.href = window.location.href',2000);
  509. else window.location.href=window.location.href;
  510. }
  511.