Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: MouseDown
Forum PHP.pl > Forum > Po stronie przeglądarki
Dex1987
23.12.2006, 15:35:59
Witam, pobralem sobie taka funkcje w js, i mam pewien problemik z jej przerobieniem, chcialem dorobic mozliwosc przenoszenia kliku okien, teraz moge przenosic tylko ostatnio otwarte okno.

[HTML] pobierz, plaintext 
  1. var isMozilla;
  2. var objDiv = null;
  3. var originalDivHTML = "";
  4. var DivID = "";   
  5. var over = false;
  6.  
  7.  
  8. function displayFloatingDiv(divId, title, left, top) 
  9. {       
  10.  
  11.  var items;
  12.  
  13.              items = document.getElementsByName(divId);
  14.  
  15.  
  16.           for (i = 0; i <= items.length; i++) {
  17.  
  18.          width = 300;
  19. 		       height = 200;
  20.  
  21.  
  22.  
  23.    DivID = divId;
  24.  
  25.  
  26.     items[i].style.width = width + 'px';
  27.     items[i].style.height = height + 'px';
  28.     items[i].style.left = left + 'px';
  29.     items[i].style.top = top + 'px';
  30.  
  31. 	var addHeader;
  32.  
  33. 	if (originalDivHTML == "")
  34. 	    originalDivHTML = items[i].innerHTML;
  35.  
  36. 	addHeader = '<table style="width:' + width + 'px" class="floatingHeader">' +
  37. 	            '<tr><td onmouseover="over=true;" onmouseout="over=false;" style="cursor:move;height:18px">' + title + '</td>' + 
  38. 	            '<td style="width:18px" align="right"><a href="java script:hiddenFloatingDiv('' + divId + '');void(0);">' + 
  39. 	            '<img alt="Close..." title="Close..." src="close.jpg" border="0"></a></td></tr></table>';
  40.  
  41.  
  42.     // add to your div an header	
  43. 	items[i].innerHTML = addHeader + originalDivHTML;
  44.  
  45.  
  46. 	items[i].className = 'dimming';
  47. 	items[i].style.visibility = "visible";   
  48.  
  49.    } 
  50.  
  51.  
  52. }
  53.  
  54.  
  55. //
  56. //
  57. //                            
  58. function hiddenFloatingDiv(divId, id) 
  59. {
  60. 	document.getElementById(divId).innerHTML = originalDivHTML;
  61. 	document.getElementById(divId).style.visibility='hidden';
  62. 	document.getElementById('dimmer').style.visibility = 'hidden';
  63.  
  64. 	DivID = "";
  65. }
  66.  
  67. //
  68. //
  69. //
  70. function MouseDown(e) 
  71. {
  72.  
  73.     if (over)
  74.     {
  75.         if (isMozilla) {
  76.             objDiv = document.getElementById(DivID);
  77.             X = e.layerX;
  78.             Y = e.layerY;
  79.  
  80.         }
  81.         else {
  82.             objDiv = document.getElementById(DivID);
  83.             objDiv = objDiv.style;
  84.             X = event.offsetX;
  85.             Y = event.offsetY;
  86.         }
  87.     }
  88. }
  89.  
  90.  
  91. //
  92. //
  93. //
  94. function MouseMove(e) 
  95. {                 
  96.     if (objDiv) {
  97.         if (isMozilla) {
  98.             objDiv.style.top = (e.pageY-Y) + 'px';
  99.             objDiv.style.left = (e.pageX-X) + 'px';
  100.             return true;
  101.         }
  102.         else 
  103.         {
  104.             objDiv.pixelLeft = event.clientX-X + document.body.scrollLeft;
  105.             objDiv.pixelTop = event.clientY-Y + document.body.scrollTop;
  106.             return true;
  107.         }
  108.     }
  109. }
  110.  
  111. //
  112. //
  113. //
  114. function MouseUp() 
  115. {
  116.     objDiv = null;
  117. }
  118.  
  119.  
  120. //
  121. //
  122. //
  123. function init()
  124. {
  125.     // check browser
  126.     isMozilla = (document.all) ? 0 : 1;
  127.  
  128.  
  129.     if (isMozilla) 
  130.     {
  131.         document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
  132.     }
  133.  
  134.     document.onmousedown = MouseDown;
  135.     document.onmousemove = MouseMove;
  136.     document.onmouseup = MouseUp;
  137.  
  138.     // add the div
  139.     // used to dim the page
  140.  
  141.  
  142. }
  143.  
  144. // call init
  145. init();
[HTML] pobierz, plaintext


Plik html;

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  
  4. <LINK REL=StyleSheet HREF="dimming.css" TYPE="text/css">
  5.  
  6. <script LANGUAGE="JavaScript" SRC="dimmingdiv.js"></SCRIPT>
  7.  
  8. </head>
  9.  
  10. <body leftmargin="0" topmargin="0">
  11.  
  12.  
  13. Click <a href="java script:displayFloatingDiv('windowcontent', 'Floating1', 100, 100)">here</a>
  14. and <a href="java script:displayFloatingDiv('windowcontent2', 'Floating2', 115, 115)">here</a>
  15.  
  16. <div style="visibility:hidden" name="windowcontent" id="windowcontent">
  17.   Podaj swoje imie...
  18. </div>  
  19.  
  20. <div style="visibility:hidden" name="windowcontent2" id="windowcontent2">
  21.   Podaj swoje nazwisko...
  22. </div>  
  23.  
  24. </body>
  25. </html>
[HTML] pobierz, plaintext


Plik css:
[HTML] pobierz, plaintext 
  1. div.dimmer 
  2. {
  3. 	visibility: hidden;
  4. 	position:absolute;
  5. 	left:0px;
  6. 	top:0px;
  7. 	font-family:verdana;
  8. 	font-weight:bold;
  9. 	padding:40px;
  10.  
  11. 	/* ieWin only stuff */
  12. }
  13.  
  14.  
  15. div.dimming {
  16. 	font-family: Verdana, Arial, Helvetica, sans-serif;
  17. 	font-size: 11px;
  18. 	font-style: normal;
  19. 	background-color: #ffffff;
  20. 	position:absolute;
  21. 	/* set z-index higher than possible */
  22. 	z-index:10000;
  23. 	visibility: hidden;
  24.  
  25. 	border-style: solid;
  26. 	border-color: #999999;
  27. 	border-width: 1px;
  28.  
  29. }
  30.  
  31. table.floatingHeader
  32. {
  33. 	background-color: #0000ff;
  34. 	color:#ffffff;
  35. }
[HTML] pobierz, plaintext
ActivePlayer
25.12.2006, 12:59:24
napisz konkretnie z czym masz problem, w ktorym miejscu cos Ci nie wychodzi, gotowca tutaj niestety (nawet na swieta) nie dostaniesz.
emacieka
7.01.2007, 23:13:18
Możesz np. zamienić (w pliku z js):
Kod
addHeader = '<table style="width:' + width + 'px" class="floatingHeader">' +
'<tr><td onmouseover="over=true;" onmouseout="over=false;" style="cursor:move;height:18px">' + title + '</td>' +

na:
Kod
addHeader = '<table style="width:' + width + 'px" class="floatingHeader">' +
'<tr><td onmouseover="over=true;" onmouseout="over=false;" style="cursor:move;height:18px" onMouseDown="DivID = \'' + divId + '\'">' + title + '</td>' +


Cytat(ActivePlayer @ 25.12.2006, 12:59:24 ) *
gotowca tutaj niestety (nawet na swieta) nie dostaniesz.

Wesołych Swiąt! Rkingsmiley.png
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.