Ajax Control Toolkit BalloonPopup的使用实例及效果

Ajax Control Toolkit 工具包的简介及获取方式等，请参见本系列的另一篇随笔：Ajax Control Toolkit使用实例(1) AutoCompleteExtender。

BalloonPopup 控件简介

BalloonPopup 控件可以显示一个弹出层，里面可以包含很多内容。例如，当用户将鼠标移动到一个文本框上时，可以使用此控件为用户显示一些帮助信息。

BalloonPopup 控件支持三种样式（BalloonStyle）：气球样式（Balloon）、矩形样式（Rectangle）还有用户自定义样式（Custom）。弹出层的大小也有三种型号：小号（Small）、中号（ Medium），大号（ Large）。如果你将 BalloonStyle 属性设置为Custom，那样你需要将CustomCssUrl属性值设置为自定义样式表的路径。

BalloonPopup 控件使用方法

1.向页面添加 ToolkitScriptManager 控件，用于向页面注册控件所需要的脚本；

代码如下:

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">ajaxToolkit:ToolkitScriptManager>

2.添加 Panel 控件充当容器，用于容纳提示内容；


代码如下:

<asp:Panel runat="server" ID="messagePanel">   
小丸子，我给你讲个笑话吧~~
<asp:Image runat="server" ImageUrl="~/Images/微笑.gif" ImageAlign="AbsMiddle" />asp:Panel>

3.添加 BalloonPopupExtender 控件，定制样式、绑定目标控件及提示信息容器等；


代码如下:

<ajaxToolkit:BalloonPopupExtender runat="server" ID="BalloonPopupExtender1"
Position="TopLeft"               
TargetControlID="Image2"               
BalloonPopupControlID="Panel1"
BalloonSize="Small"             
BalloonStyle="Cloud"          
DisplayOnMouseOver="True" />

4.运行页面，将看到如下效果：






 

更多使用方法，请参见 Ajax Control Toolkit 示例站点。

赞 (0)

相关推荐

  • Ajax Control Toolkit BalloonPopup的使用实例及效果

    Ajax Control Toolkit BalloonPopup的使用实例及效果

    Ajax Control Toolkit 工具包的简介及获取方式等,请参见本系列的另一篇随笔:Ajax Control Toolkit使用实例(1) AutoCompleteExtender. BalloonPopup 控件简介 BalloonPopup 控件可以显示一个弹出层,里面可以包含很多内容.例如,当用户将鼠标移动到一个文本框上时,可以使用此控件为用户显示一些帮助信息. BalloonPopup 控件支持三种样式(BalloonStyle):气球样式(Balloon).矩形样式(Rect

  • Ajax Control Toolkit 34个服务器端控件第1/2页

    1. Accordion [功能概述] Accordion可以让你设计多个panel 并且一次只显示一个Panel .在页面上的显示效果就像是使用了多个CollapsiblePanels只不过每一次只展开其中一个CollapsiblePanel.Accordion控件内部包含了若干个AccordionPane,每一个AccordionPane的template里包括了对其Header和Content的定义.我们可以在后台代码中通过SelectedIndex属性取得当前展开的哪一个Panel,还可

  • Ajax邮箱、用户名唯一性验证实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> $(function () { $("#txtEmail").blur(function () { $.ajax({ type: "post", url: "reg.ashx?email=" + $.trim($("#txtEmail").val()) + "&

  • 使用Ajax局部更新Razor页面的实例代码

    使用Ajax局部更新Razor页面的实例代码

    Razor功能非常强大,但是本身并不能做到无刷新,所以需要配合ajax使用 本文就做一个简单例子,实现Razor配合ajax做到局部刷新. 首先,我们创建一个MVC项目 让我们创建一个简单的Controller Book 然后对其添加一个视图,并且添加上一些简单的Html代码 @{ ViewBag.Title = "Index"; Layout = null; } <!DOCTYPE html> <html> <head> <meta http

  • 通过数据库和ajax方法写出地图的实例代码

    通过数据库和ajax方法写出地图的实例代码

    ajax教程 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 客户端部分:html.js.css代码部分: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www

  • Spring MVC中Ajax实现二级联动的简单实例

    今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody public Map<String,Object> faultType(int id,HttpServletRequest request)throws IOException { String ReturnMessage = ""; //获取所有子类故障类型 List<F

  • 基于ajax和jsonp的原生封装(实例)

    最近在学ajax和跨域,于是就自己封装了一个,虽然有点粗糙但还是可以用的.其实jsonp的本质就是:动态创建script标签,然后通过src属性发送跨域请求,然后服务器端响应的数据格式为[函数调用(foo(实参))],所以在发送请求之前必须先声明一个函数,并且函数的名字与参数中传递的名字要一致.这里声明的函数是由服务器响应的内容(实际就是一段js代码-函数调用)来调用. 其他的就不多说了,直接上代码. 'use strict'; function ajax(obj){ var defaults

  • 原生ajax处理json格式数据的实例代码

    原生ajax处理json格式数据代码实例: 由于jQuery的出现,原生ajax使用频率也越来越少,这当然是因为jQuery的便利性多导致的. 但是对于原生ajax实现原理的知晓也是非常重要的,下面就改造本板块的一个使用jquery ajax实现的代码. 代码实例如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

  • 运用JSP+ajax实现分类查询功能的实例代码

    运用JSP+ajax实现分类查询功能的实例代码

    本文主要是介绍了运用JSP+ajax实现分类查询功能的实例代码,分享给大家供大家参考,具体如下: 这次是对小学期关于大学毕业生信息管理系统课程设计中遇到的一些问题和解决方法进行记录和分享. 题目要求:提供企业招聘信息(本年度或历年)查询功能: 首先建立一个jsp文件用来显示数据库信息,并在上面加输入条件的文本框和查询按钮,在这个jsp文件中需要完成一个js函数在用于完成查询功能. <%@ page language="java" pageEncoding="UTF-8&

  • Ajax+Struts2实现验证码验证功能实例代码

    Ajax+Struts2实现验证码验证功能实例代码

    众所周知,验证码在我们的生活中都是非常常见的,很多公司都在各种折腾各种各样的验证码,这里简要的用一个小案例来实现验证码的功能(ps:其实我挺讨厌验证码这个东西的). 今天分享的是通过ajax来动态的验证验证码输入是否正确.我们这里采用的是ajax+struts2来做的这个验证. 我们新建一个web工程.然后需要导入struts的相应包.之后我们需要写一个类来生成验证码. 这里命名为01_image.jsp,这类的主要功能就是生成验证码,里面是各种画线条,随机数字等,我这里设置的是5个数字的验证,

随机推荐