SimpleCore

SimpleUI示例中心

Simple Dialog Demo

简单示例

复杂示例(图片浏览器)

在这个示例中，我们通过flicker图片分享网站的API获取图片，并将这个图片通过定制的SimpleDialog显示出来

var getImgRemote = function(){
    $.ajax({
        url: "http://api.flickr.com/services/feeds/photos_public.gne?format=json",
        jsonpCallback: "jsonFlickrFeed",
        success: function(r){
            var ul = $("<ul/>");
            $.each(r.items, function(k, v){
                var li = $("<li/>");
                li.append("<img src='" + v.media.m + "'/>").appendTo(ul);
            });
            $("#complex").append(ul);
            bindEvents();
        },
        dataType: "jsonp"
    });
}
var bindEvents = function(){
    $("#complex li").each(function(i){
        var length = $("#complex li").length, current = i;
        $(this).click(function(){
            var d = $(this).find("img").dialog({
                buttons: {
                    "上一张": function(){
                        if (current == 0) {
                            alert("已经是第一张");
                            return;
                        }
                        current--;
                         setImg(dialog,current);
                    },
                    "下一张": function(){
                        if (current == length) {
                            alert("已经是最后一张");
                            return;
                        }
                        current++;
                        setImg(dialog,current);
                    },
                    "关闭": function(){
                        dialog.destroy();
                    }
                },
                title: "简单图片浏览器"
            }), dialog = d.data("widget_dialog");
            dialog.dialog.addClass("simple-img-example")
        });
    })
}
var setImg = function(dialog, index){
    var img = $("#complex li").eq(index).find("img");
    dialog.body.find("img").attr('src', img[0].src).animate({
        width: img.width(),
        height: img.height()
    }, 300);
}
getImgRemote();