jQuery Dialog 札记 _Web前端

jQuery Dialog 笔记

头部加入 ：

<link type="text/css" href="jquery-ui-1.7.2.custom/css/south-street/jquery-ui-1.7.2.custom.css" rel="stylesheet" />   

<script type="text/javascript" src="jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom/js/jquery-ui-1.7.2.custom.min.js"></script>

其中：

css/south-street 可以根据需要选用别的样式（从 http://jqueryui.com/themeroller/ 下载）。

加入脚本

<script language="javascript">
    $(function(){
                // Dialog           
                $('#dialog_status').dialog({
                    autoOpen: false,
                    width:500,  modal:false,  overlay:{ opacity:0.1,background:"#ffffff" },
                    buttons: {
                        "确定": function() {
                                      // $(this).dialog("close");
                                      DoImplHandOver( ); // 自定义的函数
                                   },
                        "取消": function() {
                                       $(this).dialog("close");
                                   }
                    }
                });
               
                // Dialog Link
                $('#dialog_link').click(function(){

                    // 加入了显示效果 
                    $('#dialog_status').show("slow");   

                    if ( check_HasChecked( "opt_one" ) == false )
                    {    alert( "没有选中记录！" );    return         }
                   

                    // 定位 
                    var X = $('#Submit2').position().left;
                    var Y = $('#opt_all').position().top;
                    // $('#dialog_status').dialog("option", "position", [ 'center',Y ] )
                    $('#dialog_status').dialog("option", "position", [ X,Y ] )

                    $('#dialog_status').dialog('open');

                    return false;
                });

                //hover states on the static widgets
                $('#dialog_link, ul#icons li').hover(
                    function() { $(this).addClass('ui-state-hover'); },
                    function() { $(this).removeClass('ui-state-hover'); }
                );
               
            });


//-->
</script>

页面元素 ：

按钮 dialog_link，点击时打开对话框

??? 对话框内容 .......

</div>

其他用法：

初始化：

$("#example").dialog( {

width:500,
position: { left,top },
modal: true ,
buttons: {
?? "确定": function() { alert("Ok"); },
?? "关闭": function() { $(this).dialog("close"); }

}

});