jQuery用ajax调用自定义fancybox

Question

我正在使用 this brilliant solution 来显示作为 POST 请求的结果的花式框。

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

在执行 ajax 时如何显示旋转动画（或类似动画）？

如何将fancybox的标题/内容显示为（风格化的）html？

Answer 1

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