五、 ASP.NET 中的视觉效果

本章探讨了可以应用于 ASP 的各种视觉效果和动画.NET 控件使用 jQuery。 本章将介绍以下食谱:

  • 动画菜单控件
  • 动画标签控件来创建一个数字时钟
  • 动画 AdRotator 控件的 alt 文本
  • 在 TreeView 控件中动画图像
  • 在 Panel 控件中创建滚动文本
  • 使用 Panel 控件创建垂直手风琴菜单
  • 显示/隐藏带有爆炸效果的 GridView 控件

简介

jQuery 简化了在网页上添加吸引人的视觉效果。 该库提供了许多支持方法，用于显示、隐藏、淡出、滑动、切换和其他自定义动画。 让我们简单地看一下这些方法:

  • Showing and hiding elements:

    |

    jQuery method

    |

    description

    | | --- | --- | | .show() | This will display matched elements | | .hide() | This will hide matching elements | | .toggle() | Show or hide matched elements |

  • Fading elements:

    |

    jQuery method

    |

    description

    | | --- | --- | | .fadeIn() | This animates matched elements by gradually increasing their opacity until their value is 1, that is, They become opaque. | | .fadeOut() | This gives animation effect by gradually reducing the opacity of matching elements. Until they reach the value of zero, that is, they become transparent. | | .fadeTo() | This will animate the opacity of the matching element to the specified value. | | .fadeToggle() | This activates the opacity of matched elements to hide or show them. |

  • Sliding elements:

    |

    jQuery method

    |

    Description

    | | --- | --- | | .slideUp() | This hides elements by sliding up. | | .slideDown() | This will display the element with the download slide motion. | | .slideToggle() | This will hide or display matched elements by sliding motion. |

  • Custom effects:

    jQuery method

    |

    Description
    .animate()

前面所有的支持方法都允许您以毫秒为单位指定动画的持续时间。 所有动画的默认持续时间为 400 毫秒。jQuery 还提供了关键字，例如慢(600 毫秒)和快(200 毫秒)来指定持续时间。 与较小的值相比，持续时间较大的值表示较慢的动画。

  • Stopping animations:

    |

    jQuery method

    |

    Description

    | | --- | --- | | .stop() | This will stop all animations that are running. | | .finish() | This will stop the running animation, delete the queued animation, And complete the animation on the matching element |

动画菜单控件

ASP.NETMenu控件可以在网站上快速创建菜单。 这个食谱演示了如何添加文本动画，例如闪烁效果和改变mouseover菜单项的字体颜色。 本例中使用的结构总结如下表:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $(".class") | jQuery 选择器 | 它匹配指定 CSS 类的所有元素。 | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | .css() | jQuery 方法 | 这将获取第一个匹配元素的 style 属性，或者设置每个匹配元素的 style 属性。 | | .fadeIn() | jQuery 方法 | 这将通过逐渐增加匹配元素的不透明度来赋予其动画效果，直到它的值为 1，也就是说，它变得不透明。 | | .fadeOut() | jQuery 方法 | 这通过逐渐减少匹配元素的不透明度来赋予其动画效果，直到它的值为 0，也就是说，它变得透明。 | | mouseout | jQuery 的事件 | 当鼠标指针离开控件时触发此操作。 它对应于 JavaScript 的mouseout事件。 | | mouseover | jQuery 的事件 | 当鼠标指针进入控件时触发。 它对应于 JavaScript 的mouseover事件。 | | .on() | jQuery 事件绑定 | 这将一个或多个事件的事件处理程序附加到匹配的元素。 |

准备

按照以下步骤创建一个将应用动画效果的菜单:

  1. Let's create a web page with a horizontal menu, as shown in the following screenshot. By moving the mouse pointer on any main menu item, the font color changes and the text blinks once.

    Getting ready

    同样，通过将鼠标指针移动到任意子菜单项上，字体颜色改变，文本闪烁:

    Getting ready

    将鼠标指针移出主菜单或子菜单项，即可恢复原来的字体颜色。

  2. 要建立这个网页，创建一个新的ASP.NET Web 应用项目在 Visual Studio 中使用空模板，并将其命名为Recipe1(或任何其他合适的名称)。

  3. 将 jQuery 库添加到Scripts文件夹。
  4. 创建一个新的 web 表单，并在表单中包含 jQuery 库。
  5. 进入工具箱|导航，在窗体上拖放一个Menu控件。

  6. In the Properties window of the Menu control, set the Layout | Orientation property to Horizontal, as shown here:

    Getting ready

  7. In the Design mode, move the mouse pointer on the Menu control until a small arrow icon appears on the top-right corner of the control. Click on the arrow to open the Menu Tasks window, as shown here:

    Getting ready

  8. Click on the Edit Menu Items link in the preceding Menu Tasks window to open the Menu Item Editor window. Create the root and child menu items, as shown in the following screenshot. You will need to update the ImageUrl, Text, and Value properties of the main menu (root) items, for example, Home, User Accounts, Reports, and Settings. For the submenu items, you will need to update just the Text and Value properties:

    Getting ready

  9. 在Solution Explorer选项卡中右键单击项目，并导航到Add|New folder，将一个images文件夹添加到项目中。 包括主菜单项的图标。

  10. 表单的最终标记如下:

    <div id="container"> <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"> <Items> <asp:MenuItem Text="Home" Value="Home" ImageUrl="~/images/home.png"></asp:MenuItem> <asp:MenuItem Text="User Accounts" Value="User Accounts" ImageUrl="~/images/accounts.png"> <asp:MenuItem Text="Create Account" Value="Create Account"></asp:MenuItem> <asp:MenuItem Text="Edit / View Accounts" Value="Edit / View Accounts"></asp:MenuItem> <asp:MenuItem Text="Monitor Account" Value="Monitor Account"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem Text="Reports" Value="Reports" ImageUrl="~/images/reports.png"> <asp:MenuItem Text="Account Usage" Value="Account Usage"></asp:MenuItem> <asp:MenuItem Text="Activity Log" Value="Activity Log"></asp:MenuItem> <asp:MenuItem Text="Account Specific" Value="Account Specific"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem Text="Settings" Value="Settings" ImageUrl="~/images/settings.png"> <asp:MenuItem Text="Update Profile" Value="Update Profile"></asp:MenuItem> <asp:MenuItem Text="Change Password" Value="Change Password"></asp:MenuItem> </asp:MenuItem> </Items> <StaticMenuItemStyle HorizontalPadding="35px" /> </asp:Menu> </div>

  11. Note that in the preceding markup, the Menu control is included in a div container. Apply the following style to this div container:

    ```

    container {

    background-color:lightgray; width:100%; } ```

    这将为整个Menu控件提供背景色，并保持其宽度为页面宽度的 100%。

  12. 在运行时，Menu控件为主菜单项呈现level1CSS 类，为子菜单项呈现level2CSS 类。 因此，对这些项目应用以下样式:

    ```

    Menu1 .level1{

    padding:5px; font-variant:small-caps; color:black; font-size:20px; font-weight:700; font-family:'Times New Roman', Times, serif; }

    Menu1 .level2{

    background-color:aquamarine; color:green; padding:5px; } ```

  13. 要在主菜单项中的图像和文本之间创建间距，请向页面添加以下样式:

    ```

    Menu1 img{

    padding-right:5px; } ```

