RadToolTip (点击按钮，弹出ToolTip)

最新推荐文章于 2024-05-27 16:09:40 发布
最新推荐文章于 2024-05-27 16:09:40 发布
阅读量263 收藏
点赞数
文章标签： xhtml ui javascript ViewUI
原文链接：http://www.cnblogs.com/ywblog/archive/2011/09/14/2176252.html
版权

 

ContractedBlock.gif ExpandedBlockStart.gif View Code 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="WebApplication.Demo" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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></title>
<style type="text/css">
        .toolTipStyle
        {
            background-color: #ECEDE5;
        }
</style>
<script type="text/javascript" src="../Common/Js/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">

/************************弹出ToolTip*************************/
        var toHide = false;

        function OnClientBeforeHide(sender, args) {
if (!toHide) args.set_cancel(true);
        }

        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest
            (
             function (sender, args) {
                 toHide = false;
if (args.get_postBackElement().id == "btnAdd") {
                     var tooltip = $find("<%=RadToolTip1.ClientID%>");
                     tooltip.show();
                 }
                 var tooltip = $find("<%=RadToolTip1.ClientID%>");
                 tooltip.show();
             }
            );
        function GetActiveToolTip() {
            var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
return tooltip;
        }
//关闭ToolTip
        function CloseToolTip() {
            var tooltip = GetActiveToolTip();
if (tooltip != null && tooltip.get_id() == "RadToolTip1") {
                toHide = true;
                tooltip.hide();
            }
        }
</script>
<div style="text-align: center">
<asp:Button ID="btnAdd" runat="server" Text="新增" ToolTip="新增" />
</div>
<telerik:RadToolTip ID="RadToolTip1" runat="server" Modal="true" ShowEvent="FromCode"
        Position="Center" RelativeTo="BrowserWindow" OnClientBeforeHide="OnClientBeforeHide"
        EnableShadow="true" HideEvent="FromCode" Width="400" Height="200" Animation="Resize"
        CssClass="toolTipStyle">
<asp:UpdatePanel runat="server" ID="UpdatePanel2">
<ContentTemplate>
<asp:Panel ID="pStopCusTrack" runat="server" Style="padding-left: 5px;" CssClass="toolTipStyle"
                    Height="200">
<center>
<table>
<tr>
<th colspan="3">
                                    学生信息
</th>
</tr>
<tr style="height: 10px">
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td align="right">
<asp:Literal ID="lStuName" runat="server" Text="学生姓名:"></asp:Literal>
</td>
<td align="left">
<asp:TextBox ID="txtStuName" runat="server" Width="90%"></asp:TextBox>
</td>
<td>
<b style="color: Red; text-align: center;">*</b>
<asp:RequiredFieldValidator ID="rfvStuName" runat="server" Display="None" ControlToValidate="txtStuName"
                                        ValidationGroup="Save" ErrorMessage="学生姓名不能为空！"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right">
<asp:Literal ID="lStuSex" runat="server" Text="性别:"></asp:Literal>
</td>
<td align="left">
<asp:RadioButtonList ID="rblStuSex" runat="server" RepeatColumns="2" Width="90%">
<asp:ListItem Text="男" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="女" Value="0"></asp:ListItem>
</asp:RadioButtonList>
</td>
<td>
</td>
</tr>
<tr>
<td align="right">
<asp:Literal ID="lStuAge" runat="server" Text="年龄:"></asp:Literal>
</td>
<td align="left">
<telerik:RadNumericTextBox ID="rntbStuAge" runat="server" MinValue="0" MaxValue="100"
                                        EmptyMessage="请输入年龄！" NumberFormat-DecimalDigits="0" Width="90%">
</telerik:RadNumericTextBox>
</td>
<td align="left">
<b style="color: Red;">*</b>
<asp:RequiredFieldValidator ID="rfvStuAge" runat="server" Display="None" ControlToValidate="rntbStuAge"
                                        ValidationGroup="Save" ErrorMessage="年龄不能为空！"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right">
