#

## SimpleUI示例中心

## Simple Dialog Demo

### 简单示例

$("<div class='simple-show'>test</div>").dialog(); $.alert("警告示例",function(){ }); $.confirm("确认示例",function(){ }); $.ajaxDialog("../../src/_beta/SimpleDialog/ajax.html")

### 复杂示例(图片浏览器)

在这个示例中，我们通过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();