怎么做……

将下面的 jQuery 代码添加到页面的script块中:

<script type="text/javascript">
  $(document).ready(function() {
    $(".level1 a, .level2 a").on("mouseover", function() {
      $(this).css("color", "red");
      $(this).fadeOut("fast").fadeIn("fast");
    });
    $(".level1 a").on("mouseout", function() {
      $(this).css("color", "black");
    });
    $(".level2 a").on("mouseout", function() {
      $(this).css("color", "green");
    });
  });
</script>

How it works…

菜单动画的工作方式如下:

  1. 用Ctrl+S保存页面，然后用F5运行。 这将在网页上启动菜单。

  2. When you move the mouse over any main menu or submenu item, the following corresponding event handler will be executed:

    $(".level1 a, .level2 a").on("mouseover", function () {…});

    前面的选择器将mouseover事件的事件处理程序附加到level1和level2超链接上。

  3. In the preceding event handler, firstly, the font color is changed to red by updating the css property as follows:

    $(this).css("color", "red");

    其次，通过完全淡出来添加一个闪烁的效果，使其隐藏，然后，通过淡入来逐渐使控件可见，如下所示:

    $(this).fadeOut("fast").fadeIn("fast");

    因此，淡出和淡入效果被串联起来给文本一个闪烁的效果。 fadeOut()和fadeIn()方法的调用持续时间为fast，为 200 ms。

  4. 当鼠标指针移出主菜单或子菜单项时，将执行相应的mouseout事件处理程序。 该事件处理程序将恢复字体颜色为原始值，如下所示:

参见 also

使用面板控件创建垂直手风琴菜单

动画 Label 控件来创建数字时钟

这个配方使用自定义动画效果来创建一个闪烁的数字时钟，以 hh:mm:ss 格式显示当前时间。 本例中使用的结构总结如下表:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将使用其 ID 选择一个元素。 | | .animate() | jQuery 方法 | 这将对指定的 CSS 属性执行自定义动画。 | | Date | JavaScript 对象 | 这是一个存储日期/时间信息的对象:年、月、日、小时、分钟和秒。 | | Date.getHours() | JavaScript 函数 | 它返回从 0 到 23 的小时数。 | | Date.getMinutes() | JavaScript 函数 | 它返回从 0 到 59 的分钟数。 | | Date.getSeconds() | JavaScript 函数 | 它返回从 0 到 59 的秒数。 | | opacity | CSS 属性 | 这是元素的透明度程度。 | | setInterval(function, delay) | JavaScript 函数 | 此在指定的延迟之后重复执行一个函数(以毫秒为单位)。 | | .slice() | JavaScript 函数 | 它提取字符串的一部分。 作为参数传递给函数的负数从字符串末尾提取所需的字符数。 | | .text() | jQuery 方法 | 这将返回每个匹配元素的组合文本内容，或者设置每个匹配元素的文本内容。 |

准备

使用 jQuery 制作一个数字时钟。

  1. Let's build the digital clock by animating a Label control. The control will display the current time in the hh:mm:ss format at any point of time. Once every second, the Label control will be cleared and the new time will be displayed, giving the clock a blink effect.

    Getting ready

  2. 首先，添加一个新的ASP.NET Web 应用项目在 Visual Studio 中使用空模板，并将其命名为Recipe2(或任何其他合适的名称)。

  3. 在项目中添加一个Scripts文件夹，并将 jQuery 库文件添加到该文件夹中。
  4. 向项目中添加一个新的 web 表单。 在 Web 表单中包含 jQuery 库。
  5. 在Panel控件中添加Label控件，如下所示:
  6. 将下面的 CSS 样式添加到包含的Panel控件中:

怎么做……

在页面的script块中包含以下 jQuery 代码:

<script type="text/javascript">
  $(document).ready(function() {
    setInterval(animateLabel, 1000);
    function animateLabel() {
      var time = getCurrentTime();
      $("#<%=lblTime.ClientID%>").text(time);
      $("#<%=lblTime.ClientID%>").animate({
        opacity: 0
      }, 950).animate({
        opacity: 1
      }, 50);
    }
    function getCurrentTime() {
      var dt = new Date();
      var dtHour = dt.getHours(); // returns a number from 0 to 23
      var dtMinutes = ("0" + dt.getMinutes()).slice(-2);
      var dtSeconds = ("0" + dt.getSeconds()).slice(-2);
      var strAmPm = "";
      if (dtHour >= 12)
        strAmPm = "PM";
      else
        strAmPm = "AM";
      if (dtHour > 12)
        dtHour -= 12;
      var time = dtHour + ":" + dtMinutes + ":" + dtSeconds + " " + strAmPm;
      return time;
    }
  });
</script>

