Store AJAX loading demo

one/templates/base.html

@@ -28,6 +28,15 @@ $(function(){
             });
             });
         }
         }
     })
     })
+    $('#load-more-files').click(function(){
+        $('.actions', this).show();
+        var that=this;
+        setTimeout(function(){
+            $(that).prev('li').slideDown(500,function(){
+                $('.actions', that).hide();
+            });
+        },2000);
+    })
 })
 })
         </script>
         </script>
 
 

one/templates/home.html

@@ -4,7 +4,7 @@
 {% block content %}
 {% block content %}
 <div class="boxes">
 <div class="boxes">
         <div class="contentblock" id="state">
         <div class="contentblock" id="state">
-            <h2>Új virtuális gép indítása</h2>
+            <h2>Virtuális gépek</h2>
             <div class="content">
             <div class="content">
 {% for m in templates %}
 {% for m in templates %}
 <form method="POST" action="/vm/new/{{m.pk}}/">{% csrf_token %}
 <form method="POST" action="/vm/new/{{m.pk}}/">{% csrf_token %}
@@ -26,8 +26,6 @@
     {% endfor %}
     {% endfor %}
 </div>
 </div>
 <div class="boxes">
 <div class="boxes">
-
-
     <div class="contentblock">
     <div class="contentblock">
         <h2>
         <h2>
             Adattár
             Adattár
@@ -96,9 +94,35 @@
                         </ul>
                         </ul>
                     </div>
                     </div>
                 </li>
                 </li>
-                            <li class="file-details wm">
+                <li class="wm" style="display: none">
+                    <div class="summary">
+                        <div class="name filetype-text">matlab_serial.txt</div>
+                        <div class="actions">
+                            <a href="#"><img src="../../one/static/icons/pencil.png" alt="rename" /></a>
+                            <a href="#"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a>
+                            <a href="#"><img src="../../one/static/icons/download-cloud.png" alt="download" /></a>
+                        </div>
+                        <div class="info">358 Kb</div>
+                        <div class="clear"></div>
+                    </div>
+                    <div class="details">
+                        <h3>Részletek</h3>
+                        <ul>
+                            <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
+                            <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
+                            <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
+                            <li>Típus: <span class="value">text/plain</span></li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="file-details wm" id="load-more-files">
                     <div class="summary">
                     <div class="summary">
-                                    <div class="name filetype-more">Mutasd a régebbi fájlokat!</div>
+                        <div class="name filetype-more">
+                            Mutasd a régebbi fájlokat! 
+                        </div>
+                        <div class="actions" style="text-align: right; display: none">
+                            <img src="../../one/static/load-3.gif" alt="loading" />
+                        </div>
                         <div class="clear"></div>
                         <div class="clear"></div>
                     </div>
                     </div>
                 </li>
                 </li>
@@ -111,6 +135,5 @@
             </ul>
             </ul>
         </div>
         </div>
     </div>
     </div>
-
 </div>
 </div>
 {% endblock %}
 {% endblock %}