我如何fateOut动态创建表行？ [英] How do I fateOut dynamically created table rows?
问题描述
我使用SignalR向客户端发送通知并使用jQuery创建通知消息。这是所有javascript的转储，所以你可以清楚地看到我在做什么。我已经包含了一个注释掉的原型，以防你想在不设置SignalR事件的情况下自己尝试代码：
<脚本类型= text / javascript>
$（ function （）{
var connection = $ .connection.subscriptionsHub ，
$ notesTable = $（' ＃NotesTable'），
$ notesTableBody = $ notesTable.find（' tbody'），
$ rowTemplate = < tr id ={ID}url ={Url}>< td>< img src = /Resources/images/{Severity}.jpg/>< / td>< td> {Item}< / td>< td> {Info}< / td>< td> {Time} < / td>< td class =close> x< / td>< / tr>';
function severityNumerator（严重性）{
如果（ isNaN （严重性））{
switch （sev erity.toLowerCase）{
case warning ：
return 1 ;
case danger ：
return 2 ;
case 问题 ：
return 3 ;
case info ：
return 4 ;
默认：
返回 4 ;
}
} 其他 返回严重性;
}
function formatData（fdata）{
return $。 extend（fdata，{
ID：fdata.Guid，
Item：fdata.ItemType，
Info：fdata.Information，
Time：fdata.NoteTime，
Severity ：severityNumerator（fdata.Severity），
Url：fdata.ItemUrl
}）;
}
function setRowBindings（）{
var table = $（ table [id ='NotesTable']）;
$（表）.on（' 点击'，' tr> td：not（.close）'， function （）{
var row = $（ this ）。parent（）;
var url = $（row）.attr（' url'）;
window 。 location .href = url;
}）;
$（table）.on（' click'，' tr> td.close'， function （）{
var row = $（ this ）。parent（）;
$（row）。 hide（）;
$ notesTableBody.remove（$（row））;
}）;
}
$ .extend（connection.client，{
newNotification： function （通知）{
var ndata = formatData（通知）;
var $ row = $ rowTemplate.supplant（ ndata）;
$ notesTableBody.append（$ row）;
setRowBindings（$ row）;
}
}）;
setRowBindings（）;
$ .connection.hub.start（）;
// 函数数据（guid，itemType，info，time，severity，url）{
// this.Guid = guid;
// this.ItemType = itemType;
// this.Info = info;
// this.Time = time;
// this.Severity = severity;
// this.Url = url;
// }
}）;
< / script>
< div class = subscribtions-notifier visible col-md-4>
< table id = NotesTable>
< tbody>
< / tbody >
< / table >
< / div >
< / pre >
我不喜欢我必须在桌面上设置行事件，但是修复了点击事件问题。
现在我的问题是我想在5秒后将每条通知消息发送到fadeOut。我将有一个table.hover事件来重置fadeOut计时器，但这不是问题。 如何在每个行创建后5秒内将每行都淡出？
如果行不是动态的，我会在以后执行此操作添加表：
$（行）.stop（）。延迟（ 5000 ）。fadeOut（ ）;
$（row）.hover（
function （）{
$（row）.stop（ true ， true ）。fadeIn（）;
}，
function （）{
$（row）.stop（ true ， true ）。延迟（ 5000 ）。fadeOut（）;
}）;
感谢任何帮助
谢谢
（ function （）{
var connection =
.connection.subscriptionsHub，
notesTable =
Hi,
I am using SignalR to send notifications to clients and using jQuery to create a notification message. Here is a dump of all the javascript involved so you can clearly see what I am doing. I have included a commented out prototype in case you want to try the code yourself without setting up SignalR events:
<script type="text/javascript">
$(function () {
var connection = $.connection.subscriptionsHub,
$notesTable = $('#NotesTable'),
$notesTableBody = $notesTable.find('tbody'),
$rowTemplate = '<tr id="{ID}" url="{Url}"><td><img src="/Resources/images/{Severity}.jpg" /></td><td>{Item}</td><td>{Info}</td><td>{Time}</td><td class="close">x</td></tr>';
function severityNumerator(severity) {
if (isNaN(severity)) {
switch (severity.toLowerCase) {
case "warning":
return 1;
case "danger":
return 2;
case "question":
return 3;
case "info":
return 4;
default:
return 4;
}
} else return severity;
}
function formatData(fdata) {
return $.extend(fdata, {
ID: fdata.Guid,
Item: fdata.ItemType,
Info: fdata.Information,
Time: fdata.NoteTime,
Severity: severityNumerator(fdata.Severity),
Url: fdata.ItemUrl
});
}
function setRowBindings() {
var table = $("table[id='NotesTable']");
$(table).on('click', 'tr>td:not(.close)', function() {
var row = $(this).parent();
var url = $(row).attr('url');
window.location.href = url;
});
$(table).on('click', 'tr>td.close', function() {
var row = $(this).parent();
$(row).hide();
$notesTableBody.remove($(row));
});
}
$.extend(connection.client, {
newNotification: function (notification) {
var ndata = formatData(notification);
var $row = $rowTemplate.supplant(ndata);
$notesTableBody.append($row);
setRowBindings($row);
}
});
setRowBindings();
$.connection.hub.start();
//function data(guid, itemType, info, time, severity, url) {
// this.Guid = guid;
// this.ItemType = itemType;
// this.Info = info;
// this.Time = time;
// this.Severity = severity;
// this.Url = url;
//}
});
</script>
<div class="subscribtions-notifier visible col-md-4">
<table id="NotesTable">
<tbody>
</tbody>
</table>
</div>
</pre>
I don't like that I have to set up the row events on the table, but that fixed the 'click' event issue.
Now my problem is that I want each notification message to fadeOut after 5 seconds. I will have a table.hover event to reset the fadeOut timer but that's not the issue. How can I get each row to fadeOut 5 seconds after it's been created?
If the rows were not dynamic, I would do this after adding the table:
$(row).stop().delay(5000).fadeOut();
$(row).hover(
function () {
$(row).stop(true, true).fadeIn();
},
function () {
$(row).stop(true, true).delay(5000).fadeOut();
});
Any help is appreciated
Thanks
(function () { var connection =
.connection.subscriptionsHub,
notesTable =
这篇关于我如何fateOut动态创建表行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