How it works…

数字时钟的工作原理如下:

  1. 保存并运行该页面。 文档就绪后，setIntervalJavaScript 函数每1000毫秒调用animateLabel方法，即每秒钟调用一次:

    setInterval(animateLabel, 1000);

  2. animateLabel方法使用getCurrentTime方法获取当前时间，稍后我们将看到:

    var time = getCurrentTime();

  3. 接下来，将Label控件的文本设置为上一步中检索到的时间:

    $("#<%=lblTime.ClientID%>").text(time);

  4. The opacity of the Label control is animated to reach 0 in 950 ms so that Label is completely invisible at the end of the animation. The next animation is chained at the end of this animation, and the opacity of the Label control is increased to 1 in 50 ms so that the Label control is completely opaque after a blink effect:

    $("#<%=lblTime.ClientID%>").animate({ opacity: 0 }, 950).animate({ opacity: 1 }, 50);

    因此，1000ms 的间隔被分为两部分，950 ms 和 50ms。

    注意事项

    元素的不透明度是指该元素的透明程度。 不透明度可以取 0 到 1 的任意值。

    当不透明度为 1 时，该元素是不透明的。

    当不透明度为 0 时，元素是透明的，也就是不可见的。

    当透明度为> 0 和< 1 时，它是半透明的，也就是说，它的背景是可见的。

  5. Next, let's take a look at the getCurrentTime method that returns the current time in the hh:mm:ss format. This method first creates a Date object:

    var dt = new Date();

    接下来，从 date 对象获取小时值，从 0 到 23 的整数值:

    var dtHour = dt.getHours();

    从 date 对象获取时间。 分钟可以是单个数字，所以在前面填充一个零，然后使用slice提取最后两个字符，如下所示:

    var dtMinutes = ("0" + dt.getMinutes()).slice(-2);

    从 date 对象获取秒数。 秒也可以是单个数字，所以在前面填充一个 0，然后使用slice提取最后两个字符，如下所示:

    var dtSeconds = ("0" + dt.getSeconds()).slice(-2);

  6. Let a strAmPm variable store AM or PM as required. Initialize this variable to an empty string:

    var strAmPm = "";

    如果小时数大于或等于12，则设置strAMPM为PM，否则设置为AM:

    if (dtHour >= 12) strAmPm = "PM"; else strAmPm = "AM";

  7. Also, display the hours from 0 to 12 instead of 0 to 23 as follows:

    if (dtHour > 12) dtHour -= 12;

    现在，使用前面计算的值构建格式化为小时:分钟:秒的字符串。 返回time字符串

    var time = dtHour + ":" + dtMinutes + ":" + dtSeconds + " " + strAmPm; return time;

参见 also

在 Panel 控件中创建滚动文本配方

动画 AdRotator 控件的 alt 文本

控件用于在网页上显示广告横幅。 每当页面被刷新时，控件加载一个新的横幅。 在本演示中，让我们增强AdRotator控件，以使用滑动动画显示广告横幅的 alt 文本。 本例中使用的构造如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将使用其 ID 选择一个元素 | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素 | | .addClass() | jQuery 方法 | 这会将指定的 CSS 类添加到每个匹配的元素中 | | .animate() | jQuery 方法 | 这将对指定的 CSS 属性执行自定义动画 | | .css() | jQuery 方法 | 这将获取第一个匹配元素的 CSS 属性，或者为每个匹配元素设置一个或多个 CSS 属性 | | event.pageX | jQuery 事件属性 | 这将返回相对于文档左边缘的鼠标位置 | | event.pageY | jQuery 事件属性 | 这将返回相对于文档顶部边缘的鼠标位置 | | .hide() | jQuery 方法 | 这将隐藏匹配的元素 | | .hover() | jQuery 事件绑定 | 这绑定了mouseover和mouseout事件的事件处理程序 | | left | CSS 属性 | 这个是元素左边缘的位置 | | opacity | CSS 属性 | 这是元素的透明度程度 | | .prop(propertyName)或.prop(propertyName, value) | jQuery 方法 | 这将为第一个匹配的元素返回指定属性的值，或者为所有匹配的元素设置指定属性的值 | | .slideDown() | jQuery 方法 | 这将显示带有下载幻灯片运动的元素 | | .text() | jQuery 方法 | 这将返回每个匹配元素的组合文本内容，或者设置每个匹配元素的文本内容 | | top | CSS 属性 | 这是元素的上边缘的位置 |

准备

