2011-03-08 2 views
0

J'ai actuellement 2 liens sur la page, http://test.medialayer.net/, que je voudrais mettre dans une liste déroulante html, le code actuel ci-dessous, toute ancre avec la classe ezjax chargera la page liée dans le contenu div, ezjax.HTML Dropdown formulaire avec des liens dans la liste déroulante

<div id="homePagePropertySearchBox"> 
    <a class="ezjax" href="../../../searchForms/searchOne.html">Search One</a> 
    <a class="ezjax" href="../../../searchForms/searchTwo.html">Search Two</a> 
    <div id="ezjax_content"> 
     <!-- THIS IS THE CONTAINER WHERE THE CONTENT WILL BE LOADED --> 
    </div> 
</div> 

Je trouve ce code ci-dessous qui va la direction que je veux aller, à l'exception onchange je veux juste ouvrir mon lien dans le contenu ezjax div

<form action="../"> 
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')"> 
    <option value="">Choose a destination...</option> 
    <option value="http://www.yahoo.com/">YAHOO</option> 
    <option value="http://www.google.com/">GOOGLE</option> 
    <option value="http://www.altavista.com/">ALTAVISTA</option> 
</select> 
</form> 

Encore une fois mes remerciements à tous ceux qui regardent. Chuck

Pour référence, voici le reste du code qui provoque le chargement.

à la page

<script type="text/javascript"> 
    $(document).ready(function(){ 
$('.ezjax').ezjax({ 
container: '#ezjax_content', 
initial: '../../../searchForms/searchOne.html', 
effect: 'slide', 
easing: 'easeOutBounce', 
bind: 'a' 
}); 

dossier lié

jQuery.fn.ezjax = function(o) { 

    obj = jQuery(this).attr('class'); 

    // Defaults 
    var o = jQuery.extend({ 
    container: '#ezjax_content', 
    initial: null, 
    effect: null, 
    speed: 'normal', 
    easing: null, 
    bind: '.'+obj 
    },o); 

    // Load initial 

    if(o.initial!=null){ 
     jQuery(o.container).load(o.initial,function(){ 
     bind(); 
}); 
} 

    // Re-bind for any links internal to the content 

function bind(){ 
    jQuery(o.container+' '+o.bind).ezjax({ 
     container: o.container, 
     initial: null, 
     effect: o.effect, 
     speed: o.speed, 
     easing: o.easing 
    }); 
} 

    // Main functionality 

    return this.each(function() { 

jQuery(this).click(function(){ 
    var url = jQuery(this).attr('href'); 

    // Check for transition effect 

    if (o.effect != null) { 

     // Run effect 
     switch(o.effect){ 

      // Slide 
      case 'slide': 
      jQuery(o.container).animate({height:"0px"}, o.speed, function(){ 
       jQuery(o.container).css('overflow','hidden'); // Fix glitchies 
       jQuery(o.container).load(url, function(){ 
        jQuery(o.container).animate({ 
         height: jQuery(o.container).children().height() + 20 
        },o.speed,o.easing,function(){ 
         jQuery(o.container).css('overflow','visible'); // Undo glitchy fix 
        }); 
        bind(); 
       }); 
      }); 
      break; 

      // Fade 
      case 'fade': 
      jQuery(o.container).animate({ opacity: 0.0 }, o.speed, function(){ 
       jQuery(o.container).load(url, function(){ 
        jQuery(o.container).animate({ opacity: 1.0 }, o.speed); 
        bind(); 
       }); 
      }); 
      break; 
     } 

    } 
    else { 
     // Standard load (no effect) 
     jQuery(o.container).load(url,function(){ 
      bind(); 
     }); 
    } 

    // Keeps the href from firing 
    return false; 

}); 

    }); 

}; 
    }); 
</script> 
+0

pourriez-vous mettre votre code sur jsfiddle? – LostLin

+0

Voici le lien, http://jsfiddle.net/cwilson/WNR3x/ il ne fonctionne pas de la même manière sur jsfiddle que sur mon site, http://test.medialayer.net/ Je vais continuer à jouer avec voir si je peux le faire fonctionner de la même manière. – Chuck

+0

Vous n'avez pas besoin d'insérer le JS dans les balises '

Questions connexes