【EasyUI篇】Tooltip提示框组件
程序员文章站
2022-06-01 22:23:14
...
微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;
查看--> 全套EasyUI示例目录
4.Tooltip提示框组件
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Droppable</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Tooltip.js"></script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body style="margin-left: 200px; margin-top: 200px;">
<%----%>
<%--<a href="http://www.baidu.com" title="这是一个提示信息！" class="easyui-tooltip">
HOVER ME
</a>--%>
<a href="#" id="box">
HOVER ME
</a>
<br><br><br>
<button id="showBtn">点击显示提示框</button>
<button id="hideBtn">点击隐藏提示框</button>
<button id="destroyBtn">点击销毁提示框</button>
<button id="repositionBtn">点击改变提示框位置</button>
<button id="updateBtn">点击改变提示框内容</button>
</body>
</html>
JS文件
$(function () {
$('#box').tooltip({
//------------- 属性列表 ------------------
content:"这是可以输入提示内容",
// position:'top',//bottom(default),left,top,right
//设置允许提示框跟随鼠标移动,默认为false
// trackMouse:true,
//设置提示框距离鼠标的位置
// deltaX:40,
// deltaY:20,
//鼠标进入时显示
// showEvent:'mouseenter',
//单击时显示
// showEvent:'click',
//鼠标离开时隐藏
// hideEvent:'mouseleave'
//双击时隐藏
// hideEvent:'dblclick',
//设置延时多少秒显示提示框
showDelay:200,
//设置延时多少秒隐藏提示框
hideDelay:200,
//------------- 事件列表 ---------------
onShow:function (e) {
// alert("在显示提示框时触发");
//返回tip对象。需要tip元素生成之后
// console.log($('#box').tooltip('tip'));
//返回箭头元素对象
$('.tooltip-bottom').css('left',300);
console.log($('#box').tooltip('arrow'));
},
onHide:function (e) {
// alert("在隐藏提示框时触发");
},
onUpdate:function (content) {
alert("在内容更新时触发，content："+content);
},
onPosition: function (left,top) {
alert("在改变位置时触发：left:"+left+",top:"+top);
},
onDestroy:function (none) {
alert("在提示框销毁时触发");
}
});
//-------------- 方法列表 -------------------
//返回属性对象
console.log($('#box').tooltip('options'));
$('#showBtn').click(function () {
$('#box').tooltip('show');
});
$('#hideBtn').click(function () {
$('#box').tooltip('hide');
});
$('#destroyBtn').click(function () {
$('#box').tooltip('destroy');
});
$('#repositionBtn').click(function () {
//重置提示框位置
$('#box').tooltip('reposition');
});
$('#updateBtn').click(function () {
$('#box').tooltip('update','内容改变了');
});
});
效果图
------------------------------------------------
关注小编微信公众号获取更多资源
推荐阅读
-
EasyUI的messager消息提示框组件代码实现教程
-
EasyUI的提示框组件代码实现教程
-
第五章 jqueryEasyUi 提示框组件Tooltip
-
【EasyUI篇】Tooltip提示框组件
-
EasyUI系列学习(六)-Tooltip（提示框）_html/css_WEB-ITnose
-
EasyUI系列学习(六)-Tooltip（提示框）_html/css_WEB-ITnose
-
EasyUI的messager消息提示框组件代码实现教程
-
EasyUI的提示框组件代码实现教程
-
jQuery EasyUI 教程-Tooltip（提示框）
-
jQuery EasyUI 教程-Tooltip（提示框）