遵循这些步骤构建一个网页与 AdRotator:

  1. We will create a web page with an AdRotator control that displays ad banners from an advertisement XML file. The alt text for each banner is also saved in the XML file. At runtime, when the mouse pointer is moved on the banner, its opacity reduces, and the alt text is displayed in a sliding panel, as shown in the following screenshot:

    Getting ready

    当页面被刷新时，控件从 XML 文件中加载另一个广告横幅。 同样的效果可以在更新的横幅上看到，如下所示:

    Getting ready

  2. 首先，创建一个新的ASP.NET Web 应用在 Visual Studio 中使用空模板，并将其命名为Recipe3(或其他合适的名称)。

  3. 将 jQuery 库文件包含在项目的Scripts文件夹中。
  4. 添加一个新的 web 表单到项目中，并在表单中包含 jQuery 库。
  5. 转到工具箱|Standard，然后在窗体上拖放一个AdRotator控件。 另外，在AdRotator控件下面的窗体中添加一个Panel控件。 这个面板将用于在广告横幅上显示 alt 文本。
  6. 在解决方案资源管理器选项卡中，右键单击项目，然后转到添加|添加 ASP.NET 文件夹，选择App_Data文件夹。 这会将App_Data文件夹添加到项目中，如果该文件夹不存在的话。
  7. 右键单击App_Data文件夹，选择添加|XML 文件。 在对话框中，按AdsFile.xml键。 这个 XML 文件将用于存储将要在AdRotator控件中显示的广告数据。

  8. Add the following content to the XML file. Note that the root node is Advertisements and the details of each ad are saved in the Ad node:

    <Advertisements> <Ad> <ImageUrl>~/images/packtlib-logo-dark.png</ImageUrl> <height>56</height> <width>115</width> <NavigateUrl>https://www.packtpub.com/packtlib</NavigateUrl> <AlternateText>Access books and videos from Packt Library.</AlternateText> <Impressions>80</Impressions> <Keyword>Packt</Keyword> </Ad> <Ad> <ImageUrl>~/images/learning_jquery.jpg</ImageUrl> <height>92</height> <width>115</width> <NavigateUrl>https://www.packtpub.com/web-development/learning-jquery-fourth- edition</NavigateUrl> <AlternateText>Learning jQuery, Fourth Edition.</AlternateText> <Impressions>80</Impressions> <Keyword>Packt</Keyword> </Ad> </Advertisements>

    Ad节点中的每个子节点都提供了独特的功能，概述如下:

    |

    节点

    |

    描述

    | | --- | --- | | ImageUrl | 这是要显示的图像的 URL。 | | Height | 这是图像的高度，以像素为单位。 | | Width | 这是图像的宽度，以像素为单位。 | | NavigateUrl | 这是当您点击广告横幅时要加载的页面的 URL。 | | AlternateText | 这是图像不可用时显示的文本。 | | Impressions | 这是表示为数字的图像被显示的可能性。 | | Keyword | 这是图像的类别。 此字段可用于过滤特定的广告。 |

  9. 将AdRotator控件的AdvertisementFile属性设置为上述文件。 因此，表单的标记如下:

    <asp:AdRotator ID="AdRotator1" AdvertisementFile="~/App_Data/AdsFile.xml" runat="server" /> <asp:Panel ID="pnlDescription" runat="server"></asp:Panel>

  10. 将以下 CSS 类添加到页面的head元素中。 当我们显示标题的 alt 文本时，此样式将应用于Panel控件:

    <style type="text/css"> .altTextStyle { background-color:lightblue; border-color:blue; border-style:solid; border-width:1px; position:absolute; color:indigo; padding:5px; } </style>

  11. 向项目中添加一个新的images文件夹，并将所需的广告横幅添加到该文件夹中。

怎么做……

在页面的script块中包含以下 jQuery 代码:

<script type="text/javascript">
  $(document).ready(onReady);
  function onReady() {
    $("#<%=pnlDescription.ClientID%>").addClass("altTextStyle").hide();
    $("#<%=AdRotator1.ClientID%>").hover(
      function(evt) {
        var altText = $("#<%=AdRotator1.ClientID%> img").prop("alt");
        $("#<%=pnlDescription.ClientID%>").text(altText).css("left", evt.pageX).css("top", evt.pageY);
        $("#<%=pnlDescription.ClientID%>").slideDown("slow");
        $("#<%=AdRotator1.ClientID%> img").animate({
          opacity: 0.5
        }, "slow");
      },
      function() {
        $("#<%=pnlDescription.ClientID%>").hide();
        $("#<%=AdRotator1.ClientID%> img").animate({
          opacity: 1
        }, "slow");
      });
  }
</script>

How it works…

AdRotator 的工作原理如下:

  1. 当页面在浏览器中启动时，文档就绪时调用onReady函数:

    $(document).ready(onReady);

  2. 在onReady函数中，将altTextStyleCSS 类添加到Panel控件中，然后隐藏该控件:

    $("#<%=pnlDescription.ClientID%>").addClass("altTextStyle").hide();

  3. The hover event binder is used to attach event handlers for the mouseover and mouseout events as follows:

    $("#<%=AdRotator1.ClientID%>").hover(function(){...}, function(){...});

    在这里，第一个函数是mouseover事件的处理程序，而第二个函数是mouseout事件的处理程序。

  4. At runtime, the AdRotator control is rendered as an <img> element enclosed within an <a> element, as shown in the following figure. To view the HTML source of the page, right-click on the browser window, and select View Source:

    How it works…

    因此，mouseover的事件处理程序可以从渲染的图像中检索横幅的 alt 文本属性，如下所示:

    var altText = $("#<%=AdRotator1.ClientID%> img").prop("alt");

  5. The text of the Panel control is set to the preceding text. The location of the mouse is retrieved using the event.pageX and event.pageY properties. The left and top locations of the Panel control can now be set to these coordinates so that the Panel hovers over the mouse pointer:

    $("#<%=pnlDescription.ClientID%>").text(altText).css("left", evt.pageX).css("top", evt.pageY);

    现在已经初始化了Panel控件的文本和位置，它将使用slideDown函数以slow为持续时间进行动画:

    $("#<%=pnlDescription.ClientID%>").slideDown("slow");

    广告横幅也被动画化，以slow的速度降低其不透明度为 50%:

    $("#<%=AdRotator1.ClientID%> img").animate({ opacity: 0.5 }, "slow");

  6. The mouseout event handler accomplishes two tasks. Firstly, the alt text Panel is hidden from the view as follows:

    $("#<%=pnlDescription.ClientID%>").hide();

    其次，通过缓慢地将不透明度增加到 1 来恢复横幅的完全可见性:

    $("#<%=AdRotator1.ClientID%> img").animate({ opacity: 1 }, "slow");

还有更多的…

