jQueryUI

当前位置:首页>jQuery>jQueryUI>JqueryUI实践系列ModalDialog

JqueryUI实践系列ModalDialog

时间:2015-07-14 17:00来源:网络整理 作者:KKWL 点击:
jquery中设置了一系列的UI组件,其中Modal Dialog是比较常用的,现在我们来看看如何使用 先看看最后的效果; 首先,导入所需要的css以及js, link type=text/css href=base/ui.all.css / script type=te

 

 

jquery中设置了一系列的UI组件,其中Modal Dialog是比较常用的,现在我们来看看如何使用
先看看最后的效果;


首先,导入所需要的css以及js,
  <link type="text/css" href="base/ui.all.css" />
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="ui/ui.core.js"></script>
  <script type="text/javascript" src="ui/ui.draggable.js"></script>
  <script type="text/javascript" src="ui/ui.resizable.js"></script>
  <script type="text/javascript" src="ui/ui.dialog.js"></script>
然后设置页面
<div title="创建">
 <form>
   <input />
 </form>
</div>
<button>open</button>
初始化对话框属性
$(function(){

   $("#dialog").dialog(
    { buttons: { "关闭&ESC": function()
                    { $(this).dialog("close");
                    } ,
                 "保存": function()
                    { $(this).dialog("close");
                    }
               },
       autoOpen: false,
       modal:true,
       height: 300,
       closeOnEscape:true,
       hide:'shake'

     
    });
   
    $("#btn").bind("click",function(){
 $("#dialog").dialog('open');
   });
});

这样就可以根据我们的设置显示div中模式对话框了.
当然可以根据我们的需要设置必要的属性:

autoOpen Type: Boolean Default: true 默认在调用dialog()时候打开,否则调用dialog('open')时候显示;  buttons

Type: Object Default: { } 定义显示的按钮极其对应调用的方法; closeOnEscape

Type: Boolean Default: true 是否采用esc关闭窗体;

draggable Type: Boolean Default: true 是否可以拖动;

height、widh Type: Number Default: 'auto' 窗体高度、宽,单位pixel

hide,show Type: String Default: null 隐藏、显示特效;

modal Type: Boolean Default: false 是否显示为模式窗体;

position Type: String, Array Default: 'center' 显示的位置;

resizable Type: Boolean Default: true 是否可缩放尺寸;

 

 


 

 

 

 

 

 


 

 

 

------分隔线----------------------------