在网页上,弹出按钮可以节省空间

分享于 

6分钟阅读

Web开发

  繁體

Screenshot - microsoftquicklinks.gif

介绍

本文介绍了 ASP.NET Flyout 控件及其应用。 Flyout 可以让你的网页包含更多信息,并且更简洁,更时尚。 上面的图片展示了 Flyout 如何在Microsoft网站中作为QuickLinks使用。 我想介绍的Flyout 控件来自于inc公司的 这里 Flyout的功能丰富且完全免费: 免费免费下载,免费免费使用,免费免费发布。

功能列表

以下是一些主要功能:

  • 能够包装任何内容。
  • 能够自定义打开位置。
  • 提供了四种效果。
  • 设计时间预览支持。
  • 易于使用:花费不到三分钟才能正常工作。

如何在页面中添加弹出按钮

Flyout 控件添加到页面非常简单:

  • 复制 obout_Flyout_NET.dll 到项目的Bin文件夹。
  • 页面上的register 弹出按钮:
  • <%@RegisterTagPrefix="obout"Namespace="OboutInc.Flyout2"Assembly="obout_Flyout2_NET"%>

使用弹出控件

下面是一些示例代码:

<asp:Buttonrunat="server"ID="myButton"Text="My Button"/><obout:Flyoutrunat="server"ID="myFlyout"AttachTo="myButton"><divstyle="background-color:lightblue;width:200px;height:100px;"> Flyout
 </div></obout:Flyout>

通过将 ButtonID 放入 FlyoutAttachTo 属性中,你将 Flyout 附加到 Button

下面是我们工作的结果:

Flyout open as default

当鼠标悬停在按钮上时,一个飞出的按钮在按钮的底部打开。

自定义弹出按钮的打开位置

Flyout 不仅可以在目标对象的底部打开,也可以在其他相对位置打开。 将控制 Flyout的位置的四个属性是 PositionAlignRelativeLeftRelativeTop

如何将弹出按钮附加到按钮上?

Flyout open on the right of object

很简单,代码在这里:

<asp:Buttonrunat="server"ID="myButton"Text="My Button"/><obout:Flyout...Position="MIDDLE_RIGHT"Align="TOP"...><divstyle="background-color:lightblue;width:200px;height:100px;"> Flyout
 </div></obout:Flyout>
如果你希望你的飞行具有自定义位置,就像这样:

Flyout open with custom position

做这些:

<asp:Buttonrunat="server"ID="myButton"Text="My Button"/><obout:Flyout...Position="ABSOLUTE"RelativeLeft="50"RelativeTop="5"...><divstyle="background-color:lightblue;width:200px;height:100px;"> Flyout
 </div></obout:Flyout>

要了解其他定位样式,你可以查看弹出位置对齐。

自定义 OpenEvent

Flyout的默认行为是在光标悬停在目标元素上的顶部打开。 可以更改这里行为。 例如要在 Click 事件上打开,请执行以下操作:

<inputtype="button"id="myButton"value="My Button"/><obout:Flyout...OpenEvent="ONCLICK"...><divstyle="background-color:lightblue;width:200px;height:100px;"> Flyout
 </div></obout:Flyout>

OpenEvent 属性有许多预先定义的事件供你选择。

自定义打开效果

Flyout 提供了四种类型的效果:

  • FlyingEffect: Flyout的默认效果。
  • FadingEffect: 飞出来会逐渐消失。
  • SlidingEffect: 飞出将出现,滑动,然后停止。
  • NoneEffect: 飞出将不会产生任何效果

可以在同一个 Flyout 上设置多个效果。 例如如果希望 Flyout 通过 sliding滑动从左侧和淡出同时:

<inputtype="button"id="myButton"value="My Button"/><obout:Flyout...SlidingEffect="LEFT"FadingEffect="true"...><divstyle="background-color:lightblue;width:100px;height:50px;"> Flyout
 </div></obout:Flyout>

下面是幻灯片和淡入淡出的结果。

超酷应用

  • 隐藏快速链接或者站点地图,反馈表单,关于产品的附加信息,工具提示。 视图视图。
  • Flyout 可以用作菜单。 视图视图
  • Flyout 可以与网格一起使用以显示更多信息。 视图视图。
  • 还有什么。

摘要

在本文中,我向你展示了如何使用 Flyout 控件。 这里组件将帮助你在网页上节省大量布局空间,并为你的用户提供额外的信息。 我希望你觉得它有用。 本文提供的zip文件中有许多 Flyout 示例,你可以从。 你可以随时从的套件获得最新版本的Flyout。 最好的。


WEB  spa  保存  Space  WEBP  网页  
相关文章