控件仅在刷新页面时显示新的广告条。 为了定期刷新AdRotator控件，我们可以将该控件放在UpdatePanel控件中，并使用 AJAX 来刷新它。 可以这样做:

  1. 通过导航到工具箱|AJAX Extensions，拖动并放下ScriptManager控件和UpdatePanel控件。
  2. 为了定期刷新广告横幅，我们还需要一个Timer控制。 因此，通过导航到工具箱|AJAX Extensions来拖放Timer控件。

  3. In the Properties window, as shown in the following screenshot, set the Interval property of the timer to 5000 ms. This will cause the Timer control to tick every 5 seconds:

    There's more…

  4. Now, open the Properties window of the UpdatePanel control, and expand the Triggers property, as shown here:

    There's more…

    在UpdatePanelTrigger 集合编辑器窗口这是启动,点击添加AsyncPostBack【显示】按钮来添加一个触发器,并设置ControlID房地产Timer1和EventName【病人】Tick,如下面屏幕截图所示。 点击OK关闭窗口:****

    There's more…

  5. 将AdRotator和Panel控件置于UpdatePanel控件的ContentTemplate控件中。

  6. After every AJAX refresh of the UpdatePanel control, the client script code is rewritten, and the jQuery code that we wrote to animate the alt text is lost. Hence, we need to rewrite our jQuery code on the page using the System.Application.add_load method as follows:

    <script type="text/javascript"> Sys.Application.add_load(onReady); </script>

    前面的脚本也包含在UpdatePanel控件的ContentTemplate控件中。

  7. 因此，表单标记将变为以下代码:

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <asp:Timer ID="Timer1" runat="server" Interval="5000"></asp:Timer> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> </Triggers> <ContentTemplate> <script type="text/javascript"> Sys.Application.add_load(onReady); </script> <asp:AdRotator ID="AdRotator1" AdvertisementFile="~/App_Data/AdsFile.xml" runat="server" /> <asp:Panel ID="pnlDescription" runat="server"></asp:Panel> </ContentTemplate> </asp:UpdatePanel>

参见 also

树视图控件配方中的动画图像

在 TreeView 控件中动画图像

一个TreeView控件使您能够以分层格式显示数据。 让我们应用动画来放大和缩小TreeView控件的节点中的图像。 我们还将看一看使用 jQuery UI 库的简化机制。 本例中使用的构造如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将使用其 ID 选择一个元素。 | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | .animate() | jQuery 方法 | 这将对指定的 CSS 属性执行自定义动画。 | | [attr$="value"] | jQuery 选择器 | 这将选择一个以value字符串结尾的指定属性的元素。 | | .find() | jQuery 方法 | 这将查找与筛选器匹配的所有元素。 | | height | CSS 属性 | 这是元素的高度。 | | mouseout | jQuery 的事件 | 当鼠标指针离开控件时触发此操作。 它对应于 JavaScript 的mouseout事件。 | | mouseover | jQuery 的事件 | 当鼠标指针进入控件时触发。 它对应于 JavaScript 的mouseover事件。 | | .on() | jQuery 事件绑定 | 这将一个或多个事件的事件处理程序附加到匹配的元素。 | | .stop() | jQuery 方法 | 这会停止所有正在运行的动画。 | | width | CSS 属性 | 这是元素的宽度。 |

准备

按照的步骤在网页上设置一个 TreeView 控件:

  1. Let's create a web page to display the list of employees (with their profile photos) in various departments of a company in a tree structure, as shown in the following screenshot:

    Getting ready

    要放大某个员工的个人资料照片，只需要将鼠标指针移动到照片上，如下图所示:

    Getting ready

    通过将鼠标指针移出照片，它会缩小到原来的缩略图大小。

  2. 让我们通过创建ASP 来开始.NET Web 应用项目在 Visual Studio 中使用空的模板并将其命名为Recipe4(或其他合适的名称)。

  3. 向项目中添加一个Scripts文件夹，并将 jQuery 库文件添加到此文件夹中。
  4. 添加一个新的 web 表单到项目中，并在表单中包含 jQuery 库。
  5. 通过导航到工具箱|Navigation，在窗体上拖放TreeView控件。

  6. In the Design mode, move the mouse pointer over the TreeView control until a small arrow icon appears in the top-right corner. Click on this arrow to open the TreeView Tasks menu, as shown in the following figure:

    Getting ready

    从TreeView Tasks菜单中，选择Show Lines复选框来显示节点连接。 接下来，点击Edit Nodes链接，打开TreeView Node Editor对话框。 将父节点和子节点添加到控件中，如下面的屏幕截图所示的。 对于显示部门的节点，更新Text和Value属性。 对于显示 employee 的节点，更新Text、Value和ImageUrl属性。 员工的头像照片将从ImageUrl属性中显示。 添加节点后，点击OK按钮:

    Getting ready

  7. 这将为TreeView控件生成以下标记:

  8. 添加一个images文件夹到项目中，添加所需的个人资料照片到文件夹中。

怎么做……

在页面的script块中包含以下 jQuery 代码:

<script type="text/javascript">
$(document).ready(function () {
  $("#<%=TreeView1.ClientID%> a").on({
    mouseover: function () {
      $(this).find("img[src$='png']").animate({ width: "64px", height: "64px" }, "slow", "linear");
    },
    mouseout: function () {
      $(this).find("img[src$='png']").stop().animate({ width: "24px", height: "24px" }, "slow", "linear");
    }
  });
});
</script>

How it works…

树视图控件上的动画的工作原理如下:

  1. 在运行时，TreeView控件为树的每个节点生成<a>元素。 为了放大员工的图片，我们将mouseover和mouseout事件的事件处理程序附加到TreeView控件内的<a>元素上，如下所示:

  2. 在mouseover的事件处理程序中，首先找到以.png扩展结束的图像元素。 这是为了确保展开(+)和折叠(-)图像不会动画。 其次，应用自定义动画将图像的width和height分别增加到 64 像素。 动画时长为slow，缓动为linear:

    $(this).find("img[src$='png']").animate({ width: "64px", height: "64px" }, "slow", "linear");

  3. In the event handler for mouseout, find the image element that ends with the .png extension. Then, stop any existing animations using the stop method, and apply a custom animation to reduce the width and height to the original dimensions, that is, 24 px each. The duration of the animation is slow and the easing is linear:

    $(this).find("img[src$='png']").stop().animate({ width: "24px", height: "24px" }, "slow", "linear");

    注意事项

    也可以用swing代替linear。 只需将mouseover和mouseout事件处理程序中的linear更新为swing。

还有更多的…

缓动是在动画过程中控制不同点的动画速度的一种机制。 jQuery 提供了两个内置的简化方法:linear和swing。 要添加高级效果，可以使用 jQuery UI 库。 jQuery UI 是一个 JavaScript 库，它提供了许多在网站上即插即用的实用程序。 它提供了小部件，比如选项卡、手风琴、进度条、滑动条等等，以及视觉效果，比如弹跳、爆炸、彩色动画等等，还有许多其他功能。

在前面的例子中，让我们通过以下步骤来使用 jQuery UI 的easeOutBounce效果:

  1. 从http://jqueryui.com/download或 NuGet 包管理器中下载 jQuery UI。 要使用 NuGet 包管理器，请执行Tools|NuGet 包管理器|Manage NuGet Packages for Solution。

  2. This will open up the NuGet Package Manager screen. Search for jQuery.UI.Effects.Core, and click on the Install button:

    There's more…

    这将下载jquery.effects.core.js和jquery.effects.core.min.js到Scripts文件夹。

  3. Next, search for jQuery.UI.Effects.Bounce, and click on the Install button:

    There's more…

    这将下载jquery.effects.bounce.js和jquery.effects.bounce.min.js到Scripts文件夹。

  4. 现在，在 web 表单中包含前面两个库的调试版本如下:

  5. In the jQuery code written earlier, update the easing from linear/swing to easeOutBounce, as shown here.

    对于mouseover事件，运行以下代码:

    $(this).find("img[src$='png']").animate({ width: "64px", height: "64px" }, "slow", "easeOutBounce");

    对于mouseout事件，运行以下代码:

    $(this).find("img[src$='png']").stop().animate({ width: "24px", height: "24px" }, "slow", "easeOutBounce");

  6. 保存并运行页面，以查看当鼠标指针移动到头像照片上和移出头像照片时，头像照片上的弹跳效果。

参见 also

动画 AdRotator 控件配方的 alt 文本

在 Panel 控件中创建滚动文本

可以使用 jQuery 实现的有趣的文本动画中的一个是创建滚动文本。 这个动画有许多应用，比如新闻滚动条、股票报价报价器等等。 在本演示中，让我们将这种类型的动画应用于Panel控件中的文本内容。 我们还将演示如何使用.animate()方法的回调函数参数连续循环动画效果。 本例中使用的结构如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将使用其 ID 选择一个元素 | | .animate() | jQuery 方法 | 这将对指定的 CSS 属性执行自定义动画 | | .css() | jQuery 方法 | 这将获取第一个匹配元素的 CSS 属性，或者为每个匹配元素设置一个或多个 CSS 属性 | | left | CSS 属性 | 这是一个元素的左边界相对于其包含元素的左边界的位置 |

准备

按照以下步骤在 Panel 控件中创建滚动文本:

  1. We will create a web page with a Panel control and some text content. The text content will be initially positioned toward the right of the containing panel and will be animated to move toward the left, as shown in the following two screenshots:

    Getting ready

    Getting ready

    文本从视图中取出后，它将再次从右边重新启动。 这个过程将在一个循环中执行。

  2. 让我们通过创建一个新的ASP 开始.NET Web 应用项目在 Visual Studio 中使用空的模板并将其命名为Recipe5(或其他合适的名称)。

  3. 向项目中添加一个Scripts文件夹，并将 jQuery 库文件添加到该文件夹中。
  4. 添加一个新的 web 表单，并在表单中包含 jQuery 库。

  5. 进入工具箱|Standard，将两个嵌套的Panel控件添加到窗体中，如下所示。 注意，滚动文本被放置在内部的Panel控件中:

    <asp:Panel ID="pnlContainer" runat="server"> <asp:Panel ID="pnlScollingText" runat="server"> This is some scrolling text to be displayed. </asp:Panel> </asp:Panel>

  6. Add the following styles to the respective Panel controls:

    ```

    pnlContainer {

    color:white; background-color:black; font-family:'Arial Narrow', Arial, sans-serif; font-size: 20px; font-variant:small-caps; padding:5px; width:500px; height:30px; white-space:nowrap; }

    pnlScollingText{

    position:absolute; left:500px; } ```

    注意，在前面声明的样式中，外部的Panel控件的width是 500px。 因此，内部Panel控件的left位置被初始化为 500px，也就是说，内部Panel控件的左边界位于外部Panel控件左边界的右侧 500px。 换句话说，文本位于外部Panel控件的右边缘。

怎么做……

将下面的 jQuery 代码添加到页面的script块中:

<script type="text/javascript">
$(document).ready(function () {
  loopAnimation();
  function loopAnimation() {
    $("#<%=pnlScollingText.ClientID%>").css("left", "500px");
    $("#<%=pnlScollingText.ClientID%>").animate({ left: "-=850px" }, 7000, "linear", loopAnimation);
  }
});
</script>

How it works…

滚动文本的工作原理如下:

  1. 在浏览器中运行页面时，调用loopAnimation函数:

  2. 在loopAnimation函数中，内部Panel控件的左侧位置被重置为 500px。 这确保文本总是从外部控件Panel的右边界开始滚动:

    $("#<%=pnlScollingText.ClientID%>").css("left", "500px");

  3. The inner Panel control is then animated to reduce its left position gradually to a value equal to (width of the outer Panel control + width of the scrolling text), that is, (500 px + approx. 350 px): approximately 850 px. This value can be found by trial and error:

    $("#<%=pnlScollingText.ClientID%>").animate({ left: "-=850px" }, 7000, "linear", loopAnimation);

    动画的持续时间设置为7000ms:文本从右向左滚动需要 7 秒。 缓动设置为linear。 需要注意的是，loopAnimation函数是作为参数传递给回调函数值的。 这确保动画连续循环，并且函数在每个动画结束时调用自己。

参见 also

动画标签控件来创建数字时钟配方

使用面板控件创建垂直手风琴菜单

这个例子演示了使用Panel控件的滑动动画。 我们将创建一个垂直手风琴菜单，每次只允许一个主菜单项展开。 本例中使用的构造如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将使用其 ID 选择一个元素。 | | $(".class") | jQuery 选择器 | 它匹配指定 CSS 类的所有元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | click | jQuery 的事件 | 当您单击一个元素时，它就会触发。 它对应于 JavaScript 单击事件。 | | event.stopPropagation() | jQuery 方法 | 这可以防止事件在 DOM 树中冒泡。 | | .find() | jQuery 方法 | 这将查找与筛选器匹配的所有元素。 | | .hide() | jQuery 方法 | 这将隐藏匹配的元素。 | | .is() | jQuery 方法 | 如果匹配的元素满足给定条件，则返回一个布尔值。 | | .on() | jQuery 事件绑定 | 这将一个或多个事件的事件处理程序附加到匹配的元素。 | | .slideDown() | jQuery 方法 | 这将显示带有下载幻灯片运动的元素。 | | .slideUp() | jQuery 方法 | 这将以向上滑动的方式隐藏元素。 | | :visible | jQuery 选择器 | 这将选择可见的元素，即宽度或高度为> 0 的元素。 |

准备

按照的步骤创建垂直手风琴菜单:

  1. We will create a web page with the main menu items, as shown in the following screenshot:

    Getting ready

    当你点击任何一个主菜单项时，它会以滑动动画的形式展开显示相应的子菜单项，如下图所示:

    Getting ready

    当您单击任何其他主菜单项时，以前展开的子菜单向上滑动(即折叠)，而新的子菜单向下滑动(即展开)。

  2. 让我们通过创建新的ASP 开始.NET Web 应用项目在 Visual Studio 中使用空模板，并将其命名为Recipe6(或其他合适的名称)。

  3. 在项目中创建一个Scripts文件夹，并将 jQuery 库文件添加到项目中。
  4. 创建一个新的 web 表单，并将 jQuery 库包含在 web 表单中。

  5. 在表单中添加以下标记:

    <table id="tblMenu" class="mainmenu"> <tr> <td> <img src="images/home.png" />Home <asp:Panel runat="server" CssClass="submenu"> <ul> <li>Configure Dashboard</li> <li>Logout</li> </ul> </asp:Panel> </td> </tr> <tr> <td> <img src="images/accounts.png" />User Accounts <asp:Panel runat="server" CssClass="submenu"> <ul> <li>Create Account</li> <li>Edit / View Accounts</li> <li>Monitor Account</li> </ul> </asp:Panel> </td> </tr> <tr> <td> <img src="images/reports.png" />Reports <asp:Panel runat="server" CssClass="submenu"> <ul> <li>Account Usage</li> <li>Activity Log</li> <li>Account Specific</li> </ul> </asp:Panel> </td> </tr> <tr> <td> <img src="images/settings.png" />Settings <asp:Panel runat="server" CssClass="submenu"> <ul> <li>Update Profile</li> <li>Change Password</li> </ul> </asp:Panel> </td> </tr> </table>

  6. 创建一个images文件夹，并将主菜单项所需的映像文件添加到这个文件夹中。

  7. 若要在主菜单项中的图像和文本之间添加间距，请在页面中包含以下样式:

    img{ padding-right:5px; }

  8. 为主菜单项添加以下样式:

    .mainmenu{ cursor:pointer; width:250px; background-color:lightgray; font-variant:small-caps; font-size:20px; font-family:Arial, sans-serif; font-weight:700; padding:0px; }

  9. 为子菜单项添加以下样式:

    .submenu{ color:blue; background-color:lightblue; padding-top:3px; padding-bottom:2px; } .submenu ul{ width:100%; padding-left:3px; list-style-type:none; }

怎么做……

在页面的script块中包含以下 jQuery 代码:

<script type="text/javascript">
$(document).ready(function () {
  $(".submenu").hide();
  $("#tblMenu").on("click", "tr", function () {
    $(".submenu").slideUp("slow");
    var submenuPanel = $(this).find(".submenu");
    if (!$(submenuPanel).is(":visible"))
      $(submenuPanel).slideDown("slow");
  });
  $(".submenu").on("click", "li", function (evt) {
    evt.stopPropagation();
  });
});
</script>

How it works…

垂直手风琴菜单的工作原理如下:

  1. 当页面在浏览器中加载时，所有的子菜单面板使用 CSS 子菜单项选择器隐藏，如下所示:

  2. click事件的事件处理程序附加到包含主菜单项的容器表。 事件的目标元素是表行:

    $("#tblMenu").on("click", "tr", function () {…});

  3. 由于一次只能看到一个子菜单，前面的事件处理程序将使用滑动动画折叠任何可见的子菜单面板:

    $(".submenu").slideUp("slow");

  4. 然后，click事件展开单击其主菜单项的子菜单面板。 要确定需要显示的子菜单面板，使用 CSS 选择器对当前对象:

    var submenuPanel = $(this).find(".submenu");

  5. 如果所需的子菜单面板已经可见，则无需执行任何操作。 但是，如果它是不可见的，我们需要使用滑动动画来显示它:

  6. 子菜单项实际上是列表项。 为了防止子菜单项触发展开/折叠菜单，我们对列表项使用.stopPropagation()方法。 这将防止事件在 DOM 树中冒泡:

    $(".submenu").on("click", "li", function (evt) { evt.stopPropagation(); });

参见 also

动画菜单控件配方

显示/隐藏带有爆炸效果的 GridView 控件

jQuery UI 库提供了许多有趣的效果，可以很容易地应用在 ASP 上。 网网站。 在前面的食谱中，我们已经看到了将bounce应用于图像时的效果。 在这个特定的例子中，我们将使用另一个称为explode的效果，并将其应用于GridView对照。 本例中使用的构造如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将使用其 ID 选择一个元素。 | | event.preventDefault() | jQuery 方法 | 这将防止触发事件的默认动作。 | | explode | jQuery UI 的效果 | 这将在隐藏或显示元素时按指定的块数拆分元素。 | | .hide() | jQuery 方法 | 这将隐藏匹配的元素。 | | .is() | jQuery 方法 | 如果匹配的元素满足给定条件，则返回一个布尔值。 | | pieces | 属性的 jQuery UI 爆炸效果 | 这是要爆炸的碎片数。 其默认值为 9。 | | .show() | jQuery 方法 | 这会显示匹配的元素。 | | .val() | jQuery 方法 | 返回第一个匹配元素的值，或者设置每个匹配元素的值。 | | :visible | jQuery 选择器 | 这将选择可见的元素，即宽度或高度为> 0 的元素。 |

