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>
pourriez-vous mettre votre code sur jsfiddle? – LostLin
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
Vous n'avez pas besoin d'insérer le JS dans les balises '