Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Pinezki jak na NK
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
sebekzosw
18.09.2010, 15:18:25
Witam!
Zacząłem robić skrypt pinezek taki jak na nk (a przynajmniej podobny). Obecnie jestem na takim etapie:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. 	<meta name="author" content="sebekzosw" />
  6. 	<title></title>
  7. 	<link href="css/style.css" rel="stylesheet" type="text/css" />
  8.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
  9.     <script type="text/javascript">
  10.     var move = false;
  11.     var pin_id = 0, set = true;
  12.     jQuery(document).ready(function()
  13.     {
  14.         $(document).mousemove(function(e)
  15.         {
  16.             if(move)
  17.             {
  18.                 $('#pin_'+pin_id).css({'left':e.pageX+5+'px', 'top' : e.pageY+5+'px'});
  19.             }
  20.         });
  21.  
  22.         $("#photo").click(function(e)
  23.         { 
  24.             if(move)
  25.             {
  26.                 var pos = $(this).position(); 
  27.                 pos.left = parseInt(pos.left); 
  28.                 pos.top = parseInt(pos.top); 
  29.                 var x = e.pageX - pos.left; 
  30.                 var y = e.pageY - pos.top;
  31.                 move = false;
  32.                 $('<div></div>').css({
  33.                 'position' : 'absolute', 
  34.                 'width' : '200px',
  35.                 'height' : '200px',
  36.                 'left' : x+35+'px',
  37.                 'top' : y+35+'px',
  38.                 'zIndex' : '0',
  39.                 'backgroundColor' : 'white',
  40.                 'border' : '1px solid black' }).attr('id', 'added_'+pin_id).html("Treść (maksymalnie 100 znaków):<br /><a href='' onclick='Usun(); return false;'>x</a><br /><textarea cols='20' rows='5'>"+x + ", " + y +"</textarea><input type='button' onclick='Zapisz(); return false;' value='Zapisz' />").appendTo('body'); 
  41.                 //alert();
  42.             }
  43.             return false; 
  44.         });
  45.  
  46.         $("#pp").click(function(e)
  47.         {
  48.             if(pin_id == 0)
  49.             {
  50.                 pin_id = new Date().getTime();
  51.                 move = true;
  52.                 set = true;
  53.                 var pos = $(this).position(); 
  54.                 pos.left = parseInt(pos.left); 
  55.                 pos.top = parseInt(pos.top); 
  56.                 var x = e.pageX - pos.left; 
  57.                 var y = e.pageY - pos.top;
  58.                 $('<div></div>').css({
  59.                 'position' : 'absolute', 
  60.                 'width' : '34px',
  61.                 'height' : '34px',
  62.                 'left' : x+'px',
  63.                 'top' : y+'px',
  64.                 'zIndex' : '2',
  65.                 'background' : 'url(http://ba013.k12.sd.us/images/note2.gif) no-repeat'}).attr({'id' : 'pin_'+pin_id}).appendTo('body'); 
  66.             }
  67.             else if(pin_id != 0 && !set)
  68.             {
  69.                 $('#pin_'+pin_id).remove();
  70.                 move = false;
  71.                 set = false;
  72.             }        
  73.             return false;
  74.         });  
  75.  
  76.         $('.complete').click(function(){
  77.             alert('s');
  78.             return false;
  79.         });
  80.     });
  81.  
  82.     function Zapisz()
  83.     {
  84.         $('#added_'+pin_id).text('treść mojej pinezki').hide();
  85.         $('#pin_'+pin_id).css({'zIndex' : '0'}).addClass('complete');
  86.         pin_id = 0;
  87.         set = false;
  88.         move = false;
  89.     }
  90.  
  91.     function Usun()
  92.     {
  93.         $('#pin_'+pin_id).remove();
  94.         $('#pin_'+pin_id).remove();
  95.         pin_id = 0;
  96.         set = false;
  97.         move = false;
  98.     }
  99.     </script>
  100. </head>
  101. <body>
  102.  
  103.  
  104. <img src="http://media2.pl/pliki/lech_kasa_promocja.jpg" id="photo"  />
  105. <a href="lol.html" id="pp">Przypnij pinezke</a>
  106.  
  107. </body>
  108. </html>
[HTML] pobierz, plaintext


Chciałem zrobić takie coś, że jak przypnę coś na zdjęciu, zapiszę to po najechaniu mi się wykona akcja pokazująca to co zapisałem. Jednak mam problem z $('.complete'). Powinno się po kliknięciu na ten element z klasą .complete (czyli jak pinezka została zapisana i przypięta, ta class jest dopisywana) wykonywać odpowiednie zadanie (w moim przypadku wyświetlić alert z napisem "s" ). Jednak nie działa mi to ;/ czym to jest spowodowane? Tym, że div ma pozycje absolutną? (wydaje mi się, że to bez znaczenia). Jeżeli zacznie mi się wyświetlać alert to wtedy będę mógł zrobić, że po najechaniu na to pokaże mi się div z moją treścią.
devnul
19.09.2010, 00:16:55
daj jakieś działające online demo bo tak to nawet mi się czytać tego kodu nie chce
sebekzosw
19.09.2010, 09:59:11
demo
devnul
19.09.2010, 12:53:17
nie działa bo odwołujesz się do istniejących elementów .complete i nie tworzysz nowego zdarzenia po przypięciu kolejnych pinezek. Żeby temu użyj live()
[JAVASCRIPT] pobierz, plaintext 
  1. $('.complete').live("click",function(){
  2. alert('s');
  3. return false;
  4. });
[JAVASCRIPT] pobierz, plaintext

dzięki temu zdarzenie będzie działało w przeciwieństwie do bind() czy zdarzeń typu one(), albo click(), nie tylko na już stworzonych pinezkach ale także na tych które dodasz po deklaracji zdarzenia.
sebekzosw
19.09.2010, 13:38:23
dzięki wielkie - rzeczywiście pomogło, a ja zapomniałem o tej funkcji winksmiley.jpg

oto wersja poprawiona: demo
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.