对话框的jquery按钮图标

Question

我有this code：

$(function() {
    var mainButtons = [
        {text: "Invite"
        , 'class': 'invite-button'
        , click: function() {
            // get list of members
            alert('Invite was clicked...');
            }
        } // end Invite button
        , {text: "Options"
        , 'class': 'options-button'
        , click: function() { 
            alert('Options...'); 
            }
        } // end Options button
    ] // end mainButtons
    , commentButtons = [
        {text: "Clear"
        , 'class': 'clear-button'
        , click: function() { 
            $('#comment').val('').focus().select();
            }
        } // end Clear button
        , {text: "Post comment"
        , 'class': 'post-comment-button'
        , click: function() { 
            alert('send comment...');
        }
        } // end Post comment
    ] // end commentButtons

    $( "#form" ).dialog({
        autoOpen: false
        , height: 465
        , width: 700
        , modal: true
        , position: ['center', 35]
        , buttons: mainButtons
    });    
    $( "#user-form" )
        .button()
        .click(function() {
            $(this).effect("transfer",{ to: $("#form") }, 1500);
            $( "#form" ).dialog( "open" );
            $( ".invite-button" ).button({ icons: {primary:'ui-icon-person',secondary:'ui-icon-triangle-1-s'} });
            $( ".options-button" ).button({ icons: {primary:'ui-icon-gear'} });
        });

    // Add comment...
    $("#comment, .comment").click(function(){
        $('#comment').focus().select();
        $("#form").dialog({buttons: commentButtons});
        $( ".post-comment-button" ).button({ icons: {primary:'ui-icon-comment'} });
        $( ".clear-button" ).button({ icons: {primary:'ui-icon-refresh'} });
    }); //Add comment

    // Bind back the Invite, Options buttons
    $(".files, .email, .event, .map").click(function(){
        $("#form").dialog({buttons: mainButtons});
        $( ".invite-button" ).button({ icons: {primary:'ui-icon-person',secondary:'ui-icon-triangle-1-s'} });
        $( ".options-button" ).button({ icons: {primary:'ui-icon-gear'} });
    });

    // Tabs
    $( "#tabs" ).tabs();
    $( ".tabs-bottom .ui-tabs-nav, .ui-tabs-nav > *" )
        .removeClass( "ui-widget-header" )
        .addClass( "ui-corner-bottom" );

});

添加按钮图标的正确方法是什么？在我的代码中，我必须添加两次，一次：

$( "#user-form" )
        .button()
        .click(function() {
            $(this).effect("transfer",{ to: $("#form") }, 1500);
            $( "#form" ).dialog( "open" );
...

和

$(".files, .email, .event, .map").click(function(){ ...

这段代码可以进一步改进吗？我似乎无法使“转移”效果在模态中正常工作。我补充说：

, close: function() { $(this).effect("transfer",{ to: $("#user-form") }, 1500); }

到$( "#form" ).dialog({

当您打开和关闭对话框时，如何让“转移”很好地工作？