Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery] Pinezki jak na NK
sebekzosw
post
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
 
 Start new topic
Odpowiedzi
sebekzosw
post
Post #2





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 (IMG:style_emoticons/default/winksmiley.jpg)

oto wersja poprawiona: demo
Go to the top of the page
+Quote Post

Posty w temacie
- sebekzosw   [jQuery] Pinezki jak na NK   18.09.2010, 15:18:25
- - devnul   daj jakieś działające online demo bo tak to nawet ...   19.09.2010, 00:16:55
- - sebekzosw   demo   19.09.2010, 09:59:11
- - devnul   nie działa bo odwołujesz się do istniejących eleme...   19.09.2010, 12:53:17
- - sebekzosw   dzięki wielkie - rzeczywiście pomogło, a ja zapomn...   19.09.2010, 13:38:23

« Następny starszy · JavaScript · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 24.12.2025 - 08:33
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn