easyui for jquery之tooltip
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Tooltip - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Ajax Tooltip</h2>
<p>The tooltip content can be loaded via AJAX.</p>
<div style="margin:20px 0;"></div> <a href="#" data-tip="This is the tooltip message1." class="easyui-tooltip" data-options="
content: function(){
//return $('<div style=\'padding:5px;background:#eee;color:#000\'>This is the tooltip message.</div>');
//return $('#toolbar');
//return $(this).data('tip').;
return $('<div style=\'padding:5px;background:#eee;color:#000\'></div>').html($(this).data('tip'));
},
showEvent: 'mouseenter',
position: 'bottom',
onShow: function(){
var t = $(this);
t.tooltip('tip').unbind().bind('mouseenter', function(){
t.tooltip('show');
}).bind('mouseleave', function(){
t.tooltip('hide');
});
}
">Hove me</a> to display tooltip content via AJAX. <div style="display:none">
<div id="toolbar" style="padding:5px;background:#eee;color:#000">This is the tooltip message.</div>
</div>
</body>
</html>
清洁的代码整理如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltip - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript">
//tip样式、显示\隐藏触发设置
function show(){
var t = $(this);
//tip样式设置小驼峰规则，marginLeft等同margin-left
t.tooltip('tip').css({
backgroundColor: '#fff000',
borderColor: '#ff0000',
boxShadow: '1px 1px 3px #292929',
marginLeft: '20px'
});
//tip显示\隐藏触发设置
t.tooltip('tip').unbind().bind('mouseenter', function(){
t.tooltip('show');
}).bind('mouseleave', function(){
t.tooltip('hide');
});
} //tip内容填充
function content(){
return $('<div></div>').append($(this).data('tip'));
}
</script>
<style type="text/css">
a {
line-height:80px;
} #container{
margin-left: 10px;
}
</style>
</head>
<body>
<div id="container">
<!--data-tip设置tip显示内容设置-->
<!--data-options中position: 'bottom'设置tip显示相对位置底部[bottom|top|left|right]-->
<!--data-options中showEvent: 'mouseenter'设置tip显示出发事件[mouseenter|click|none]-->
<a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
<a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
<a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
<a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
<a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
</div>
</body>
</html>
再次优化后
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltip - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../tooltip.common.js"></script>
<style type="text/css">
a {
line-height:80px;
} #container {
margin-left: 10px;
}
</style>
</head>
<body>
<div id="container">
<!--data-tip设置tip显示内容-->
<!--data-options中position: 'bottom'设置tip显示相对位置底部[bottom|top|left|right]-->
<!--data-options中showEvent: 'mouseenter'设置tip显示出发事件[mouseenter|click|none]-->
<a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message.This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
<a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
<a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
<a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
<a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
</div>
</body>
</html>
tooltip.common.js
//tip样式、显示\隐藏触发设置
function tooltipshow(){
var t = $(this);
//tip样式设置小驼峰规则，marginLeft等同margin-left
t.tooltip('tip').css(eval("({" + $(this).data('tipcss') + "})"));
//tip显示\隐藏触发设置
t.tooltip('tip').unbind().bind('mouseenter', function(){
t.tooltip('show');
}).bind('mouseleave', function(){
t.tooltip('hide');
});
} //tip内容填充
function tooltipcontent(){
return $('<div></div>').append($(this).data('tipcontent'));
}
easyui for jquery之tooltip的更多相关文章
- JQuery easyui （4）Tooltip （提示组件） 组件
ps:先来一波美图 Tooltip的加载方式: 1,class加载 <a href="#" title="tooltip">hello word&l ...
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
- easyui中jquery重复引用问题（tab内存泄露问题）
今天认真测试了下easyui的一些兼容性问题,发现在ie9 ie10 首次加载的时候,会出现如下bug.如图所示: 认真看了下,我估计是脚本重复引用的问题,我用的iframe框架的模式.登陆系统后,桌 ...
- Easyui 修改jquery validatebox为英文校验提示为中文提示
修改jquery validatebox为英文校验提示为中文提示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述: 如图,想把校验提示由英文改成中文 ...
- 解决 Jquery UI Tooltip 用在Select 的BUG
今天遇到一个奇葩问题, 在chrome下一切正常的 页面,在IE 下Select无法选中! 是的 ,就是无法选中!!! 效果就是这样的.http://jsfiddle.net/slolife/dp4 ...
- 基于jQuery的Tooltip
近来,要开发一个关务管理系统,为了增加系统美观度,自己开发了一个基于jQuery框的的小插件,与大家分享一下,希望大家能给我提出宝贵修改意见. 下面开发说明使用方法和内容: 一.引用jQuery框架, ...
- Jquery Easyui与Jquery Bootstrap的比较
1.easyui是js框架 :bootstrap 是css框架 ,bootstrap = 样式库 + 一堆jQuery插件,顺便解释一句,如果你只需要bootstrap的样式,你完全不用引入jQuer ...
- Jquery Easyui与Jquery Bootstrap(Metronic Bootstrap)的简单比较
1,通常来看WEB前端用 bootstrap 比较好,后台用EASYUI比较好.Easyui适合工厂企业的管理系统如ERP,CRM之类的,Bootstrap适用于多屏跨设备浏览. 简言之,一个适合上班 ...
- easyUI tree jQuery
Tree 数据转换 所有节点都包含以下属性: id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data text: 显示的节点文本 ...
随机推荐
- SSM Maven MallDemo项目为例
一.创建maven项目 项目结构 创建一个空项目 1. mall (**pom**) 父模块,用于放置公共属性.依赖关系等. 2. mall-util (**jar**) 工具模块,用于放置常用工具类 ...
- 如何让字典保持有序---Python数据结构与算法相关问题与解决技巧
实际案例: 某编程竞赛系统,对参赛选手编程解体进行计时,选手完成题目后,吧该选手解体用时记录到字典中,以便赛后按选手名查询成绩 {'Lilei':(2,43),'HanMei':(5,52),'Jim ...
- python 正则表达式 re.split
内置函数split与re库中的split,有很多相似处 #!use/bin/python #coding:utf-8 import re str= "https://i.cnb1logs.c ...
- 1.关于狗书《Flask Web开发 基于Python的web开发应用实战》身份验证的改进
在我学习用户身份验证的时候,我发现这里有个小弊端,在用户注册完成后想要验证邮箱的时候,点击邮箱中的网址进行验证,此时还要登陆,这及其不符合我们的习惯.一般情况下我们只需要点击网址就可以验证成功并且进入 ...
- CentOS7 redhat7 linux系统1分钟安装Zabbix web 监控 服务器
一．准备工作OS:centos7.4Zabbix version:3.4.6(2018/1/15日上线的新版本)Database:MariaDB关闭防火墙:systemctl stop firewal ...
- 下载JSON数据
最近学习MongoDB,需要获取大量Json在线数据,例如: http://media.mongodb.org/zips.json 此处使用c#,直接给出代码: HttpWebRequest requ ...
- Codeforces 843D (Dijkstra算法的优化，动态最短路)
题面 (http://codeforces.com/problemset/problem/843/D) 题目大意: 给定一张带权无向图,有q次操作 操作有两种 1 v 询问1到v的最短路 2 c 将边 ...
- Python之字符串和正则表达式
使用正则表达式 Python对正则表达式的支持 例子:替换字符串中的不良内容 import re def main(): sentence = '你丫是傻叉吗? 我操你大爷的. Fuck you.' ...
- 说明一下 os.path 和 sys.path 分别代表什么？
os.path 主要是用于对系统路径文件的操作. sys.path 主要是对Python解释器的系统环境参数的操作(动态的改变Python解释器搜索路径).
- 《死磕 Elasticsearch 方法论》：普通程序员高效精进的 10 大狠招！（完整版）
原文:<死磕 Elasticsearch 方法论>:普通程序员高效精进的 10 大狠招!(完整版) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链 ...