Я пытаюсь добавить строку в таблицу и показать слайд этой строки, однако функция slidedown, кажется, добавляет отображение: стиль блока в строку таблицы, которая испортит макет.
Любые идеи, как обойти это?
Здесь код:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
Анимация не поддерживается в строках таблицы.
От "Learning jQuery" от Chaffer и Swedberg
Табличные строки, представленные конкретными препятствия для анимации, поскольку браузеры используйте разные значения (таблица-строка и блок) для их видимого отображения имущество. Параметры .hide() и .show() методы, без анимации, всегда безопасный для использования со строками таблицы. Начиная с jQuery версии 1.1.3,.fadeIn() и .fadeOut() также можно использовать.
Вы можете обернуть содержимое td в div и использовать это slideDown. Вам нужно решить, стоит ли анимация дополнительной разметке.
Я просто обертываю tr динамически, а затем удаляю его, как только slideUp/slideDown завершается. Это довольно небольшие накладные расходы, добавляющие и удаляющие один или несколько тегов, а затем удаление их после завершения анимации, я не вижу никакого заметного отставания при этом.
SlideUp
$('#my_table > tbody > tr.my_row')
.find('td')
.wrapInner('<div style="display: block;" />')
.parent()
.find('td > div')
.slideUp(700, function(){
$(this).parent().parent().remove();
});
SlideDown:
$('#my_table > tbody > tr.my_row')
.find('td')
.wrapInner('<div style="display: none;" />')
.parent()
.find('td > div')
.slideDown(700, function(){
var $set = $(this);
$set.replaceWith($set.contents());
});
Я должен отдать дань уважения fletchzone.com, когда я взял его плагин и убрал его обратно к вышеупомянутому, приветствует помощника.
Вот плагин, который я написал для этого, он берет немного от реализации Fletch, но мой используется исключительно для перемещения строки вверх или вниз (без вставки строк).
(function($) {
var sR = {
defaults: {
slideSpeed: 400,
easing: false,
callback: false
},
thisCallArgs: {
slideSpeed: 400,
easing: false,
callback: false
},
methods: {
up: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('<div class="slideRowUp" />');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({
paddingTop: '0px',
paddingBottom: '0px'},{
complete: function () {
$(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
$(this).parent().css({'display':'none'});
$(this).css({'padding': currentPadding});
}});
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
},
down: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
$cellContentWrappers = $cells.find('.slideRowDown');
$(this).show();
$cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
}
};
$.fn.slideRow = function(method,arg1,arg2,arg3) {
if(typeof method != 'undefined') {
if(sR.methods[method]) {
return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1));
}
}
};
})(jQuery);
Основное использование:
$('#row_id').slideRow('down');
$('#row_id').slideRow('up');
Пропустить опции слайда как отдельные аргументы:
$('#row_id').slideRow('down', 500); //slide speed
$('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // slide speed and callback function
$('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); slide speed, easing option and callback function
$('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); //options passed as object
В принципе, для анимации слайд-вниз подключаемый модуль обертывает содержимое ячеек в DIVs, анимирует их, затем удаляет их и наоборот для слайд-шоу (с некоторыми дополнительными шагами, чтобы избавиться от дополнения ячейки). Он также возвращает объект, на который вы его вызвали, так что вы можете цеплять такие методы:
$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red
Надеюсь, это поможет кому-то.
Вы можете попробовать обернуть содержимое строки в <span>, а ваш селектор будет $('#detailed_edit_row span'); - немного хакерским, но я просто протестировал его, и он работает. Я также попробовал предложение table-row выше, и он, похоже, не работал.
update. Я столкнулся с этой проблемой, и из всех указаний jQuery нужен объект, который он выполняет slideDown, чтобы быть блочным элементом. Итак, нет кубиков. Мне удалось создать таблицу, в которой я использовал slideDown в ячейке, и это никак не повлияло на макет, поэтому я не уверен, как настроен ваш. Я думаю, что ваше единственное решение состоит в том, чтобы реорганизовать таблицу таким образом, чтобы это нормально, когда эта ячейка была блоком, или просто .show(); чертовой штукой. Удачи.
Я немного отстаю от ответа на это, но нашел способ сделать это:)
function eventinfo(id) {
tr = document.getElementById("ei"+id);
div = document.getElementById("d"+id);
if (tr.style.display == "none") {
tr.style.display="table-row";
$(div).slideDown('fast');
} else {
$(div).slideUp('fast');
setTimeout(function(){tr.style.display="none";}, 200);
}
}
Я просто помещаю элемент div внутри тегов данных таблицы. когда он установлен видимым, по мере расширения div, вся строка спускается. затем скажите, чтобы он снова затухал (затем тайм-аут, чтобы вы увидели эффект), прежде чем снова спрятать строку таблицы:)
Надеюсь, это поможет кому-то!
Выберите содержимое строки следующим образом:
$(row).contents().slideDown();
. contents() - Получите дочерние элементы каждого элемента в наборе согласованных элементов, включая текстовые и комментарии узлов.
Я новичок в этом сообществе. Pl rate мой ответ.:)
Вы можете найти, что это хорошо работает.
Im имеет таблицу (<table style='display: none;'></table>)
внутри содержимого <tr class='dummyRow' style='display: none;'><td></td></tr>.
Сдвиньте строку вниз.
$('.dummyRow').show().find("table").slideDown();
Примечание: строка и содержимое внутри строки (здесь table) должны быть скрыты перед началом анимации.
Чтобы скопировать строку...
$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});
Второй параметр (функция) - это обратный вызов.
Простой!!
Я обошел это, используя элементы td в строке:
$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);
Анимация самой строки вызывает странное поведение, в основном проблемы с асинхронной анимацией.
Для приведенного выше кода я выделяю строку, которая перетаскивается и опускается в таблице, чтобы подчеркнуть, что обновление выполнено успешно. Надеюсь, это поможет кому-то.
Я хочу скопировать весь тём, и я справился с этой проблемой, объединив эффекты затухания и слайда.
Я сделал это в 3 этапа (2-й и 3-й шаги заменяются, если вы хотите сдвинуться вниз или вверх)
Пример slideUp:
tbody.css('height', tbody.css('height'));
tbody.find('td, th').fadeOut(200, function(){
tbody.slideUp(300)
});
У меня были проблемы со всеми другими предлагаемыми решениями, но в итоге я сделал эту простую вещь, которая была гладкой, как масло.
Настройте свой HTML так:
<tr id=row1 style='height:0px'><td>
<div id=div1 style='display:none'>
Hidden row content goes here
</div>
</td></tr>
Затем настройте свой javascript следующим образом:
function toggleRow(rowid){
var row = document.getElementById("row" + rowid)
if(row.style.height == "0px"){
$('#div' + rowid).slideDown('fast');
row.style.height = "1px";
}else{
$('#div' + rowid).slideUp('fast');
row.style.height = "0px";
}
}
В принципе, сделайте "невидимую" строку 0px высокой, с div внутри.
Используйте анимацию в div (а не в строке), а затем установите высоту строки в 1px.
Чтобы снова скрыть строку, используйте противоположную анимацию в div и установите высоту строки обратно на 0px.
Мне понравился плагин, который написал и использовал Винни. Но в случае столов внутри скользящей строки (tr/td) строки вложенной таблицы всегда скрыты даже после сдвига. Поэтому я сделал быстрый и простой взлом в плагине, чтобы не скрывать строки вложенной таблицы. Просто измените следующую строку
var $cells = $(this).find('td');
к
var $cells = $(this).find('> td');
который обнаруживает только ближайшие tds не вложенные. Надеюсь, это поможет кому-то использовать плагин и иметь вложенные таблицы.
Я использовал приведенные здесь идеи и столкнулся с некоторыми проблемами. Я исправил их все и имел гладкий однострочный вкладыш, который хотел бы поделиться.
$('#row_to_slideup').find('> td').css({'height':'0px'}).wrapInner('<div style=\"display:block;\" />').parent().find('td > div').slideUp('slow', function() {$(this).parent().parent().remove();});
Он использует css для элемента td. Он уменьшает высоту до 0px. Таким образом, имеет значение только высота содержимого только что созданной div-обертки внутри каждого элемента td.
SlideUp работает медленно. Если вы сделаете это еще медленнее, вы можете понять какой-то сбой. Небольшой прыжок в начале. Это связано с упомянутой установкой css. Но без этих настроек строка не будет уменьшаться по высоте. Только его содержимое было бы.
В конце элемент tr удаляется.
Вся строка содержит только JQuery и собственный Javascript.
Надеюсь, что это поможет.
Я установил таблицу со скрытыми строками, которые вставляются и выходят из вида при щелчке по строке.
$('. tr-show-sub'). click (function (e) {
var elOne = $(this);
$ ('. tr-show-sub'). Каждый (функция (ключ, значение) {
var elTwoe = $(this);
if (elOne.get(0)! == elTwoe.get(0)) {
if ($ (this).next('. tr-sub'). hasClass ('tr-sub-shown')) {
elTwoe.next( 'TR-суб.) removeClass (' TR-суб-показано.');
. ElTwoe.next( 'тр') найти ( '' тд) найти ( 'DIV') slideUp()..;
elTwoe.next( 'тр') найти ( 'тд') slideUp()..;
}
}
if (elOne.get(0) === elTwoe.get(0)) {
if (elOne.next('. tr-sub'). hasClass ('tr-sub-shown')) {
elOne.next( 'TR-суб.) removeClass (' TR-суб-показано.');
. ElOne.next( 'тр') найти ( '' тд) найти ( 'DIV') slideUp()..;
elOne.next( 'тр') найти ( 'тд') slideUp()..;
} else {
elOne.next( 'TR-суб.) addClass (' TR-суб-показано.');
elOne.next( 'тр') найти ( 'тд') slideDown()..;
. ElOne.next( 'тр') найти ( '' тд) найти ( 'DIV') slideDown()..;
}
}
})
});Код>
body {
background: #eee;
}
.wrapper {
margin: auto;
ширина: 50%;
padding: 10px;
margin-top: 10%;
}
Таблица {
фон: белый;
ширина: 100%;
}
table th {
фон: серый;
text-align: left;
}
table th, td {
border-bottom: 1px solid lightgray;
padding: 5px;
}
table.tr-show-sub {
фон: #EAEAEA;
курсор: указатель;
}
table.tr-sub td {
display: none;
}
table.tr-sub td.div-sub {
display: none;
}Код> < script src= "https://code.jquery.com/jquery-3.2.1.js" > </сценарий >
< div class= "обертка" >
< table cellspacing = "0" cellpadding = "3" >
<THEAD>
< tr class= "table" >
<th> col 1 </th>
<th> col 2 </th>
<th> col 3 </th>
& Л;/тр >
</THEAD>
<TBODY>
< tr class= "tr-show-sub" >
<td> col 1 </td>
<td> col 2 </td>
<td> col 3 </td>
& Л;/тр >
< tr class= "tr-sub" >
< td colspan = "5" < div class= "div-sub" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor сидит amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Проин дапибус нибх. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh в semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Нам в диам. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Маурис неспокойный нуль не сусипит cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem.
</дел > </тд >
& Л;/тр >
< tr class= "tr-show-sub" >
<td> col 1 </td>
<td> col 2 </td>
<td> col 3 </td>
& Л;/тр >
< tr class= "tr-sub" >
< td colspan = "5" < div class= "div-sub" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor сидит amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Проин дапибус нибх. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh в semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Нам в диам. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Маурис неспокойный нуль не сусипит cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem.
</дел > </тд >
& Л;/тр >
< & тр GT;
<td> col 1 </td>
<td> col 2 </td>
<td> col 3 </td>
& Л;/тр >
</TBODY>
</таблица >
</DIV>код> Если вам нужно одновременно сдвигать и стирать строку таблицы, попробуйте использовать следующие функции:
jQuery.fn.prepareTableRowForSliding = function() {
$tr = this;
$tr.children('td').wrapInner('<div style="display: none;" />');
return $tr;
};
jQuery.fn.slideFadeTableRow = function(speed, easing, callback) {
$tr = this;
if ($tr.is(':hidden')) {
$tr.show().find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
} else {
$tr.find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function(){
$tr.hide();
callback();
});
}
return $tr;
};
$(document).ready(function(){
$('tr.special').hide().prepareTableRowForSliding();
$('a.toggle').toggle(function(){
$button = $(this);
$tr = $button.closest('tr.special'); //this will be specific to your situation
$tr.slideFadeTableRow(300, 'swing', function(){
$button.text('Hide table row');
});
}, function(){
$button = $(this);
$tr = $button.closest('tr.special'); //this will be specific to your situation
$tr.slideFadeTableRow(300, 'swing', function(){
$button.text('Display table row');
});
});
});
function hideTr(tr) {
tr.find('td').wrapInner('<div style="display: block;" />').parent().find('td > div').slideUp(50, function () {
tr.hide();
var $set = jQuery(this);
$set.replaceWith($set.contents());
});
}
function showTr(tr) {
tr.show()
tr.find('td').wrapInner('<div style="display: none;" />').parent().find('td > div').slideDown(50, function() {
var $set = jQuery(this);
$set.replaceWith($set.contents());
});
}
вы можете использовать эти методы, например:
jQuery("[data-toggle-tr-trigger]").click(function() {
var $tr = jQuery(this).parents(trClass).nextUntil(trClass);
if($tr.is(':hidden')) {
showTr($tr);
} else {
hideTr($tr);
}
});
Я могу сделать, если вы установили td в строке для отображения ни одного одновременно с началом анимации высоты в строке
tbody tr{
min-height: 50px;
}
tbody tr.ng-hide td{
display: none;
}
tr.hide-line{
-moz-transition: .4s linear all;
-o-transition: .4s linear all;
-webkit-transition: .4s linear all;
transition: .4s linear all;
height: 50px;
overflow: hidden;
&.ng-hide { //angularJs specific
height: 0;
min-height: 0;
}
}
http://jsfiddle.net/PvwfK/136/
<table cellspacing='0' cellpadding='0' class='table01' id='form_table' style='width:100%;'>
<tr>
<td style='cursor:pointer; width:20%; text-align:left;' id='header'>
<label style='cursor:pointer;'> <b id='header01'>▲ Customer Details</b>
</label>
</td>
</tr>
<tr>
<td style='widtd:20%; text-align:left;'>
<div id='content' class='content01'>
<table cellspacing='0' cellpadding='0' id='form_table'>
<tr>
<td>A/C ID</td>
<td>:</td>
<td>3000/A01</td>
</tr>
<tr>
<td>A/C ID</td>
<td>:</td>
<td>3000/A01</td>
</tr>
<tr>
<td>A/C ID</td>
<td>:</td>
<td>3000/A01</td>
</tr>
</table>
</div>
</td>
</tr>
$(function () {
$(".table01 td").on("click", function () {
var $rows = $('.content01');
if ($(".content01:first").is(":hidden")) {
$("#header01").text("▲ Customer Details");
$(".content01:first").slideDown();
} else {
$("#header01").text("▼ Customer Details");
$(".content01:first").slideUp();
}
});
});
Этот код работает!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title></title>
<script>
function addRow() {
$('.displaynone').show();
$('.displaynone td')
.wrapInner('<div class="innerDiv" style="height:0" />');
$('div').animate({"height":"20px"});
}
</script>
<style>
.mycolumn{border: 1px solid black;}
.displaynone{display: none;}
</style>
</head>
<body>
<table align="center" width="50%">
<tr>
<td class="mycolumn">Row 1</td>
</tr>
<tr>
<td class="mycolumn">Row 2</td>
</tr>
<tr class="displaynone">
<td class="mycolumn">Row 3</td>
</tr>
<tr>
<td class="mycolumn">Row 4</td>
</tr>
</table>
<br>
<button onclick="addRow();">add</button>
</body>
</html>
Вилка, предлагаемая Vinny, действительно близка, но я обнаружил и исправил пару небольших проблем.
Для табличных ячеек с большим количеством контента (например, вложенной таблицы с большим количеством строк), вызывая метод slideRow ('вверх'), независимо от установленного значения slideSpeed, он сразу же скроет представление строки поскольку анимация дополнений была выполнена. Я исправил его, чтобы анимация дополнений не срабатывала до тех пор, пока не будет применен метод slideUp() при завершении.
(function($){
var sR = {
defaults: {
slideSpeed: 400
, easing: false
, callback: false
}
, thisCallArgs:{
slideSpeed: 400
, easing: false
, callback: false
}
, methods:{
up: function(arg1, arg2, arg3){
if(typeof arg1 == 'object'){
for(p in arg1){
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined'){
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function'){
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).children('td, th');
$cells.wrapInner('<div class="slideRowUp" />');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function(){
$(this).parent().animate({ paddingTop: '0px', paddingBottom: '0px' }, {
complete: function(){
$(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
$(this).parent().css({ 'display': 'none' });
$(this).css({ 'padding': currentPadding });
}
});
});
var wait = setInterval(function(){
if($cellContentWrappers.is(':animated') === false){
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function'){
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
, down: function (arg1, arg2, arg3){
if(typeof arg1 == 'object'){
for(p in arg1){
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined'){
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function'){
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).children('td, th');
$cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
$cellContentWrappers = $cells.find('.slideRowDown');
$(this).show();
$cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });
var wait = setInterval(function(){
if($cellContentWrappers.is(':animated') === false){
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function'){
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
}
};
$.fn.slideRow = function(method, arg1, arg2, arg3){
if(typeof method != 'undefined'){
if(sR.methods[method]){
return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
}
};
})(jQuery);
Я хотел бы добавить комментарий к сообщению #Vinny, но у меня нет ответа, поэтому вы должны отправить ответ...
Обнаружена ошибка с вашим плагином - когда вы просто передаете объект с аргументами, они переписываются, если другие аргументы не передаются. Легко разрешается путем изменения порядка обработки аргументов, кода ниже. Я также добавил параметр для уничтожения строки после закрытия (только потому, что мне это нужно!): $('# Row_id'). SlideRow ('up', true);//уничтожает строку
(function ($) {
var sR = {
defaults: {
slideSpeed: 400,
easing: false,
callback: false
},
thisCallArgs: {
slideSpeed: 400,
easing: false,
callback: false,
destroyAfterUp: false
},
methods: {
up: function (arg1, arg2, arg3) {
if (typeof arg2 == 'string') {
sR.thisCallArgs.easing = arg2;
} else if (typeof arg2 == 'function') {
sR.thisCallArgs.callback = arg2;
} else if (typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if (typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
} else if (typeof arg3 == 'undefined' && typeof arg2 != 'function') {
sR.thisCallArgs.callback = sR.defaults.callback;
}
if (typeof arg1 == 'object') {
for (p in arg1) {
sR.thisCallArgs[p] = arg1[p];
}
} else if (typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
} else if (typeof arg1 != 'undefined' && (typeof arg1 == 'boolean')) {
sR.thisCallArgs.destroyAfterUp = arg1;
} else {
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
var $row = $(this);
var $cells = $row.children('th, td');
$cells.wrapInner('<div class="slideRowUp" />');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing).parent().animate({
paddingTop: '0px',
paddingBottom: '0px'
}, {
complete: function () {
$(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
$(this).parent().css({ 'display': 'none' });
$(this).css({ 'padding': currentPadding });
}
});
var wait = setInterval(function () {
if ($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if (sR.thisCallArgs.destroyAfterUp)
{
$row.replaceWith('');
}
if (typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
},
down: function (arg1, arg2, arg3) {
if (typeof arg2 == 'string') {
sR.thisCallArgs.easing = arg2;
} else if (typeof arg2 == 'function') {
sR.thisCallArgs.callback = arg2;
} else if (typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if (typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
} else if (typeof arg3 == 'undefined' && typeof arg2 != 'function') {
sR.thisCallArgs.callback = sR.defaults.callback;
}
if (typeof arg1 == 'object') {
for (p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
} else if (typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
} else {
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
var $cells = $(this).children('th, td');
$cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
$cellContentWrappers = $cells.find('.slideRowDown');
$(this).show();
$cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function () { $(this).replaceWith($(this).contents()); });
var wait = setInterval(function () {
if ($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if (typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
}
};
$.fn.slideRow = function (method, arg1, arg2, arg3) {
if (typeof method != 'undefined') {
if (sR.methods[method]) {
return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
}
};
})(jQuery);
Быстрое/легкое исправление:
Используйте JQuery . toggle(), чтобы показать/скрыть строки onclick из строки или Якоря.
Функция должна быть записана для идентификации строк, которые вы хотели бы скрывать, но toggle создает нужные функции.