jQuery使用ajax调用自定义fancybox

时间:2011-10-03 10:26:44

标签: jquery ajax fancybox

我正在使用this brilliant solution作为POST请求的结果显示fancybox。

问题在于我不知道如何自定义fancybox行为。

如何在执行ajax时显示旋转动画(或类似物)?

如何设置标题/将fancybox的内容显示为(风格化)html?

1 个答案:

答案 0 :(得分:2)

function formatTitle(title, currentArray, currentIndex, currentOpts) {
    return '<div id="tip7-title"><span><a     
    href="javascript:;"onclick="$.fancybox.close();"><img src="/data/closelabel.gif" />      
    </a></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Image ' + 
    (currentIndex + 1) + ' of ' +  currentArray.length + '</div>';
} 


function showResponse(responseText){
  //first of all hide the spinning animation div
  //then process the response as you like
  $.fancybox({
            'content'               : responseText,
        'titlePosition'     : 'inside',
        'titleFormat'       : formatTitle
           });
  }

function showspinningAnimation(iddiv_container){
  //this function is called before the ajax call    
  //put your animation spinning or whatever in a div
}

var options = {       
    beforeSubmit:  showRequest,  // pre-submit callback 
    success:       showResponse 
}; 

$(document).ready(function() {
   $("#myForm").ajaxForm(options);        
});    

说明:

formatTitle:此函数格式化您的fancybox的标题 showspinningAnimation:在这个函数中将一个旋转的.gif(例如)放在显示加载的div中......