jquery学习模拟Dialog效果

原创 2012年03月28日 17:36:03
<!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 type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
    
    <script type="text/javascript">
    $(function(){
      $("#dialog").dialog({
 autoOpen:false,  //设置对话框打开的方式  不是自动打开
 show:"blind",  //打开时的动画效果
 hide:"explode",  //关闭时的动画效果
 modal:true,       //true遮罩效果  false非遮罩效果
/*  //buttons的第一种方法  
 buttons:{
 //添加按钮的操作
 "确定":function(){
 //alert("提交");
 $(this).dialog("close");  //关闭对话框
 },
 "取消":function(){
 //alert("确定取消吗");
   $(this).dialog("close");  //关闭对话框


 }
 },*/
 //buttons的第二种方法:
buttons:[
 {
 text:"ok",
 click:function(){
 $(this).dialog("close");
 }
 },{text:"取消",
 click:function(){
 $(this).dialog("close");
 }
 }
],
 
 draggable:false,  //true表示可以拖动(默认的),false不可以拖动
 closeOnEscape:false,  //是否采用esc键关闭对话框,false不采用。true采用,为默认的
 title:"添加用户操作界面",  //对话框的标题
 position:"top",   //对话框弹出的位置(top  left  right center bottom 默认值是center)
     width:600,   //对话框的宽度
 height:300,   //对话框的高度
     resizable:false,  //是否可以改变的操作 true可以改变尺寸,默认值为true
 zIndex:6,

 });  
//触发连接的事件 当你点击时 连接 打开一个对话
 $("#dialog_link").click(function(){
         $("#dialog").dialog("open");  //open参数 作业 打开对话框
 });
 
    });
    </script>
    
    <style>
    
    
    
    
    </style>
    
</head>


<body>
<h1>模拟Dialog效果</h1>


<a href="#" id="dialog_link"><span class="ui-icon ui-icon-newwin"></span>open Dailog</a>


<!--div对话框 $$("#dialog").dialog("open"); 他就成了一个对话框 在页面终究会隐藏-->


<div id="dialog" title="hi!"> 
hello!


</div>




</body>
</html>

jquery模拟实现仿select效果

本着服务为人民的远大理想,最近写了个jquery模拟select效果的小东东,挺好用,分享下。 可以直接在我上传的资源里下载压缩包,下载地址:jquery模拟实现仿select效果。 首先,上html...
  • u010480479
  • u010480479
  • 2015年07月14日 16:24
  • 3859

js/jquery模拟radio单选效果

如题。 现在我们已经不满足于仅仅使用原生单选按钮了。 我们当然希望让自己的样式别出一格,可以随意修改其样式。         实现样式的话,使用ul/li进行配合是最好的。因为我们可以通过jqu...
  • killzero
  • killzero
  • 2014年03月02日 10:29
  • 2549

模拟dialog效果

$(function(){ //注册对话框 $("#dialog").dialog({ autoOpen:false , //设置对话框的打开方式不是自动打开 ...
  • dunyanan1
  • dunyanan1
  • 2012年03月28日 17:50
  • 668

jQuery UI dialog 参数说明

前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比如弹出两个层A和B  B层如果显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,因为B层是在A层上弹出的...
  • xue_feitian
  • xue_feitian
  • 2011年06月02日 19:13
  • 90906

Jquery的模拟事件,input模拟focus

常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果。例如在用户进入页面后,就触发click事件,而不需要用户去主动单击。 在JQuery中,可以使用trigger()方法完成模拟操作...
  • StarsInSun
  • StarsInSun
  • 2014年08月14日 09:34
  • 2617

jQuery Dialog对话框事件

Dialog对话框事件 对话框应用场景 对话框是最常用、最实用的功能。 1)  静态提示类对话框,对话框的内容是固定的 2)  动态提示类对话框,对话框内容是根据事件源变化的 3)  遮罩类...
  • dingyan954
  • dingyan954
  • 2012年03月28日 21:10
  • 7352

jQuery Dialog API (二)

一、使用传统的参数 $.dialog(content,ok,cancel) $.dialog('简单愉悦的接口,强大的表现力,优雅的内部实现', function(){alert('yes');});...
  • u012989850
  • u012989850
  • 2016年01月21日 19:51
  • 2471

jQuery UI全教程之一(dialog的使用教程)

[html] view plaincopy    jQuery UI目前的版本已经更新到了1.8.7。个人感觉和easyui相比起来,jQuery UI在界面的...
  • u012889638
  • u012889638
  • 2014年08月27日 10:41
  • 3352

JQuery UI Dialog 参数传递及事件交互技术

JQuery UI Dialog 是主页面和子页面交互的常用控件,经常碰到的问题是:参数传递,事件交互和页面元素的清除回收。本文使用MVC4,JQuery,Html开发做以示例。 1. Di...
  • my98800
  • my98800
  • 2017年11月22日 08:53
  • 679

Jquery UI dialog 详解 与 jQuery UI Button示例

转自:http://www.cnblogs.com/bestfc/archive/2009/06/08/1498742.html 转自:http://www.2cto.com/kf/201303/1...
  • super2007
  • super2007
  • 2013年06月14日 23:47
  • 4168
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery学习模拟Dialog效果
举报原因:
原因补充:

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