jquery外掛之彈出對話方塊效果
1、在學習jquery外掛之前首先我們來看一下該怎樣開始佈置工作
jquery ui使用前提：
第一步：引入類庫檔案包括：
js類庫 js庫引入要有順序首先第一個引入的是jquery核心檔案（jquery-1.7.1.min.js），然後在引入jquery-ui核心檔案（jquery-ui-1.8.18.custom.min.js）
css樣式類庫 jquery-ui-1.8.18.custom.css
第二步：模擬實現
彈出對話方塊效果實現：
<!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>jquery-ui-彈出對話方塊效果</title>
<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>
<!--引入jquery類庫檔案 必須要有順序-->
<script type="text/javascript" language="javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
<!--css-->
<link type="text/css" rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
$(function (){
$("#dialog").dialog({
//這隻自動開啟視窗
autoOpen:false,
//視窗寬度
width:400,
//視窗高度
width:300,
//開啟視窗時的效果
show:"explode",
//關閉視窗時的效果
hide:"explode",
//是否顯示遮罩效果
modal:true, //預設是不顯示的
//開啟視窗的位置
position:"center", //預設為中間 left center right
//設定視窗的標題
title:"fdsafds",
//是否可以拖拽
draggable:true, //對話方塊是否可以拖動，預設可以拖動
//是否可以改變視窗的大小
resizable:false,
//處於層數 預設1000層
zIndex:12,
//是否採用ESC鍵退出對話方塊，default 可以使用
closeOnEscape:false,
//當拖拽時執行的函式
drag:function (){
$("#dialog").html("你要把我拽到哪裡去？我還想睡覺呢。");
},
//設定按鈕
buttons:[
{
text:"確定",
click:function (){
alert($(this).text()); //這裡的this指的是id為dialog的這個div
},
},
{
text:"取消",
mouseover:function (){
alert("再見我要走了啊！");
$("#dialog").dialog("close");
}
}]
});
//獲取引數值
alert("要彈出一個寬度為"+$("#dialog").dialog("option","width")+"的視窗");
//設定引數值
$("#dialog").dialog("option","modal",false);
//引數1： 固定值
//引數2： 引數名
//引數3： 引數值
//為#dialog_link新增一個click事件，來開啟一個視窗，該視窗的註冊在上面
$("#dialog_link").click(function (){
$("#dialog").dialog("open");
});
});
</script>
</head>
<body>
<h1>模擬dialog效果</h1>
<!--建立一個連線-->
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>開啟一個新的視窗</a>
<!--div對話方塊 $("#dialog").dialog("open"); 他就成了一個對話方塊，同時會自動隱藏-->
<div id="dialog" title="hi">
hello
</div>
</body>
</html>