드롭 다운에 링크가 포함 된 HTML 드롭 다운 양식

현재 페이지의 두 개 링크, 즉 HTML 드롭 다운, 현재 코드 아래에 두 개의 링크가 있습니다. ezjax가 연결된 페이지를로드합니다. div, ezjax 콘텐츠드롭 다운에 링크가 포함 된 HTML 드롭 다운 양식

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

나는이 코드는 그 이하 나는 그냥

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

다시 한번 ezjax 콘텐츠 사업부에 모두 내 덕분에 내 링크를 열려면 onchange를 제외하고, 내가 가고 싶은 방향을 것입니다 발견 봐주는 사람들. Chuck

여기로드를 발생시키는 나머지 코드가 있습니다. 페이지

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

JS 링크 된 파일

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>

출처

2011-03-08 Chuck

jsfiddle에 코드를 삽입 할 수 있습니까? – LostLin

다음 링크는 http://jsfiddle.net/cwilson/WNR3x/ 내 사이트에서와 마찬가지로 jsfiddle에서도 동일하게 작동하지 않습니다. http://test.medialayer.net/ 계속해서 내가 그걸 똑같이 작동시킬 수 있는지 알아봐. – Chuck

JS 피들의 JS 태그에 '

드롭 다운에 링크가 포함 된 HTML 드롭 다운 양식

관련 문제