/1.4/source/raw/api/ajax/jsonp.html
HTML | 68 lines | 60 code | 8 blank | 0 comment | 0 complexity | 4404b722f48eb89dd9131e8f5e583349 MD5 | raw file
Possible License(s): Apache-2.0
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- button { margin:10px; }
- div { color:blue; font-weight:bold; }
- span { color:red; }
-
- .loading {
- background: url("http://img02.taobaocdn.com/tps/i2/T16WJqXaXeXXXXXXXX-32-32.gif") no-repeat scroll 50% 50% transparent;
- width: 100px;
- height: 100px !important;
- margin: 20px;
- }
-
- </style>
- <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
- </head>
- <body>
- <button id='jsonp'>get pics from flickr</button>
- <div id="photo-list"></div>
- <script>
- KISSY.use('node,io',function (S,Node,IO) {
- var $ = Node.all,
- photoList = $('#photo-list');
- $("#jsonp").attr("disabled",false);
- $("#jsonp").on("click", function () {
- $(this).attr("disabled",true);
- photoList.addClass('loading');
- new IO({
- dataType:'jsonp',
- url:"http://api.flickr.com/services/rest/",
- data:{
- 'method': 'flickr.favorites.getPublicList',
- 'api_key': '5d93c2e473e39e9307e86d4a01381266',
- 'user_id': '26211501@N07',
- 'per_page': 10,
- 'format': 'json'
- },
- jsonp:"jsoncallback",
- success:function (data) {
- var html = 'Fetch photo failed, pls try again!';
-
- if (data.stat === 'ok') {
- html='';
- S.each(data.photos.photo, function (item, i) {
- html += '<img style="display:none" src="http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_t.jpg" />';
- });
- }
-
- photoList.html(html).all('img').each(function (img) {
- img.on('load', function () {
- photoList.removeClass('loading');
- img.detach();
- img.fadeIn(3);
- });
- });
- }
- });
-
- });
- });
- </script>
- </body>
- </html>