jquery ui 插件实例 (3)

原创 2012年03月28日 17:44:18

3、模拟Dialog效果

js效果

<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />

<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>
<script language="javascript" type="text/javascript">
//当窗体加载完毕时候 触发该匿名函数
//$(document) //dom对象转化为jquery对象
//.ready(function(){})
$(function(){
$("#dialog").dialog({
	autoOpen:false,       //设置对话框打开的方式  不是自动打开
	show:"blind",			//打开时动画效果
	hide:"explode",			//关闭时的动画效果
	modal:true,				//遮罩效果
/*	buttons:{				
	"确定":function(){
		$(this).dialog("close"); //关闭对话框
		},
	"取消":function(){
		alert("取消的操作");
		}
	},	*/		
	buttons:[
	{text:"ok",
		click:function(){
			$(this).dialog("close");
			}
		},
	{text:"取消",
		click:function(){
			$(this).dialog("close");
			}
		
		}	
	
	
	],		
	//draggable:false, //是否可以拖动的效果 
	closeOnEscape:false,//是否采用esc键退出对话框 
	title:"添加用户 操作界面",
	position:"top", //对话框弹出位置 可以使top left right center bottom 默认值是center
	width:200,
	hight:200,
	resizable:false, //是否可以改变的操作 false 则不可以改变尺寸
	zIndex:6,
	//drag:function(event,ui){
	//	$("#dialog").html(111)//可以测试出拖拽效果
	//	}

		

})
//触发连接的事件 当你点击连接 打开一个对话框
$("#dialog_link").click(function(){
	$("#dialog").dialog("open");
	
	});
		//怎样获取 option中的参数值
var modalValue=$("#dialog").dialog("option","model");
//alert(modalValue)
//怎样设置  option中的参数值
$("#dialog").dialog("option","model",false);
	})
	
	
</script>

 

html格式

<body>
<h1>模拟Dialog效果</h1>
<!--c创建一个链接-->

<a href="#" id="dialog_link" class="ui-state-default ui-corner-all" ><span class=""></span>Open Dialog</a>
</div>
<!-- div 对话框 $("#dialog").dialog; 他就成为一个对话框 在页面中就会隐藏 -->
<div id="dialog" title="h1!">
hello!
</div>


 

实际效果图例:

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

相关文章推荐

jquery ui 插件实例 (4)

4、模 拟提 交 表 单 效 果 js效果 $(function(){ //--------------------------------------------...

jquery ui 插件实例 (1)

1、模拟accordion效果  js效果 $(function(){ //var option={header:"h3"}; $("#accordion").acco...

jquery ui 插件实例 (2)

2、模拟tabs效果 js效果 //当窗体加载完毕时候 触发该匿名函数 //$(document) //dom对象转化为jquery对象 //.ready(functio...

jquery UI插件

  • 2013-08-06 14:11
  • 2.23MB
  • 下载

jquery UI学习笔记-知问前端之Cookie插件和Ajax登陆

第一部分 : Cookie插件 学习要点: 1.使用 cookie 插件 2.注册直接登录 dierbuf

jquery ui 插件大全

  • 2010-07-15 16:36
  • 1.01MB
  • 下载

jQuery UI插件

  • 2012-08-01 16:35
  • 1.10MB
  • 下载

jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)(10级学员 林常禹总结)

jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)     使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚...

JQuery UI插件

  • 2014-09-12 13:33
  • 10.31MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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