jquery學習模擬Dialog效果
<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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章