当前位置: 代码迷 >> Web前端 >> jQuery Dialog 札记
  详细解决方案

jQuery Dialog 札记

热度:833   发布时间:2012-11-01 11:11:31.0
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 id="dialog_status" title="设定选定器具的承检状态">

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

</div>

?

?

其他用法:

?

初始化:

$("#example").dialog( {

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

}

});

?

?

  相关解决方案