jquery-dialog

原创 2012年03月28日 19:26:21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--引入类库文件-->
<script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入Css样式类库文件-->
<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css"/>


<!---->
<script type="text/javascript">
  
      $(function(){
  
      $("#dialog").dialog({
    autoOpen:false , 
show:"blind",  
hide:"explode", 
modal:true, 


                  buttons:[
   {
text:"ok",
click:function(){
  $(this).dialog("close");
}
},
 {
text:"取消",
click:function(){
  $(this).dialog("close");
}
}],
                  draggable:true ,
 closeOnEscape:false ,
 title:"添加用户操作界面" ,
 position:"top", 
 width:600, 
 height:200, 
 resizable:false ,
 zIndex:6,
 drag:function(event,ui){
    
 }
  });
  
  
  $("#dialog_link").click(function(){
  $("#dialog").dialog("open"); 
  });
  
var modalValue = $("#dialog").dialog("option","modal");
 
  $("#dialog").dialog("option","modal",false);
 });




</script>


<style>
            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
</style>
</head>


<body>


    <h1>模拟Dialog效果</h1>
    <a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>


    <div id="dialog"  title="hi!">
         hello!
    </div>
    </body>
</html>




调用函数




 $(function(){
  //注册对话框 
      $("#dialog").dialog({
    autoOpen:false , //设置对话框打开的方式 不是自动打开
show:"blind",  //打开时的动画效果
hide:"explode",  //关闭时的动画效果
modal:true, //遮罩效果true  false 非遮罩效果
/* buttons:{  //添加按钮的操作
  "确定":function(){
    $(this).dialog("close");//关闭对话框的操作
  },
"取消":function(){
 alert("取消的操作");
}
},
*/  //buttons的写法的第二种方式
                  buttons:[
   {
text:"ok",
click:function(){
  $(this).dialog("close");//关闭对话框的操作
}
},
 {
text:"取消",
click:function(){
  $(this).dialog("close");//关闭对话框的操作
}
}],
                  draggable:true ,//是否可以拖动的效果  true 可以拖动 默认值就是true  false代表不可以拖动
 closeOnEscape:false ,//是否采用esc键退出对话框 如果为false 则不采用 true 采用 默认值是true
 title:"添加用户操作界面" ,//对话框的标题
 position:"top", //对话框弹出的位置 可以使top left right center  bottom 默认值是 center
 width:600,  //对话框的宽度
 height:200, //对话框的高度
 resizable:false ,//是否可以改变的操作   false 则不可以改变尺寸  true可以改变尺寸   默认值是true
 zIndex:6,
 drag:function(event,ui){
    //可以测试出 对话框的当前坐标位置
 }
  });
  
  //触发连接的事件 当你点击 连接 打开一个对话
  $("#dialog_link").click(function(){
  $("#dialog").dialog("open"); //open参数  作用 打开对话框
  });
  
  
  //我怎么获取 我设置的options中的参数值
  var modalValue = $("#dialog").dialog("option","modal");
  //alert(modalValue);
  //我怎么设置options 中的参数值
  $("#dialog").dialog("option","modal",false);
 });





































版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

基于jquery的dialog插件

  • 2013-02-14 16:18
  • 69KB
  • 下载

jquery-dialog-drag.rar

  • 2015-10-15 10:11
  • 36KB
  • 下载

20151124 Jquery UI form 表单变成dialog

无标题文档 $(function(){ $("#form1").dialog({ autoOpen: false,//设置属性,不自动弹出对话框 ...

jquery.dialog控件

  • 2010-02-23 00:24
  • 140KB
  • 下载

jquery confirm dialog

  • 2016-01-14 22:43
  • 22KB
  • 下载

Jquery UI dialog 详解 (中文)

1 属性 1.11 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候,一开始隐藏窗口,知道.dialog("open")的时...

jquery dialog 用法

  • 2011-10-18 23:42
  • 97KB
  • 下载

Jquery_Dialog

  • 2014-08-27 13:32
  • 168KB
  • 下载

jQuery Dialog 弹出层对话框插件演示

原文地址:http://blog.csdn.net/fer_ba/article/details/7067352
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)