文档
示例
下载
部署
关于
SimpleUI示例中心
Simple Dialog Demo
简单示例
$("
test
").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 = $("
"); $.each(r.items, function(k, v){ var li = $("
"); li.append("
").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();