Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jQuery] Pinezki jak na NK
sebekzosw
post 18.09.2010, 15:18:25
Post #1





Grupa: Zarejestrowani
Postów: 437
Pomógł: 42
Dołączył: 16.04.2007

Ostrzeżenie: (0%)
-----

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ą.

Ten post edytował sebekzosw 18.09.2010, 15:32:09
Go to the top of the page
+Quote Post
devnul
post 19.09.2010, 00:16:55
Post #2





Grupa: Zarejestrowani
Postów: 1 470
Pomógł: 75
Dołączył: 21.09.2005
Skąd: że znowu

Ostrzeżenie: (0%)
-----

daj jakieś działające online demo bo tak to nawet mi się czytać tego kodu nie chce


--------------------
Profesjonaliści są przewidywalni...
strzeż się amatorów...
FL4SHB4CK - imprezy, galerie, lokale
Go to the top of the page
+Quote Post
sebekzosw
post 19.09.2010, 09:59:11
Post #3





Grupa: Zarejestrowani
Postów: 437
Pomógł: 42
Dołączył: 16.04.2007

Ostrzeżenie: (0%)
-----

demo
Go to the top of the page
+Quote Post
devnul
post 19.09.2010, 12:53:17
Post #4





Grupa: Zarejestrowani
Postów: 1 470
Pomógł: 75
Dołączył: 21.09.2005
Skąd: że znowu

Ostrzeżenie: (0%)
-----

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.


--------------------
Profesjonaliści są przewidywalni...
strzeż się amatorów...
FL4SHB4CK - imprezy, galerie, lokale
Go to the top of the page
+Quote Post
sebekzosw
post 19.09.2010, 13:38:23
Post #5





Grupa: Zarejestrowani
Postów: 437
Pomógł: 42
Dołączył: 16.04.2007

Ostrzeżenie: (0%)
-----

dzięki wielkie - rzeczywiście pomogło, a ja zapomniałem o tej funkcji winksmiley.jpg

oto wersja poprawiona: demo
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 22.06.2025 - 00:58
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn