Flyout——节省网页空间的绝佳方式

• 下载源代码 - 199 KB

引言

本文介绍了ASP.NET `Flyout` 控件及其应用。`Flyout` 可以使您的网页包含更多信息，并使其外观更整洁、更时尚。上图显示了如何在Microsoft MSDN网站中将`Flyout`用作快速链接。我在这里要介绍的`Flyout`控件来自obout inc。这个`Flyout`功能丰富且完全免费：下载免费，使用免费，分发免费。

功能列表

以下是一些关键功能

• 能够包裹任何内容。
• 能够自定义打开位置。
• 提供四种类型的效果。
• 设计时预览支持。
• 易于使用：只需不到三分钟即可完成。

如何在您的页面中添加Flyout

将`Flyout`控件添加到您的页面非常简单

• 将`obout_Flyout_NET.dll`复制到项目的`Bin`文件夹。
• 在您的页面上注册Flyout

<%@ Register TagPrefix="obout" Namespace="OboutInc.Flyout2" 
             Assembly="obout_Flyout2_NET" %>

使用Flyout控件

以下是一些示例代码，可以作为开始

<asp:Button runat="server" ID="myButton" Text="My Button"/>

<obout:Flyout runat="server" ID="myFlyout" AttachTo="myButton">
    <div style="background-color:lightblue;width:200px;height:100px;">
        Flyout
    </div>
</obout:Flyout>

通过将`Button`的`ID`放入`Flyout`的`AttachTo`属性中，您已将`Flyout`附加到`Button`。

这是我们工作的结果

当鼠标悬停在按钮上时，一个fly-out会在按钮的底部中央打开。

自定义Flyout的打开位置

`Flyout`不仅可以在目标对象的底部打开，也可以在其他相对位置打开。四个控制`Flyout`位置的属性是`Position`、`Align`、`RelativeLeft`和`RelativeTop`。

如何才能使Flyout像这样附加到按钮？

非常简单，代码如下

<asp:Button runat="server" ID="myButton" Text="My Button"/>

<obout:Flyout ... Position="MIDDLE_RIGHT" Align="TOP" ...>
    <div style="background-color:lightblue;width:200px;height:100px;">
        Flyout
    </div>
</obout:Flyout>

如果您希望您的fly-out具有自定义位置，像这样

这样做

<asp:Button runat="server" ID="myButton" Text="My Button"/>

<obout:Flyout ... Position="ABSOLUTE" RelativeLeft="50" RelativeTop="5" ...>
    <div style="background-color:lightblue;width:200px;height:100px;">
        Flyout
    </div>
</obout:Flyout>

要了解有关其他定位样式的更多信息，您可以查看Flyout位置和对齐方式。

自定义OpenEvent

`Flyout`的默认行为是在光标悬停在目标元素上时打开。此行为可以更改。例如，要在`Click`事件上打开

<input type="button" id="myButton" value="My Button"/>

<obout:Flyout ... OpenEvent="ONCLICK" ...>
     <div style="background-color:lightblue;width:200px;height:100px;">
        Flyout
    </div>
</obout:Flyout>

`OpenEvent`属性有多个预定义事件供您选择。

自定义打开效果

`Flyout`提供四种类型的效果

• `FlyingEffect`：`Flyout`的默认效果。
• `FadingEffect`：fly-out会逐渐出现和消失。
• `SlidingEffect`：fly-out会显示、滑动，然后停止。
• `NoneEffect`：fly-out只会出现，没有任何效果

可以在同一个`Flyout`上设置多个效果。例如，如果您希望`Flyout`从左侧滑动并同时淡入打开

<input type="button" id="myButton" value="My Button"/>

<obout:Flyout ... SlidingEffect="LEFT" FadingEffect="true" ...>
     <div style="background-color:lightblue;width:100px;height:50px;">
        Flyout
    </div>
</obout:Flyout> 

这是滑动和淡入效果的结果。

酷炫应用

• 最初隐藏的快速链接或站点地图、反馈表单、有关产品的额外信息、工具提示。查看。
• `Flyout`可以用作菜单。查看
• `Flyout`可以与网格一起使用以显示更多信息。查看。
• 其他。

摘要

在本文中，我已经向您展示了如何使用obout的`Flyout`控件。此组件将帮助您节省网页上的大量布局空间，并为您的用户提供额外信息。我希望您觉得它有用。在此文章附带的zip文件中，有很多您可以开始使用的`Flyout`示例。您可以随时从obout Suite获取最新版本的`Flyout`。祝一切顺利。