-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo-Tooltips.html
134 lines (125 loc) · 4.94 KB
/
demo-Tooltips.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tooltips</title>
<link href="demo.css" rel="stylesheet">
<script src="jquery.js"></script>
<link href="dist/css/H.min.css" rel="stylesheet" type="text/css">
<script src="dist/js/H.min.js"></script>
<style>
.demo-div{
margin-top: 30px;
padding: 10px 0;
font-size: 14px;
font-family: 微软雅黑;
line-height: 1.5;
}
.tpl{
width: 600px;
padding: 10px 0;
}
.tpl table{
width: 100%;
border-collapse: collapse;
}
.tpl th{
height: 40px;
}
.tpl td{
height: 30px;
}
.tpl td, .tpl th{
padding: 0 10px;
border: 1px solid #ccc;
}
.demo-link {
position: relative;
text-decoration: none;
}
.demo-link .ui-tooltips{
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<h2>Tooltips</h2>
<ul>
<li>使用方法请看源代码及注释</li>
</ul>
<div style="height: 50px"></div>
<h2>Demo</h2>
<p style="padding: 10px 0; line-height: 25px; font-size: 14px;">
利用 UI 库的 Tooltips 来实现的效果。用起来肯定不如直接使用插件便利，但效果绝对让人满意~<br>
和表单验证插件一样，放弃了使用便利性，追求 DOM 可控性 and 视觉效果
</p>
<br><br>
<a href="####" id="J-button-demo01" title="标题很长，这里截字了，实际上后面应该还有一大堆废话没办法展示出来" class="demo-link">
标题很长，这里截字了...
</a>
<br><br><br>
<a href="####" id="J-button-demo02" class="demo-link">
弹窗里显示html内容
</a>
<div style="height: 300px;"></div>
<script type="text/html" id="J-tpl-demo01">
<div class="tpl">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>男</td>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>男</td>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>男</td>
</tr>
</table>
</div>
</script>
</div>
<script type="text/javascript">
H.Tooltips.create({
target : $('#J-button-demo01'),
content : function(){ return $('#J-button-demo01').attr('title'); },
width : 200
});
H.Tooltips.create({
target : $('#J-button-demo02'), //需要添加 tooltips 的目标元素 【JqueryObject】 必传！！
content : $('#J-tpl-demo01').html(), //提示框内容，类型可以是【string】或【function】，如果是【function】，要求该函数必须返回一个字符串
side : 'bottom', //提示框展示在目标元素的哪一边【string】（取值范围：'top'， 'bottom'， 'left'， 'right'）
contSide : 'right', //提示框内容部分展示配置，与 side 配合使用【string】（side 为 left 或 right 时的取值范围：'top'，'bottom'，'middle'; side 为 top 或 bottom 时的取值范围：'left'，'right'，'middle'; 注意，设置此属性后，插件将不会自动判断展示哪一侧）
theme : 'info', //提示框主题【string】（默认值：''， 取值范围：''， 'info'， 'success'， 'warning'， 'error'）
position : {
top : 0,
left : 0
}, //用来调整提示框的位置偏移【Object - Int】
width : 0, //提示框的宽度【Int】（默认值：0， 默认情况下，宽度是自适应的，但是当 content 的内容是纯文本时，请务必设置 tooltips 宽度，否则可能会出现意想不到的意外结果出现）
eventShow : 'click', //提示框显示触发事件【string】（默认值:'mouseenter'）
eventHide : 'blur', //提示框隐藏触发事件【string】（默认值:'mouseleave'，当 eventShow 的值为 'click' 时，eventHide 会被强行无效化。改为点击提示框以外的区域触发隐藏）
//提示框显示后的回调【function】，有一个参数，传入的是生成的提示框的 JqueryObject
onShow : function ($toolTips) {
//alert('提示框显示了~');
},
//提示框隐藏后的回调【function】，有一个参数，传入的是生成的提示框的 JqueryObject
onHide : function ($toolTips) {
//$toolTips.find('table').css('visibility', 'hidden');
//alert('提示框隐藏了~');
}
});
</script>
</body>
</html>