萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 從零開始學習jQuery (十) jQueryUI常用功能實戰
從零開始學習jQuery (十) jQueryUI常用功能實戰
一.摘要
(1) 靜態提示類彈出層. 彈出層的內容是固定的.
(2) 動態提示類彈出層. 彈出層內容是根據事件源變化的.
(3)遮罩類彈出層. 彈出時背景變灰並不可點擊.
2. 應用實例
使用 jQuery UI 的 Dialog 組件. 我以輕松實現上面三種效果.
Dialog組件的主要特點是可以拖動(Draggable), 可以改變大小(Resizable) .
示例完整代碼如下:
<%@ Page Language="C#" %>
<!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 id="Head1" runat="server">
<title>jQuery UI - 彈出層應用實例 Dialog</title>
<!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->
<link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" />
<script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script>
<script src="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js"
type="text/javascript"></script>
<% if (false)
{%><script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript"></script>
<% }%>
<script type="text/javascript">
/*========== 必須放在頭部加載的語句塊. 盡量避免使用 ==========*/
</script>
<style type="text/css">
</style>
</head>
<body>
<!-- Demo 靜態提示類彈出層 -->
<div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;">
<h3>Demo. 共享同一個靜態彈出層, 彈出層內容固定: </h3>
<div>
<span id="spanShowTip1">顯示提示</span> <span id="spanShowTip2">顯示提示</span>
<span id="spanShowTip3">顯示提示</span> <span id="spanShowTip4">顯示提示</span>
</div>
</div>
<br />
<br />
<!-- Demo 動態提示類彈出層 -->
<div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;">
<h3>Demo. 每個彈出層內容不同, 彈出層內容存儲在事件源的元素屬性中: </h3>
<div>
<span id="spanShowDataTip1" data="顏色是紅色">紅色</span>
<span id="spanShowDataTip2" data="顏色是綠色">綠色</span>
</div>
</div>
<br />
<br />
<!-- Demo 遮罩類彈出層 -->
<div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;">
<h3>Demo. 彈出IFrame </h3>
<div>
<input type="button" id="btnShowIframe" name="btnShowIframe" value="顯示彈出層"/>
</div>
</div>
<!-- 提示類彈出層 -->
<div id="divTip" title="自定義標題">
<p>彈出層</p>
</div>
<!-- 遮罩類彈出層 -->
<div id="divIframe" title="iFrame彈出層" style="text-align:center;">
