Skip to content

Commit 6cfc812

Browse files
author
DDDBear
committed
融合修复bug， #352，#411，#412 
1 parent 2c237b9 commit 6cfc812

File tree

3 files changed

+328
-192
lines changed

3 files changed

+328
-192
lines changed

‎demo/Tip.html‎

Lines changed: 125 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,8 @@
4444
</head>
4545
<body>
4646
<header>Tip</header>
47-
<div class="container">
47+
<div id="container" class="container" style="margin-left:100px">
4848
<div data-ui="type:Tip;id:tip;title:写这里优先级高;content:我是内容;arrow:1" title="也可以写在这里">content也可以写在这里</div>
49-
<esui-tip data-ui="type:Tip;id:tip;title:写这里优先级高;content:我是内容;arrow:1" title="也可以写在这里"></esui-tip>
5049

5150
<br>
5251
<label id="tip-layer-label">
@@ -57,12 +56,28 @@
5756
<br>
5857
<br>
5958
<Button data-ui-id="control-tip" data-ui-type="Button">
60-
可以帮在控件上
59+
划过展示弹层
6160
</Button>
6261
<br>
6362
<br>
6463
<Button data-ui-id="control-tip-2" data-ui-type="Button">
65-
我跟楼上的共享一个tip
64+
点击展示弹层
65+
</Button>
66+
<br>
67+
<br>
68+
<Button data-ui-id="control-tip-3" data-ui-type="Button">
69+
自动展示弹层
70+
</Button>
71+
<br>
72+
<br>
73+
<Button data-ui-id="control-tip-4" data-ui-type="Button">
74+
定制展示弹层
75+
</Button>
76+
<br>
77+
<br>
78+
<p>TipLayer支持多个元素共享，但不适用showMode为auto的绑定</p>
79+
<Button data-ui-id="control-tip-3-1" data-ui-type="Button">
80+
我们跟第三个按钮共享一个tip
6681
</Button>
6782
</div>
6883
<script>
@@ -75,32 +90,123 @@
7590
],
7691
function (ui, Tip, TipLayer) {
7792
var controls = ui.init();
78-
var tip = controls[0];
79-
80-
var onceNotice = TipLayer.onceNotice({
81-
content: '你知道了吗知道了吗知道了吗？',
82-
targetDOM: 'tip-layer-label'
93+
/**
94+
* 场景1：over
95+
*/
96+
var tipLayer1 = ui.create('TipLayer', {
97+
title: 'over模式弹层',
98+
content: 'over模式下的交互是：<br>'
99+
+ '鼠标划过目标元素，弹层出现；鼠标脱离目标元素弹层消失'
83100
});
101+
tipLayer1.appendTo(document.body)
102+
tipLayer1.render();
84103

85-
var tipLayer = ui.create('TipLayer', {
86-
title: '最普通的提示',
87-
content: '随便提示一下随便提示一下随便提示一下'
88-
});
89-
tipLayer.appendTo(document.body)
90-
tipLayer.render();
91-
tipLayer.attachTo({
104+
tipLayer1.attachTo({
92105
targetControl: 'control-tip',
93106
showMode: 'over',
94107
delayTime: 800,
95-
positionOpt: { top: 'top', right: 'left' }
108+
positionOpt: {top: 'top', right: 'left'}
96109
});
97110

98-
tipLayer.attachTo({
111+
112+
/**
113+
* 场景2：click
114+
*/
115+
var tipLayer2 = ui.create('TipLayer', {
116+
title: 'click模式弹层',
117+
content: 'click模式下的交互是：<br>'
118+
+ '点击目标元素，弹层出现；点击layer及目标元素以外区域，弹层消失'
119+
});
120+
tipLayer2.appendTo(document.body)
121+
tipLayer2.render();
122+
123+
tipLayer2.attachTo({
99124
targetControl: 'control-tip-2',
100125
showMode: 'click',
101126
delayTime: 300,
102127
positionOpt: { top: 'top', right: 'left' }
103-
})
128+
});
129+
130+
131+
/**
132+
* 场景3：auto
133+
*/
134+
var tipLayer3 = ui.create('TipLayer', {
135+
title: 'auto模式弹层',
136+
content: 'auto模式下的交互是：<br>'
137+
+ '弹层自动出现；并根据用户配置的showDuration决定：<br>'
138+
+ '1. 经过showDuration的时间后自动关闭<br>'
139+
+ '2. 点击外部执行关闭 '
140+
+ '之后，点击目标元素，展示弹层'
141+
});
142+
tipLayer3.appendTo(document.body)
143+
tipLayer3.render();
144+
145+
tipLayer3.attachTo({
146+
targetControl: 'control-tip-3',
147+
showMode: 'over',
148+
// showDuration: 3600,
149+
positionOpt: {top: 'top', right: 'left'}
150+
});
151+
152+
/**
153+
* 场景4：把一个已经生成的TipLayer共享给另一个元素
154+
*/
155+
tipLayer3.attachTo({
156+
targetControl: 'control-tip-3-1',
157+
showMode: 'over',
158+
positionOpt: {top: 'top', right: 'left'}
159+
});
160+
161+
// 共享给好多好多元素
162+
var container = document.getElementById('container');
163+
var i = 20;
164+
while (i > 0) {
165+
var dom = document.createElement('div');
166+
dom.id = i;
167+
dom.setAttribute('class', 'ui-button');
168+
container.appendChild(dom);
169+
tipLayer3.attachTo({
170+
targetDOM: dom,
171+
showMode: 'over',
172+
delayTime: 800,
173+
positionOpt: {top: 'top', right: 'left'}
174+
});
175+
i--;
176+
}
177+
178+
/**
179+
* 场景4：manual
180+
*/
181+
var tipLayer4 = ui.create('TipLayer', {
182+
title: 'manual模式弹层',
183+
content: 'manual模式下的交互是：随你自己搞'
184+
});
185+
tipLayer4.appendTo(document.body)
186+
tipLayer4.render();
187+
188+
ui.get('control-tip-4').on(
189+
'click',
190+
function () {
191+
tipLayer4.show(this.main, {top: 'top', right: 'left'});
192+
}
193+
);
194+
195+
tipLayer4.helper.addDOMEvent(
196+
ui.get('control-tip-4').main,
197+
'mouseout',
198+
function () {
199+
this.hide();
200+
}
201+
);
202+
203+
var tip = controls[0];
204+
205+
206+
var onceNotice = TipLayer.onceNotice({
207+
content: '你知道了吗知道了吗知道了吗？',
208+
targetDOM: 'tip-layer-label'
209+
});
104210
}
105211
)
106212
</script>

‎src/Tip.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ define(
132132
tipLayer.render();
133133

134134
var attachOptions = {
135-
showMode: this.mode,
135+
showMode: this.showMode,
136136
delayTime: this.delayTime,
137137
targetControl: this,
138138
positionOpt: {top: 'top', right: 'left'}

0 commit comments

Comments
 (0)