从零开始学习jQuery (十) jQueryUI常用功能实战

2020-05-23 06:11:38易采站长站整理


另外也可以从Google上引用文件, Google的CDN速度更快也更有保证, 参见: Google’s CDN


本文的实例的所有引用都使用 WebConfig.ResourceServer 这个属性:

public class WebConfig
{
public static string ResourceServer = @”http://www.dotnetapi.com/”;
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 


 


五.弹出层对话框

弹出框是最常用最实用的功能.  先来看一下艺龙网上的一些应用场景.


1. 艺龙网应用场景举例
(1) 静态提示类弹出层. 弹出层的内容是固定的.

image


 


(2) 动态提示类弹出层. 弹出层内容是根据事件源变化的.

image


(3)遮罩类弹出层. 弹出时背景变灰并不可点击.

image


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%20+”/JsLib/jquery/themes/redmond/style.css”%>” />