<asp:Literal ID="lBirthday" runat="server" Text="出生日期:"></asp:Literal>
</td>
<td align="left">
<asp:TextBox ID="txtBirthday" runat="server" onfocus="WdatePicker({isShowClear:true,readOnly:true})"
                                        Width="90%"></asp:TextBox>
</td>
<td>
<b style="color: Red;">*</b>
<asp:RequiredFieldValidator ID="rfvBirthday" runat="server" Display="None" ControlToValidate="txtBirthday"
                                        ValidationGroup="Save" ErrorMessage="出生日期不能为空！"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right">
<asp:Literal ID="lAddress" runat="server" Text="家庭住址:"></asp:Literal>
</td>
<td align="left">
<asp:TextBox ID="txtAddress" runat="server" TextMode="MultiLine" Width="90%"></asp:TextBox>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Button ID="btnSave" runat="server" Text="保存" ToolTip="保存" ValidationGroup="Save" />
&nbsp;
<input type="button" onclick="CloseToolTip()" title="关闭" value="关闭" />
</td>
</tr>
</table>
</center>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAdd" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</telerik:RadToolTip>
<asp:ValidationSummary ID="vsValidation" ValidationGroup="Save" runat="server" ShowMessageBox="true"
        ShowSummary="false"></asp:ValidationSummary>
</form>
</body>
</html>

转载于:https://www.cnblogs.com/ywblog/archive/2011/09/14/2176252.html

weixin_30693183
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery Tooltip弹出式分享按钮插件
06-10
非常美观的一款jQuery Tooltip弹出式分享按钮插件，点击分享按钮时，会以Tooltip弹出框的样式显示分享按钮图片，并且在弹出时伴随着左右摇晃的动画特效。
jQuery实现Tooltip弹出样式的分享按钮
08-23
这是一款比较实用而美观的jQuery分享按钮插件，和前面分享又一波CSS3社会化分享图标 可旋转和悬停和一大波CSS3社会化分享图标按钮相比...会以Tooltip弹出框的样式显示分享按钮，并且在弹出时伴随着左右摇晃的动画特效。
Tooltip 文字提示 点击小图标显示文字
m0_65274248的博客
09-20 356
Tooltip 文字提示 点击小图标显示文字
当鼠标移到按钮或其它控件时出现TOOLTIP
wljun739的专栏
06-15 910
1、建一个基于对话框的程序TipTest,在CTipTestDlg中增加成员变量:     CToolTipCtrl   m_tip[2],CWnd   *m_pSub[2];   2、在CTipTestDlg::OnInitDialog()函数中增加如下代码:       pSub[0]   =   GetDlgItem(IDC_RADIO1);           //得到单选按钮的指针
vue+iview的文字提示Tooltip
m0_53723760的博客
08-17 855
<table> <template slot-scope="{row}" slot="cuslevel"> <Tooltip :content="这里放想要提示的内容" placement="top-start" max-width="200" transfer="true"> <img :src="" height="30" width="30" alt=""> 内部放上图片的话，鼠标放到该图片上就...
使用tooltip弹出图片
Welkin_qing的博客
06-03 3067
文章目录1. 解决bootstrap tooltip出现问题2. 弹出文字（两种方法）1. 纯css2. 使用popper.js 1. 解决bootstrap tooltip出现问题 在直接引用bootstrap tooltip 组件时，确定引入bootstrap.js 时还会弹出错误，如下所示： 没有引入 popper.js 进入官网：https://github.com/FezVrasta/...
Echarts图表tooltip添加点击按钮
热门推荐
zeng092210的博客
08-15 2万+
Echarts图表tooltip添加点击按钮并获取具体时刻数据 效果图 功能： 1. tooltip中添加一个查看按钮， 2. 并且点击获得触发点的数据进行操作 具体过程： ehcarts显示正常，并且在toopltip中添加formatter(params)函数对toopltip进行html设置显示按钮。 css设置按钮style，按钮设置pointer-events 简单两部分设置...
echarts tooltip绑定点击事件并弹出弹框
yyXieDaiMa的博客
11-18 1万+
1.问题描述 实现如图效果，当鼠标悬浮/点击小脚位置时，弹出tooltip框，并且鼠标点击查看更多按钮弹出弹框。 2. 实现步骤 2.1问题汇总 样式不生效（提示框设置样式必须为全局样式） 按钮点击无响应（按钮样式增加 pointer-events:auto） 按钮点击方法不执行（需增加全局作用域的样式， tooltip无法使用vue组件的方法， 必须定义windows全局上） tooltip字段主要配置如下 tooltip: { // 鼠标是否可以进入悬浮.
点击按钮弹出提示框，背景为半透明黑色
凡的博客
12-04 1193
绝对详细！
Echarts图标tooltip添加按钮点击跳转
WuqibuHuan的博客
08-21 2521
tooltip中添加一个查看按钮，并且点击获得触发点的数据进行操作 ehcarts显示正常，并且在toopltip中添加formatter(params)函数对toopltip进行html设置显示按钮，点击跳转其他页面 完整代码附上： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
echarts的tooltip添加点击事件
柚稚的博客
07-12 6896
给echarts的悬浮框tooltip 添加点击事件，需要注意以下几点 1、修改triggerOn: ‘click’, enterable: true, triggerOn:'click', enterable:true, alwaysShowContent:true, // hideDelay:10000, formatter: function(params) { // return params.name + ' : ' + params.valu
Bootstrap Tooltip 弹出图片提示信息
08-30 1291
在html中引入bootstrap的css和js，然后在需要提示的标签上，加上： data-toggle="tooltip" data-placement="bottom" title="12345678901" 1 然后在JS中加入： $("[data-toggle='tooltip']").tooltip(); 1 即可。 例如，在<a>标签上加上以上代码： <a d...
JS弹出层对话框,Tooltip提示,Msg消息框
11-18
JS弹出层对话框插件源码，包含弹出层对话框和Tooltip提示框，消息框等多种功能，兼容主流浏览器（注：不兼容IE9以下版本的IE浏览器）。内置4种颜色的皮肤，且可以自定义对话框样式，可设置对话框位置。Tooltip可以...
Echarts图标tooltip添加按钮点击.zip
07-06
tooltip中添加一个查看按钮，并且点击获得触发点的数据进行操作 ehcarts显示正常，并且在toopltip中添加formatter(params)函数对toopltip进行html设置显示按钮，点击跳转其他页面
UGUI弹出文字提示方法(Tooltip)
09-25
2.将“Tooltip.prefab”拖拽到场景中Canvas下，再将“UIToolTip.cs”绑定到对象身上，给它的“Text”接口绑好组件即可。 3.给需要Tooltip提示的UI上绑定“UITooltipShow.cs”就可以了。 4.其实同理改造一下，也可以...
常见的 HTML 标准
csdn_ad986ad的博客
04-30 893
HTML（Hypertext Markup Language）有多个版本和标准。
Vue 项目中使用 Element UI库（Element UI 是一套基于 Vue.js 的桌面端组件库）
最新发布
qq_53348178的博客
05-27 347
el-input v-model="user.username" id="username" placeholder="请输入用户名" /><el-input v-model="user.password" id="password" placeholder="请输入密码" /><el-button @click="login" margin="0 auto">登录</el-button><el-form-item label="用户名" for="username">（做优化，可以不用）
三、自定义信号和槽函数（无参和有参）
beyond谚语的博客
05-20 908
相信我，耐心看完一定会有收获的！！！
Android-okhttp调接口传参简单举例
Ann_52547的博客
05-24 321
okhttp
echarts鼠标悬浮legend弹出tooltip提示
06-10
在ECharts中，可以通过设置tooltip和legend的相关配置项，实现鼠标悬浮在legend上时弹出tooltip提示的效果。 具体做法如下： 1. 在tooltip配置项中，设置trigger为'item'，表示鼠标悬浮在图形元素上时触发tooltip...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值