jQuery插件实现模拟dialogs效果实例(图片)

原创 2012年03月28日 15:39:43

<!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>模拟dialogs效果</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>
<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css"/>
<!---->
<script type="text/javascript">
//当窗体加载完毕的时候 触发匿名函数
//$(document) //把document对象转换成jquery对象
//.ready(function(){})
$(function (){
 //注册对话框
 $("#dialog").dialog({
  autoOpen:false,//设置对话框的打开方式不是自动打开
  show:"blind", //打开时的动画效果
  hide:"explode",//关闭时的动画效果
  modal:true ,//遮罩效果 false非遮罩效果
  /*buttons:{//添加按钮的操作
  "确定":function(){
   $(this).dialog("close");//关闭对话框
  alert("提交"); 
  },
  "取消":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,//对话框的高度
 
  heigth:200,//对话框的宽度
  resizeble: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);
  //我怎么设置option的参数值
  $("#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>模拟dialogs效果</h1>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span></span>Open Dialog</a>
<!--对话框 $(#dialog").dialog();它就成了一哥对话框 在页面中就回隐藏-->
<div id="dialog" title="hi">
Hello!
</div>
</body>
</html>

Jquery插件--实现面板模拟效果

无标题文档 //当窗体加载完毕的时候 触发该匿名函数 //$(document) //把dom对象转换成jquery对象 //.ready(funct...
  • zhaoxinglei0309
  • zhaoxinglei0309
  • 2012年03月28日 17:29
  • 317

jQuery购物图片中的鼠标悬停显示详细信息效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">      ...
  • haitaoDoit
  • haitaoDoit
  • 2012年03月15日 19:54
  • 4468

利用第三方开源框架 PullToRefreshListView 实现下拉刷新

利用第三方开源框架 PullToRefreshListView 实现下拉刷新
  • antimage08
  • antimage08
  • 2015年11月24日 17:22
  • 218

JQuery插件实现相册效果(数据库调用图片)

aspx页面----------------------------             #mydiv ul{ list-style-type:none;}     #mydiv ...
  • wangrui201107
  • wangrui201107
  • 2013年05月08日 21:06
  • 538

jQuery插件模拟支付宝密码输入框效果

jQuery插件模拟支付宝密码输入框效果
  • Carino_U
  • Carino_U
  • 2017年12月19日 10:46
  • 3171

图片鼠标悬停特效 Adipoli 20多种效果jQuery插件

Adipoli jQuery Image Hover Plugin简 介Adipoli 是一个简单的 jQuery plugin,可以给图片定义鼠标悬停时的效果。 这个插件可以帮助你添加各种不同的悬...
  • xiaokui_wingfly
  • xiaokui_wingfly
  • 2016年07月12日 15:09
  • 1233

jquery插件——模拟dialog效果案例

jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery 的全局函数就是属于jQuery...
  • zhaoxinglei0309
  • zhaoxinglei0309
  • 2012年03月28日 17:22
  • 682

图像处理算法之鱼眼镜头特效模拟

鱼眼镜头拍摄的图像还是挺好玩的,当时做这个特效时,下载了很多应用一一体验,但是发现苹果应用商店或者安卓应用市场上很多鱼眼镜头相关应用,很多都是按照图像变形做的,与真正鱼眼镜头拍摄的效果相差较远。...
  • u013085897
  • u013085897
  • 2017年02月25日 18:21
  • 3013

jquery插件--实现手风琴效果

无标题文档 //手风琴效果 $(function(){ //var option= { header:"h3",}; $("#accor...
  • zhaoxinglei0309
  • zhaoxinglei0309
  • 2012年03月28日 17:35
  • 286

[jQuery插件]图片居中裁切效果

大家在做相册列表的时候可能会遇到这样的情况,用户上传的图片大小不一,长宽不一,然而需求的列表却是固定宽高 转自:http://www.css88.com/archives/4202...
  • songylwq
  • songylwq
  • 2011年12月07日 10:23
  • 640
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件实现模拟dialogs效果实例(图片)
举报原因:
原因补充:

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