jsonp.html | searchcode

/1.3/source/raw/api/core/ajax/jsonp.html

https://github.com/kissyteam/kissyteam.github.com
HTML | 68 lines | 60 code | 8 blank | 0 comment | 0 complexity | 523fff768bfdfe2fc2fa6b976e9d8c7a 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="http://g.tbcdn.cn/kissy/k/1.3.2/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>