Lhgdialog对话框使用总结（上）

    引入相关js
 

		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="lhgdialog/lhgdialog.min.js?t=self&s=areo_blue"></script>

  t=参数值：self，在当前页面弹出窗口。此参数只用在框架页面中，如果不写此参数则窗口跨框架弹出在框架最顶层页面，如果值为self则不跨框架，而在当前面页弹出。
  s=参数值：默认default，不写此参数则值为default。如果你想在同一页面使用不同皮肤的窗口，就要把你要使用的皮肤的名称都写上，中间用","隔开，例lhgdialog.min.js?s=default,chrome，此参数用来动态给窗口换肤，参数的值为skins文件夹下各皮肤文件夹的名

    初始化参数
 

var dg = new $.dialog({ 

    id: 'test', // 窗口的id号 
     //默认lhgdlgId，自定义对话框ID属性，要保证在页面中是唯一的，不能和页面中任何元素的id相同 
     // 注意：如果页面中只有一个弹出窗口此参数可以不写，但页面中如果有1个以上的弹出窗口则一定要加此参数 

    title: '测试窗口', // 窗口的标题文本 

    width: 400, // 窗口的宽度默认400，不带单位的数字 

    height: 300, // 窗口的高度 

    page: "", // 窗口内容页的地址 
    // 窗口的内容页为一个单独的页面文件，这个文件的路径是内容页面文件相对于调用窗口插件的路径或也可使用绝对路径， 
    // 如果此参数的值为不同域的外部链接，那一定要使下面的link参数为真 

    link: false, // 是否为外部链接,与page参数关联 

    html: "", // 窗口的内容为HTML代码 

    maxBtn: true, // 是否显示最大化按钮 

    btnBar: true, // 是否显示按钮栏 

    cancelBtn: true, // 是否显示取消按钮 

    cover: false, // 是否开启锁屏 

    bgcolor: '#fff', // 设置遮罩层的颜色 

    opacity: 0.5, // 设置遮罩层的透明度 

    fixed: false, // 是否开启静止定位静止定位指的就是窗口随屏滚动 

    rang: false, // 是否限制窗口挪动范围也就是不允许窗口拖出浏览器的可视区域 

    titleBar: true, // 是否显示标题栏 

    iconTtile: true, // 是否显示标题栏左边小图标 

    xButton: true, // 是否显示窗口右上角的X关闭按钮 

    drag: true, // 是否允许拖动对话框 

    resize: true, // 是否允许拖动改变窗口大小 

    minBtn: true, // 是否显示最小化按钮 

    autoSize: false, // 是否窗口自适应大小 

    left: 'center', // X轴的坐标默认center(居中），left(屏幕的左边)，right(屏幕的右边)
 
    top: 'center', // Y轴的坐标默认center(居中），top(屏幕的最上边)，right(屏幕的最下面) 

    parent: null, // 子窗口的父窗口对象 
    // 此参数只用在弹出的窗口中再弹出子窗口时指定父窗口对象 
    // 注意如果2层弹出窗口都有遮罩层则一定要加此参数 

    lockScroll: false, //弹出遮罩层时是否消除滚动条 

    autoPos: false, //当浏览器大小改变时窗口的位置是否自动定位 
    // 参数值：默认为false，不自动定位窗口位置。如果想让窗口自动定位，属性值分为2种， 
    // 一种值为一个对象，对象中有2个属性，分别为left和top，left和top的值与窗口参数left和top的值是一样的。 
    // 例如：autoPos:{left:'right',top:'bottom'}。另一种是值为true，这里窗口默认为自动居中。 
    // 这和第一种值形式的：autoPos:{left:'center',top:'center'}的效果是相同的，只不过为true是一种简写方式。 

    skin: 'default', // 指定窗口的皮肤,只有在加载js时指定多皮肤时才有效 

    args: null, // 传递的参数 

    timer: null, // 定时关闭窗口时间，单位为秒 

    loadingText: "窗口正在加载中，请稍等...", 


// 窗口加载后执行的函数 
    dgOnLoad: function () { }, 

// 自定义窗口关闭函数 
    onCancel: function () { }, 

// 自动关闭窗口时执行的函数 
    autoCloseFn: function () { }, 

// 最小化按钮调用的函数 
    onMinSize: function () { }, 

// 窗口右上角X关闭按钮拦截函数     
    onXclick: function () { } 

});

    基本使用
 

   var dg = new $.dialog({ 
        id: 'test1', 
        title: '弹出窗口', 
        html: '弹出窗口内容'//也可为地址:例如users/add.do
    }); 
   dg.ShowDialog();

    利用dgOnLoad参数创建按钮
 

   var dg = new $.dialog({ 
        id: 'test1', 
        title: '弹出窗口', 
        html: '弹出窗口内容',
        dgOnLoad:function(){
     dg.addBtn('BtnSave','确定',function(){

     },'left');
    }
    }); 
    dg.ShowDialog();

  如果在springMVC中，创建‘确定’按钮也可以写在窗口内容所在的页面，并触发事件：
 

<script type="text/javascript">
  var dg;
  $(document).ready(function(){
  dg = frameElement.lhgDG;
 dg.addBtn('BtnSave','确定',function(){
  $("#UsersForm").submit();//UsersForm为Form表单id,提交表单
  });
 });
</script>  

这样一个简单的lhgdialog对话框就可以用了。

评论

1 楼 liuzl121 2012-09-06  

这是老版本的dialog了吧，如果可以建议楼主换个新版本的用，比老版本的有很强的易用性，页面之间的传接值和父对象、本身对象的获取都更加的简单了。