2013-11-07 5 views
-3

Можно ли сделать ползунок AJAX с помощью вызова JQuery AJAX на сервер ASP.NET,JQuery AJAX вызова с ползунком

это HTML:

<ul id="comments" runat="server"> 

</ul> 

Я не хочу, чтобы пользователь публикует комментарий и видит слайд в лиге на своей собственной странице. Слайд должен быть виден всем, кто просматривает веб-сайт.

Спасибо.

ответ

1

Это можно решить с помощью небольшого количества JS и некоторых CSS.
Изменение
comments.InnerHtml += "<li>" + dr.GetString(0) + "</li>";
в
comments.InnerHtml += "<li class=\"hide\">" + dr.GetString(0) + "</li>";

вместе с:

$(document).ready(function() { 
    $.ajax({ 
     url: 'WebForm1.aspx', 
     success: function (data) { 
      $('#comments').html(data); 
      updateC(); 
     } 
    }); 
}); 
function updateC(){ 
    var d = document.getElementsByClassName('hide'); 
    if(d.length > 1){ 
     for(var i = 0; i < d.length; i++){ 
      d[i].setAttribute('class',''); 
     } 
    } 
} 

Затем добавьте style тег со следующими внутри:

.hide{ 
    height:0px; 
    overflow:hidden; 
    -webkit-animation: slide 0.5s forwards;  /*'0.5s' is the animation time*/ 
    -webkit-animation-delay: 0.5s;    /*Delay before the animation*/ 
    animation: slide 0.5s forwards;    /*'0.5s' is the animation time*/ 
    animation-delay: 0.5s;      /*Delay before the animation*/ 
} 
@-webkit-keyframes slide{ 
    100% { height: 20px; }      /*Set 20px to the line-height*/ 
} 
@keyframes slide{ 
    100% { height: 20px; }      /*Set 20px to the line-height*/ 
} 

Конечно, вы можете изменить CSS в зависимости от del ays, настройки времени и высоты, но это эшафот, который отлично работает.

+0

Теги HTML 'li' не будут классифицироваться как таковые, пока класс' hide' не будет удален. Если вам не нужны точки в стороне от отображаемого списка, вам не потребуется удалить класс 'hide', а редактирование JS (исключая' class = \ "hide \" 'change) может быть отброшены и будут функционировать по назначению. – Lugia101101

Смежные вопросы