jQuery dialog组件的使用(1.7以上版本)

  1. jquery ui组件的使用一般都是包括两个部分:
    1. 定义标签;
    2. 初始化组件
  2. dialog组件的使用
    1. 首先定义标签,例 “<div id="dd">你好</div>”,标签里的内容“你好”就是将来弹出对话框的内容,标签元素的内容可随意扩展,在定义标签时,一定要给个ID,目的就是将此元素标签与dialog对话框关联起来。注意:所定义的标签元素是隐藏的,只有在触发事件时,才会弹出标签定义的内容。
    2. 初始化dialog组件
      $("#dd").dialog({
      title:"消息",//对话框标题
      autoOpen:false,//是否自动弹出,一般为false,不自动弹出
      width:300,//对话框的宽度
      height:200,//对话框的高度
      minWidth:290,//对话框最小宽度
      minHeight:160,//对话框最小高度
      maxWidth:390,//对话框最大宽度
      maxHeight:260,//对话框最大高度
      position:["left","top"],//弹出对话框的位置
      draggable:true,//是否可以拖动
      resizable:true,//是否可以改变对话框的大小
      closeOnEscape:false,//是否激活ESC关闭
      modal:true //是否屏蔽窗口
      });
    3. 触发对话框
      触发对话框可以使任意一个事件,在此我以单击事件为例
      例,“<div id='da'></div>”
      在单击此元素是,触发对话框
      $("#da").click(function(){
      $("#dd").dialog("open");//打开对话框
      }
      <html>
      <head>
       <script src="jquery.ui.core.js"></script>
       <script src="jquery.ui.widget.js"></script>
       <script src="jquery.ui.mouse.js"></script>
       <script src="jquery.ui.position.js"></script>
       <script src="jquery.ui.resizable.js"></script>
       <script src="jquery.ui.draggable.js"></script>
       <script src="jquery.ui.sortable.js"></script>
       <script src="jquery.ui.dialog.js"></script>
      </head>
      <body>
      <div id="dd"><span>你好</span></div>
      <div id="da"></div>
      <script type="text/javascript">
      $(function(){
      $("#dd").dialog({
      title:"",
      autoOpen:false,
      width:300,
      height:200,
      closeOnEscape:false,
      draggable:true,
      resizable:false,
      modal:true,
      position:["center","center"]
      });
      
      $("#da").click(function(){
      $("#dd").dialog("open");
      });
      });
      </script>
      <body>
      </html>
      );

你可能感兴趣的:(jQuery dialog组件的使用(1.7以上版本))