Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery][Ajax] Linki <map><area> wewnątrz div'a Ajaxu nie działają poprawnie
mike.jay
post
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 13.03.2010

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

Witam!

Proszę o pomoc w dość pilnej sprawie.
Mam div'a i ładuję do niego zawartość skryptem java o wdzięcznej nazwie Ezjax (czyli Ajax oparty na jQuery).
( http://www.milaju.com/post/simple-ajax-con...nger-with-ezjax )

Wszystkie linki wewnątrz załadowanej zawartości, jeśli przypisze się do nich klasę "ezjax" lub ustawi odpowiednią opcję, ładują zawartość wewnątrz okna Ajax'owego. Mam jednak ogromny problem z linkami przypisanymi do tagu <area>, a bardzo ich potrzebuję :/ Po kliknięciu ich, nowa zawartość ładuje się w głównym oknie przeglądarki...

Nie jestem znawcą JavaScript'u, ani jQuery, więc sam nie jestem w stanie odpowiednio zmodyfikować skryptu. Proszę o pomoc (IMG:style_emoticons/default/smile.gif)

Tak wygląda kod pliku jquery.ezjax.js
[JAVASCRIPT] pobierz, plaintext 
  1. /*
  2.  * 
  3.  * jQuery EZJax v. 1.0.1
  4.  * http://www.thecreativeoutfit.com
  5.  * 
  6.  * 
  7.  */
  8.  
  9. jQuery.fn.ezjax = function(o) {
  10.  
  11.   obj = jQuery(this).attr('class'); 
  12.  
  13.   // Defaults
  14.   var o = jQuery.extend( {
  15.     container: '#ezjax_content',
  16. 	initial: null,
  17. 	effect: null,
  18. 	speed: 'normal',
  19. 	easing: null,
  20. 	bind: '.'+obj
  21.   },o);
  22.  
  23.   // Load initial
  24. 	if(o.initial!=null){
  25. 		jQuery(o.container).load(o.initial,function(){
  26. 		bind();
  27. 	});
  28. 	}
  29.  
  30.   // Re-bind for any links internal to the content
  31. 	function bind(){
  32. 		jQuery(o.container+' '+o.bind).ezjax({
  33. 			container: o.container,
  34. 			initial: null,
  35. 			effect: o.effect,
  36. 			speed: o.speed,
  37. 			easing: o.easing
  38. 		});
  39. 	}
  40.  
  41.   // Main functionality
  42.   return this.each(function() {
  43.  
  44.   	jQuery(this).click(function(){
  45. 		var url = jQuery(this).attr('href');
  46.  
  47. 		// Check for transition effect
  48.  
  49. 		if (o.effect != null) {
  50.  
  51. 			// Run effect
  52. 			switch(o.effect){
  53.  
  54. 				// Slide
  55. 				case 'slide':
  56. 				jQuery(o.container).animate({height:"0px"}, o.speed, function(){
  57. 					jQuery(o.container).css('overflow','hidden'); // Fix glitchies
  58. 					jQuery(o.container).load(url, function(){
  59. 						jQuery(o.container).animate({
  60. 							height: jQuery(o.container).children().height() + 20
  61. 						},o.speed,o.easing,function(){
  62. 							jQuery(o.container).css('overflow','visible'); // Undo glitchy fix
  63. 						});
  64. 						bind();
  65. 					});
  66. 				});
  67. 				break;
  68.  
  69. 				// Fade
  70. 				case 'fade':
  71. 				jQuery(o.container).animate({ opacity: 0.0 }, o.speed, function(){
  72. 					jQuery(o.container).load(url, function(){
  73. 						jQuery(o.container).animate({ opacity: 1.0 }, o.speed);
  74. 						bind();
  75. 					});
  76. 				});
  77. 				break;
  78. 			}
  79. 		}
  80. 		else {
  81. 			// Standard load (no effect)
  82. 			jQuery(o.container).load(url,function(){
  83. 				bind();
  84. 			});
  85. 		}
  86. 		// Keeps the href from firing
  87. 		return false;
  88. 	});
  89.   });
  90.  
  91. };
[JAVASCRIPT] pobierz, plaintext


A tak krótki fragment w sekcji <head> pliku strony:
[JAVASCRIPT] pobierz, plaintext 
  1. 	$(document).ready(function(){
  2. 		$('.ezjax').ezjax({	
  3. 			container: '#BOX_FLATS_CONTAINER',
  4. 			initial: 'body_flats_viewer.php?type=general',
  5. 			effect: 'fade',
  6. 			easing: 'easeOutQuart',
  7. 			bind: 'a'
  8. 		});
  9. 	});
[JAVASCRIPT] pobierz, plaintext


Dodam, że pozmianie paramteru 'bind' (we fragmencie kodu z sekcji <head> strony) na 'area', link również nie działa poprawnie.


---


Po testach sprawa wygląda tak - w normalnych warunkach wszystko działa sprawnie (na testowym demo), jednak w stronie, którą robię do tagów <map><area> przypisany jest skrypt JavaScript, który dodaje efekt podświetlenia po najechaniu myszą, a w praktyce tworzy element <canvas> nad całym obrazkiem, dlatego kliknięcie <area> nie działa tak, jak powinno normalnie.

Wszystkie skrypty tworzące efekt podświetlenia elementów <area> działają podobnie, więc tego nie obejdę. Mogę jednak spróbować zmienić powyższy kod jquery.ezjax.js tak, aby każdy link w div'ie Ajaxa ładowany był wewnątrz tego div'a. I teraz o to właśnie proszę (IMG:style_emoticons/default/smile.gif)

Dzięki!

Ten post edytował mike.jay 17.10.2010, 20:23:42
Go to the top of the page
+Quote Post

Posty w temacie
- mike.jay   [jQuery][Ajax] Linki <map><area> wewnątrz div'a Ajaxu nie działają poprawnie   17.10.2010, 17:13:24

« 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: 11.10.2025 - 04:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn