Forked from: cezinha's cezinha blog widget View Diff (93) JSONP in WordPress using AngularJS cezinha Follow 2013-08-17 03:12:17 License: MIT License Fork2 Fav0 View3060 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 18 lines HTML 17 lines CSS 35 lines JSONP in WordPress using AngularJS jQuery v1.8.3 AngularJS 1.0.3 // forked from cezinha's "cezinha blog widget" http://jsdo.it/cezinha/yA5k function WidgetCtrl($scope, $http) { $scope.items = [{ title: 'Loading', excerpt: '', permalink: '#' }]; $('ul.widget-list').show(); $http.jsonp("http://www.cezinha.com.br/blog/?feed=json&callback=JSON_CALLBACK").success(function(data, status, headers, config) { $scope.items = data; }).error(function(data, status, headers, config) { $scope.status = status; }); } <div id="widget-cezinha" ng-app> <h3> <a href="http://www.cezinha.com.br" target="_blank"> <span id="logo" href="http://www.cezinha.com.br"></span> <span class="intro">flash and javascript stuff <br /> <strong>visit the website ›</strong></span> </a> </h3> <div id="widget-content" ng-controller="WidgetCtrl"> <ul class="widget-list"> <li ng-repeat="item in items"> <a href="{{item.permalink}}" target="_blank">{{item.title}}</a><br /> <span class="excerpt">{{item.excerpt}}</span> </li> </ul> </div> </div> JSONP in WordPress using AngularJS @import url(http://fonts.googleapis.com/css?family=Amaranth:400,700); body { background-color: #DDDDDD; font: 30px 'Amaranth', sans-serif; } #widget-cezinha{ background:#efefef; -moz-border-radius: 0.25em; border-radius: 0.25em; padding:10px 5px 5px 5px; } #widget-cezinha h3{margin:0;padding:5px 10px;clear:both;overflow:hidden} #widget-cezinha h3 a{font-size:14px;text-decoration:none;} #widget-cezinha h3 a span{color:#666;float:right;font-weight:400;text-align:right} #widget-cezinha h3 a span strong{font-weight:700;color:#E74665;} #widget-cezinha h3 #logo{ background-image: url("http://cezinha.com.br/id/avatar.gif"); background-position: -6px -31px; background-repeat: no-repeat; display: inline-block; height: 40px; overflow: hidden; width: 90px; float:left; } #widget-content{ font-size:14px; font-weight:400; color:#999 } .widget-list{margin:0;padding:0;overflow:hidden;display:none;} .widget-list li{display:block;padding:10px;margin:10px 5px;border-bottom:1px solid #efefef; background:#fff; -moz-border-radius: 0.25em; border-radius: 0.25em; } .widget-list a{color:#E74665;font-weight:700;text-decoration:none;font-size:16px} .widget-list a:hover{text-decoration:underline} // forked from cezinha's "cezinha blog widget" http://jsdo.it/cezinha/yA5k function WidgetCtrl($scope, $http) { $scope.items = [{ title: 'Loading', excerpt: '', permalink: '#' }]; $('ul.widget-list').show(); $http.jsonp("http://www.cezinha.com.br/blog/?feed=json&callback=JSON_CALLBACK").success(function(data, status, headers, config) { $scope.items = data; }).error(function(data, status, headers, config) { $scope.status = status; }); } <div id="widget-cezinha" ng-app> <h3> <a href="http://www.cezinha.com.br" target="_blank"> <span id="logo" href="http://www.cezinha.com.br"></span> <span class="intro">flash and javascript stuff <br /> <strong>visit the website ›</strong></span> </a> </h3> <div id="widget-content" ng-controller="WidgetCtrl"> <ul class="widget-list"> <li ng-repeat="item in items"> <a href="{{item.permalink}}" target="_blank">{{item.title}}</a><br /> <span class="excerpt">{{item.excerpt}}</span> </li> </ul> </div> </div> @import url(http://fonts.googleapis.com/css?family=Amaranth:400,700); body { background-color: #DDDDDD; font: 30px 'Amaranth', sans-serif; } #widget-cezinha{ background:#efefef; -moz-border-radius: 0.25em; border-radius: 0.25em; padding:10px 5px 5px 5px; } #widget-cezinha h3{margin:0;padding:5px 10px;clear:both;overflow:hidden} #widget-cezinha h3 a{font-size:14px;text-decoration:none;} #widget-cezinha h3 a span{color:#666;float:right;font-weight:400;text-align:right} #widget-cezinha h3 a span strong{font-weight:700;color:#E74665;} #widget-cezinha h3 #logo{ background-image: url("http://cezinha.com.br/id/avatar.gif"); background-position: -6px -31px; background-repeat: no-repeat; display: inline-block; height: 40px; overflow: hidden; width: 90px; float:left; } #widget-content{ font-size:14px; font-weight:400; color:#999 } .widget-list{margin:0;padding:0;overflow:hidden;display:none;} .widget-list li{display:block;padding:10px;margin:10px 5px;border-bottom:1px solid #efefef; background:#fff; -moz-border-radius: 0.25em; border-radius: 0.25em; } .widget-list a{color:#E74665;font-weight:700;text-decoration:none;font-size:16px} .widget-list a:hover{text-decoration:underline} use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author cezinha URLhttp://www.cezinha.com.br @cezinha coder, gamer, flash addict, js addict Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/n3Yp/js"></script> ajax angularjs css json webfonts Discussion Questions on this code? Tags ajax angularjs css json webfonts Forked sort by latest page views favorite forked forked: JSONP in WordPress usi cezinha 00 1442 19/17/35 ajax angularjs css json webfonts forked: JSONP in WordPress usi ohisama1 00 1130 17/25/71 ajax angularjs css json webfonts
