Bootstrap snippet: Refresh Widget

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: Refresh,Widget



<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <div class="container bootstrap snippet"> <!--refresh widget--> <div class="panel panel-info"> <div class="panel-heading"> <h1> <span class="glyphicon glyphicon-th"></span> <a class="refresh pull-right" href="#"><span class="fa fa-refresh"></span></a> <strong>Refresh Widget</strong> </h1> </div> <div class="panel-body panel-refresh"> <div class="refresh-container"><i class="refresh-spinner fa fa-spinner fa-spin fa-5x"></i></div> <h4>Refresh Me: Please click on the refresh button </h4> <div class="jumbotron"> This widget utilizes the simple <strong>$.refreshMe()</strong> plugin! </div> <div class="refresh-data"> This is the original data that will update upon refresh.. </div> </div> </div> <!--refresh widget--> </div>
.panel-refresh { height:250px; position:relative; } .refresh-container { position:absolute; top:0; right:0; background:rgba(200,200,200,0.25); width:100%; height:100%; display: none; text-align:center; z-index:4; } .refresh-spinner { padding: 30px; opacity: 0.8; }
$.fn.refreshMe = function(opts){ var $this = this, defaults = { ms:1500, started:function(){}, completed:function(){} }, settings = $.extend(defaults, opts); var panelToRefresh = $this.parents('.panel').find('.refresh-container'); var dataToRefresh = $this.parents('.panel').find('.refresh-data'); var ms = settings.ms; var started = settings.started; //function before timeout var completed = settings.completed; //function after timeout $this.click(function(){ $this.addClass("fa-spin"); panelToRefresh.show(); started(dataToRefresh); setTimeout(function(){ completed(dataToRefresh); panelToRefresh.fadeOut(800); $this.removeClass("fa-spin"); },ms); return false; }) } $(document).ready(function(){ $('.refresh').refreshMe({ started:function(ele){ele.html("Getting new data..")}, completed:function(ele){ele.html("This is the new data after refresh..")} }); });
Dey-Dey

Refresh Widget

Dey-Dey
  May 24th 2014, 15:30
3.4K Views