JQuery UI的两个应用效果

最近下了一些jq ui在看，效果真不错，晒一下给大家看看：

一、spacegallery.一个很炫的图片浏览插件【 spacegallery 下载地址：spacegallery.js】

1、添加对 spacegallery所有js的引用 添加<div id="myGallery" class="spacegallery" runat = "server">
</div>图片显示位置。

2、在后台动态添加图片

protected void Page_Load(object sender, EventArgs e)
{
string picPath = AppDomain.CurrentDomain.BaseDirectory + "images/pic/";
string html = string.Empty;
if (Directory.Exists(picPath))
{
DirectoryInfo di = new DirectoryInfo(picPath);
FileInfo[] fi = di.GetFiles();

foreach (FileInfo f in fi)
{
html += "<img src='images/pic/" + f.Name + "'/>";
}
}
myGallery.InnerHtml = html;
} 

3、效果图

 

二、DOMWindow文本窗口。这个在显示内容简要、商品说明等很好用。效果看我博客公告的红色Hello那块就行^_^【jquery.DOMWindow.js下载：jquery.DOMWindow.js】

 1、添加jquery.DOMWindow.js引用，添加html

<p><a href="#inlineContent" class="defaultDOMWindow">Open DOM Window</a></p>
<script type="text/javascript">
$('.defaultDOMWindow').openDOMWindow({
eventType: 'click',
loader: 1,
loaderImagePath: 'animationProcessing.gif',
loaderHeight: 16,
loaderWidth: 17
});
</script>

<%-- 隐藏弹出显示--%>

 <div id="inlineContent" style=" display:none;">
 </div>  

2、异步动态获取DomWindow要显示的内容， Handler2.ashx就输出一个hello

<script type = "text/javascript" language = "javascript">
$(function() {
$.get("Handler2.ashx", null, function(data) {
$("#inlineContent").html("<p>"+data+"</p>");
 });
});
</script> 

还有很多其他的jq ui具体效果就不演示了，我贴出来给大家下:JQUI.rar

 

转载于:https://www.cnblogs.com/conger/archive/2011/12/30/2307619.html