Как добавить анимацию в эту функцию показа / скрытия JavaScript? - PullRequest
Новая
       21

Как добавить анимацию в эту функцию показа / скрытия JavaScript?

0 голосов
/ 15 июля 2011

Я использую Javascript, чтобы показать / скрыть вложенный вид сетки (чтобы показать некоторые детали) внутри основного вида сетки так:

Gridview: 

<asp:GridView ID="GridView1" runat="server"   DataKeyNames="ResID" 
        onrowdatabound="GridView1_RowDataBound"  DataSourceID="SqlDataSource1" > 
        <Columns>
           <asp:TemplateField>
            <ItemTemplate>
            <a href="javascript:switchViews('div<%# Eval("ResID") %>', 'one');">Details</a>
                  </ItemTemplate>
          </asp:TemplateField>            

            <asp:BoundField DataField="Date" HeaderText="Date" DataFormatString="{0:M/d/yyyy}" SortExpression="Date" />
            <asp:BoundField DataField="Name"  HeaderText="Name" SortExpression="Name" />
            <asp:BoundField DataField="Contact"  HeaderText="Contact" SortExpression="Contact" />
            <asp:BoundField DataField="Response" HeaderText="Response" SortExpression="Response"/>
                      <asp:TemplateField>
                             <ItemTemplate>
                                       </td></tr>  
                                           <tr>    
                                              <td colspan="100%" style="padding-left: 25px;padding-top: 5px" >                     

                                     <div id="div<%# Eval("ResID") %>" style="display:none;  left: 30px;" >
                                           <!--nested Grid:-->
                                                  <asp:GridView ID="GridView2" runat="server"   AutoGenerateColumns="false"  DataKeyNames="ResID" >
                                                     <Columns>
                                                     <asp:BoundField DataField="iDate" DataFormatString="{0:M/d/yyyy}" HeaderText="iDate" HeaderStyle-Font-Bold="false"/>
                                                     <asp:BoundField DataField="iContact"  HeaderText="Contact" HeaderStyle-Font-Bold="false" />
                                                     <asp:BoundField DataField="iComments" HeaderText="Comments"  HeaderStyle-Font-Bold="false" />
                                                  </Columns>
                                                 </asp:GridView>
                                               <p></p>
                                 </div>

                                     </td>
                                     </tr>                    
                             </ItemTemplate>
                        </asp:TemplateField>

     </Columns>

и Javascript: 

<script type="text/javascript">

function switchViews(obj, row) {

var div = document.getElementById(obj);

if (div.style.display == "none")
     {
         div.style.display = "inline";

     }
     else
      {
         div.style.display = "none";
      }
 }
</script>

Итак, это работает нормально, но какой код необходим для добавления анимации в show / hide для более плавного эффекта? Спасибо!

Ответы [ 2 ]

0 голосов
/ 15 июля 2011

Я добавил 2 класса в вашу таблицу, так как проще применить код на стороне клиента ко всем элементам одновременно, основываясь на имени класса.

Вот код JavaScript / jQuery для скрытия / отображения Div и изменения текста с «Показать подробности» на «Скрыть подробности». 

<script type="text/javascript">
    $(document).ready(function () {
        $('.showDetails').click(function () {
            // Show Details DIV
            $(this).closest('tr').find('.details').toggle('fast');
            // Return false to disable default postback on click of a <a> element
            return false;
        }).toggle(
            function () {
                // Trigger text/html to toggle to when hiding.
                $(this).html('Hide Details').stop();
            },
            function () {
                // Trigger text/html to toggle to when showing.
                $(this).html('Show Details').stop();
            }
        );
    });
</script>

Вот ваш модифицированный GridView с добавленными классами. Похоже, что ничего не делается с идентификатором на /, поэтому вы можете удалить их, если они не нужны для чего-то другого. 

<asp:GridView ID="GridView1" runat="server" DataKeyNames="ResID" OnRowDataBound="GridView1_RowDataBound" DataSourceID="SqlDataSource1">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <a class="showDetails" href="javascript:switchViews('div<%# Eval("ResID") %>', 'one');">Show Details</a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Date" HeaderText="Date" DataFormatString="{0:M/d/yyyy}" SortExpression="Date" />
        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
        <asp:BoundField DataField="Contact" HeaderText="Contact" SortExpression="Contact" />
        <asp:BoundField DataField="Response" HeaderText="Response" SortExpression="Response" />
        <asp:TemplateField>
            <ItemTemplate>
                </td></tr>
                <tr>
                    <td colspan="100%" style="padding-left: 25px; padding-top: 5px">
                        <div class="details" id="div<%# Eval("ResID") %>" style="display: none; left: 30px;">
                            <!--nested Grid:-->
                            <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" DataKeyNames="ResID">
                                <Columns>
                                    <asp:BoundField DataField="iDate" DataFormatString="{0:M/d/yyyy}" HeaderText="iDate" HeaderStyle-Font-Bold="false" />
                                    <asp:BoundField DataField="iContact" HeaderText="Contact" HeaderStyle-Font-Bold="false" />
                                    <asp:BoundField DataField="iComments" HeaderText="Comments" HeaderStyle-Font-Bold="false" />
                                </Columns>
                            </asp:GridView>
                            <p>
                            </p>
                        </div>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
0 голосов
/ 15 июля 2011

jQuery - ваш друг: http://api.jquery.com/animate/

в основном (с установленным jQuery) вы бы сделали что-то вроде: 

function switchViews(obj, row) {
    var div = $('#'+obj),
        targetOpacity = div.css('opacity') === '1' ? 0 : 1,
        startOpacity = +!targetOpacity;
    div
    .stop()
    .css('opacity', startOpacity)
    .animate({opacity: targetOpacity}, 1000);
}
...