* added refresh button to the dashboard.

examples/dashboard.html

@@ -88,15 +88,15 @@
   </nav>
   <article>
     <h1>Dashboard</h1>
-    <div class="segment" style='max-width: 1600px; width: inherit; padding: 80px 50px; background: #3280fc'>
+    <div class="segment" style='max-width: 1600px; width: inherit; padding: 80px 50px;'>
       <div id="dashboard" class="dashboard dashboard-draggable" data-height="300">
         <header></header>
         <section class='row'>
           <div class="col-md-4 col-sm-6">
-            <div class="panel">
+            <div class="panel" data-url='http://baidu.com'>
               <div class="panel-heading">
                 <div class="panel-actions">
-                  <button class="btn btn-mini"><i class="icon-refresh"></i></button>
+                  <button class="btn btn-mini refresh-panel"><i class="icon-refresh"></i></button>
                     <div class="dropdown">
                       <button role="button" class="btn btn-mini" data-toggle="dropdown"><span class="caret"></span></button>
                       <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
@@ -123,7 +123,7 @@
             </div>
           </div>
           <div class="col-md-4 col-sm-6">
-            <div class="panel">
+            <div class="panel" data-url='http://chanzhi.org'>
               <div class="panel-heading">
                 <div class="panel-actions">
                   <a href="#"><i class="icon-refresh"></i></a>
@@ -131,6 +131,7 @@
                       <a href='#' role="button" data-toggle="dropdown"><span class="caret"></span></a>
                       <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
                         <li><a href="#"><i class="icon-pencil"></i> 编辑</a></li>
+                        <li><a href="#" class='refresh-panel'><i class="icon-refresh"></i> 刷新</a></li>
                         <li><a href="#" class="remove-panel"><i class="icon-remove"></i> 移除</a></li>
                       </ul>
                     </div>

src/js/dashboard.js

@@ -41,6 +41,15 @@
         });
     };
 
+    Dashboard.prototype.handleRefreshEvent = function()
+    {
+        this.$.find('.refresh-panel').click(function()
+        {
+            var panel = $(this).closest('.panel');
+            refreshPanel(panel);
+        });
+    }
+
     Dashboard.prototype.handleDraggable = function()
     {
         var dashboard    = this.$;
@@ -59,6 +68,7 @@
             var panel     = $(this).closest('.panel');
             var row       = panel.closest('.row');
             var dPanel    = panel.clone().addClass('panel-dragging-shadow');
+            var dCol      = panel.parent().clone().addClass('panel-shadow-col');
             var pos       = panel.offset();
             var dPos      = dashboard.offset();
 
@@ -175,11 +185,37 @@
         });
     };
 
+    function refreshPanel(panel)
+    {
+        var url = panel.data('url');
+        if(!url) return;
+        panel.addClass('panel-loading').find('.panel-heading .icon-refresh,.panel-heading .icon-repeat').addClass('icon-spin');
+        $.ajax(
+        {
+            url: url,
+            dataType: 'html',
+        })
+        .done(function(data)
+        {
+            panel.find('.panel-body').html(data);
+        })
+        .fail(function()
+        {
+            panel.addClass('panel-error');
+        })
+        .always(function()
+        {
+            panel.removeClass('panel-loading');
+            panel.find('.panel-heading .icon-refresh,.panel-heading .icon-repeat').removeClass('icon-spin');
+        });
+    }
+
     Dashboard.prototype.init = function()
     {
         this.handlePanelHeight();
         this.handlePanelPadding();
         this.handleRemoveEvent();
+        this.handleRefreshEvent();
 
         if(this.draggable) this.handleDraggable();
 
@@ -196,6 +232,8 @@
             {
                 $this.attr('data-id', orderSeed);
             }
+
+            refreshPanel($this);
         });
     }
 

src/js/zui.js

@@ -1770,6 +1770,7 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
     };
 })(jQuery);
 
+
 /* Dashboard */
 +function($, window, document, Math)
 {
@@ -1813,6 +1814,15 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
         });
     };
 
+    Dashboard.prototype.handleRefreshEvent = function()
+    {
+        this.$.find('.refresh-panel').click(function()
+        {
+            var panel = $(this).closest('.panel');
+            refreshPanel(panel);
+        });
+    }
+
     Dashboard.prototype.handleDraggable = function()
     {
         var dashboard    = this.$;
@@ -1831,6 +1841,7 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
             var panel     = $(this).closest('.panel');
             var row       = panel.closest('.row');
             var dPanel    = panel.clone().addClass('panel-dragging-shadow');
+            var dCol      = panel.parent().clone().addClass('panel-shadow-col');
             var pos       = panel.offset();
             var dPos      = dashboard.offset();
 
@@ -1947,11 +1958,37 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
         });
     };
 
+    function refreshPanel(panel)
+    {
+        var url = panel.data('url');
+        if(!url) return;
+        panel.addClass('panel-loading').find('.panel-heading .icon-refresh,.panel-heading .icon-repeat').addClass('icon-spin');
+        $.ajax(
+        {
+            url: url,
+            dataType: 'html',
+        })
+        .done(function(data)
+        {
+            panel.find('.panel-body').html(data);
+        })
+        .fail(function()
+        {
+            panel.addClass('panel-error');
+        })
+        .always(function()
+        {
+            panel.removeClass('panel-loading');
+            panel.find('.panel-heading .icon-refresh,.panel-heading .icon-repeat').removeClass('icon-spin');
+        });
+    }
+
     Dashboard.prototype.init = function()
     {
         this.handlePanelHeight();
         this.handlePanelPadding();
         this.handleRemoveEvent();
+        this.handleRefreshEvent();
 
         if(this.draggable) this.handleDraggable();
 
@@ -1968,6 +2005,8 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
             {
                 $this.attr('data-id', orderSeed);
             }
+
+            refreshPanel($this);
         });
     }
 

src/less/views/dashboard.less

@@ -88,7 +88,7 @@
 
   .panel
   {
-    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
   }
 
   .panel-body
@@ -136,12 +136,12 @@
   {
     position: absolute;
     border: 2px solid rgba(255,255,255,0.9);
-    box-shadow: 2px 0 25px rgba(0,0,0,0.8)!important;
+    box-shadow: 1px 2px 15px rgba(0,0,0,0.5)!important;
     background: rgba(255,255,255,0.5);
 
     > * {.opacity(0.7);}
   }
 
-  .dragging-in:before {box-sizing: content-box; content:' '; display: block; position: absolute; left: -2px; top: -10px; width: 2px; height: 100%; background-color: rgba(255,255,255, 0.5); border: 1px solid #fff;}
+  .dragging-in:before {box-sizing: content-box; content:' '; display: block; position: absolute; left: -2px; top: -10px; width: 2px; height: 100%; background-color: rgba(0,0,0, 0.15); border: 1px solid #eee;}
   .dragging-in.dragging-col:before {display: none;}
 }