jquery repeater 模仿 Google 展开页面预览子视图

复制代码 代码如下:

<je:Repeater runat="server"
FilterField="<子视图搜索字段>">
</je:Repeater>
<je:Repeater runat="server"
FilterField="['url']"
FillAsync-Url="webservice.asmx"
FillAsync-MethodName="GetGooglePicture">
<ItemTemplate>
<div>
<span>#{url}</span>
<br />
<br />
#{picture}
</div>
</ItemTemplate>
</je:Repeater>

复制代码 代码如下:

[WebMethod]
public SortedDictionary<string, object> GetGooglePicture ( string url )
{
// 返回 JSON
}

复制代码 代码如下:

// je-<javascript 事件名>="shiftview,'<子视图 ID>'[,<子视图搜索字段值n>]"
<div>
<je:Repeater runat="server"
Selector="'#list'" PageSize="2" IsVariable="true"
FillAsync-Url="webservice.asmx"
FillAsync-MethodName="SearchGoogle">
<ItemTemplate>
<div>
<div
je-button="label='更多';"
je-onclick="shiftview,'pictureRepeater','#{url}'">
</div>
<div je-id="pictureRepeater">
</div>
</div>
</ItemTemplate>
</je:Repeater>
</div>

复制代码 代码如下:

// je-id="<子视图 ID>"
<ItemTemplate>
<div>
<div je-id="pictureRepeater">
</div>
</div>
</ItemTemplate>

JQueryElement 是开源共享的代码, 可以在 页面下载 dll 或者是源代码.

实际过程演示: , 建议全屏观看.

欢迎访问 panzer 开源项目, , 其中包含了 IEBrowser 控制 WebBrowser 执行各种 js 和 jQuery 脚本以及录制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement.