<!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="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../include/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" href="../../include/css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script>
//当窗体加载完毕的时候,触发匿名函数
//$(document) 把dom对象转换成jQuery对象
//$(document).ready(function (){});
$(function (){
//注册对话框
$("#dialog").dialog({
//设置对话框打开的方式 不是自动打开
autoOpen:false,
show:"blind",
hide:"explode",
modal:true,
/*buttons:{ //添加按钮操作
"确定":function (){
//alert("提交");
$(this).dialog("close");
},
"取消":function (){
alert("取消");
}
},*/
buttons:[
{
text:"OK",
click:function (){
$(this).dialog("close");
}
},{
text:"calcel",
}
],
//draggable:false, //是否可以拖动的效果 默认true
closeOnEscape:false, //是否esc
title:"添加用户操作界面", //对话框标题
position:"top",//对话框弹出的位置 top left right center bottom 默认是center
width:300, //对话框宽度
height:200, //对话框高度
resizable:false, //是否可以改变大小操作 默认true
//zIndex:6,
drag:function(event,ui){
//alert("你拖拽,我执行");
$("#dialog").html("我了歌曲");
}
});
//触发连接的事件 当点击连接打开一个对话
$("#dialog_link").click(function (){
//open参数 作用:打开对话框
$("#dialog").dialog("open");
});
//获取设置的options中的参数值
var modalValue=$("#dialog").dialog("option","modal");
//alert(modalValue);
//设置options中的参数值
$("#dialog").dialog("option","modal",false);
});
</script>
</head>
<body>
<h1>模拟tabs效果</h1>
<!--创建一个连接-->
<a href="#" class="ui-state-default ui-corner-all" id="dialog_link"><span class="ui-icon ui-icon-newwin"></span>Open dialog</a>
<!--div对话框 $("#dialog").dialog();它就成了一个对话框 在页面中就会隐藏-->
<div id="dialog" title="hi">
hello!
</div>
</body>
</html>