准备

按照以下步骤在窗体上设置一个数据驱动的 GridView 控件:

  1. Let's create a page that consists of a GridView control that displays the Employee data from the Northwind database, as shown in the following screenshot:

    Getting ready

    点击页面顶部的Hide GridView按钮，GridView控件逐渐隐藏，效果如下:

    Getting ready

    动画被应用，直到GridView控件完全隐藏，如下图所示:

    Getting ready

    按钮现在变为显示 GridView。 当您单击该按钮时，GridView控件将使用相同的效果逐渐显示出来。

  2. 要开始，创建一个新的ASP.NET Web 应用项目在 Visual Studio 中使用空模板，并将其命名为Recipe7(或其他合适的名称)。

  3. 在项目中创建一个Scripts文件夹，并将 jQuery 库文件添加到该文件夹中。
  4. 添加一个新的 web 表单到项目中，并在表单中包含 jQuery 库。
  5. 通过导航到工具箱|Data，在窗体上拖放GridView控件。

  6. In the Design mode, move the mouse pointer over the GridView control until a small arrow icon appears in the top-right corner. Click on this arrow to open the GridView Tasks menu, as shown in the following figure:

    Getting ready

  7. From the preceding menu, select from the Choose Data Source drop-down menu. This will open the Data Source Configuration Wizard, as shown in the following screenshot. Select SQL, and complete the wizard to connect to the Northwind database running on MS SQL Server:

    Getting ready

    在数据源配置向导中配置Select Statement选项时，选择Employees表，并选择EmployeeID、LastName、FirstName列:

    Getting ready

    注意事项

    请注意，本书中所有数据库驱动的示例都使用 Windows 身份验证。 因此，在 MS SQL Server 中，给 windows 帐户访问 Northwind 数据库的权限是很重要的。

  8. To style the GridView control, you can open the GridView Tasks menu once again, and click on Auto Format. Choose the required formatting scheme, and click on Apply to format the GridView control:

    Getting ready

  9. 另外，通过导航到工具箱|Standard，将一个Button控件添加到窗体中。 此按钮将用于根据需要隐藏/显示GridView控件。

  10. 因此，表单的标记如下:

    <asp:Button ID="btnShowHide" runat="server" Text="Hide GridView" /> <br /><br /> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1" AllowPaging="True" CellPadding="3" GridLines="Vertical" BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px"> <AlternatingRowStyle BackColor="#DCDCDC" /> <Columns> <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" /> <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" /> </Columns> <FooterStyle BackColor="#CCCCCC" ForeColor="Black" /> <HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" /> <RowStyle BackColor="#EEEEEE" ForeColor="Black" /> <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" /> <SortedAscendingCellStyle BackColor="#F1F1F1" /> <SortedAscendingHeaderStyle BackColor="#0000A9" /> <SortedDescendingCellStyle BackColor="#CAC9C9" /> <SortedDescendingHeaderStyle BackColor="#000065" /> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [FirstName], [LastName], [EmployeeID] FROM [Employees]"></asp:SqlDataSource>

  11. To use the explode effect, we need to download the necessary jQuery UI files by navigating to Tools | NuGet Package Manager | Manage NuGet Packages for Solution. In the Nuget Package Manager screen, as shown in the following screenshot, search for jQuery.UI.Effects.Core, and click on Install. This will add both the debug and release versions: jquery.effects.core.js and jquery.effects.core.min.js to the Scripts folder:

    Getting ready

  12. Next, search for jQuery.UI.Effects.Explode, and click on Install. This will add jquery.effects.explode.js and jquery.effects.explode.min.js to the Scripts folder:

    Getting ready

  13. 在 Web 窗体中包括jQuery.UI.Effects.Core和jQuery.UI.Effects.Explode的调试版本，如下所示:

怎么做……

在页面的script块中包含以下 jQuery 代码:

<script type="text/javascript">
  $(document).ready(function () {
    $("#<%=btnShowHide.ClientID%>").click(function (evt) {
      evt.preventDefault();
      if ($("#GridView1").is(":visible")) {
        $("#GridView1").hide("explode", { pieces: 100 }, 5000);
        $("#<%=btnShowHide.ClientID%>").val("Show GridView");
      }else {
        $("#GridView1").show("explode", { pieces: 100 }, 5000);
        $("#<%=btnShowHide.ClientID%>").val("Hide GridView");
      }
    });
  });
</script>

How it works…

GridView 控件上的爆炸效果如下所示:

  1. 当页面在浏览器中启动时，一个事件处理程序被附加到Button控件的单击事件，如下所示:

  2. 在这个事件处理程序中，首先阻止Button控件的默认行为，即阻止页面在Button上提交:

    evt.preventDefault();

  3. 接下来，我们检查GridView控件是否可见。 如果它是可见的，那么使用 jQuery UI 的explode效果将其逐渐隐藏。 pieces个数设置为100，动画时长设置为5000ms; GridView控制将爆炸成 100 个碎片并在 5 秒内逐渐消失。 Button控件的Text属性也相应更新:

    if ($("#GridView1").is(":visible")) { $("#GridView1").hide("explode", { pieces: 100 }, 5000); $("#<%=btnShowHide.ClientID%>").val("Show GridView"); }

  4. 如果GridView控件不可见，则使用 jQuery UI 的爆炸效果逐渐显示出来。 pieces的数量再次设置为100，动画的持续时间设置为5000ms; GridView控制装置由 100 个部件组成，5 秒内即可显示。 Button控件的Text属性也相应更新:

    else { $("#GridView1").show("explode", { pieces: 100 }, 5000); $("#<%=btnShowHide.ClientID%>").val("Hide GridView"); }

参见 also

树视图控件配方中的动画图像

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/31275.html