快捷導(dǎo)航

jquery repeater 模仿 Google 展開(kāi)頁(yè)面預(yù)覽子視圖

更新時(shí)間：2011年10月25日 11:13:01 作者：

節(jié)后的這一周, 希望大家能挺住, hehe, 這兩天給大家準(zhǔn)備一個(gè) Repeater 子視圖的例子, 模擬了 Google 搜索結(jié)果后的頁(yè)面的預(yù)覽, 其實(shí)也只是顯示了一段問(wèn)題

如果, 有不明白的問(wèn)題, 請(qǐng)先閱讀 30 分鐘掌握無(wú)刷新 Repeater.

示例代碼下載: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar

本文將詳細(xì)的講解 Repeater 控件中如何使用子視圖, 目錄如下:

* 準(zhǔn)備
* 定義子視圖樣本
* 切換子視圖狀態(tài)
* 定義子視圖容器

示例圖片:

準(zhǔn)備

請(qǐng)參照 http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc 中的準(zhǔn)備.

定義子視圖樣本
顯示在 repeater 中的 repeater 被稱(chēng)為子視圖, 每一個(gè)子視圖都是子視圖樣本的副本, 并根據(jù)條件來(lái)展示不同的數(shù)據(jù). 子視圖樣本的定義沒(méi)有特別之處, 比如:

復(fù)制代碼代碼如下:

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

大多數(shù)情況下, 需要為子視圖樣本定義 FilterField 屬性, 也就是搜索子視圖數(shù)據(jù)所用到的字段或條件, 上面的代碼中, 我們添加了 url 作為條件, 那么后臺(tái)返回?cái)?shù)據(jù)的代碼可以這樣編寫(xiě):

復(fù)制代碼代碼如下:

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

由于, 只返回一行數(shù)據(jù), 因此不必添加 pageindex 和 pagesize 參數(shù).

關(guān)于如何返回 JSON, 請(qǐng)參考使用 ASP.NET 一般處理程序或 WebService 返回 JSON, 本示例所有代碼為在 .NET 4.0 下編寫(xiě).
切換子視圖狀態(tài)
如果需要在 Repeater 中控制子視圖切換, 關(guān)閉和打開(kāi), 可以使用 shiftview, collapseview, expandview 三個(gè)函數(shù), 比如:

復(fù)制代碼代碼如下:

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

以 shiftview 為例, 第一個(gè)參數(shù)為子視圖的 ID, 之后的參數(shù)為用于搜索子視圖數(shù)據(jù)的條件, 示例中將字段 url 作為參數(shù), 對(duì)應(yīng)了子視圖樣本 FilterField 屬性中的 url. 如果有更多的條件, 繼續(xù)添加即可, 順序需要和子視圖樣本 FilterField 屬性中條件一樣.
expandview 方法和 shiftview 是類(lèi)似的, 不同的 expandview 是打開(kāi)子視圖, 而 shiftview 是切換子視圖的打開(kāi)狀態(tài).
而 collapseview 方法是關(guān)閉子視圖, 不需要傳遞條件.
默認(rèn)情況下, 當(dāng)子視圖首次被打開(kāi)時(shí), 將自動(dòng)調(diào)用 fill 方法來(lái)填充數(shù)據(jù), 而之后的打開(kāi)顯示現(xiàn)存的數(shù)據(jù), 不再刷新.
定義子視圖容器
除了定義子視圖樣本之外, 還需要在行模板中定義子視圖容器, 在剛才的代碼中, 有這樣一段:

復(fù)制代碼代碼如下:

 
// je-id="<子視圖 ID>" 
<ItemTemplate> 
<div class="picture"> 
<div je-id="pictureRepeater" style="display: none;"> 
</div> 
</div> 
</ItemTemplate> 

通過(guò) je-id 綁定為子視圖 ID, 即可將元素綁定為子視圖的容器, 而子視圖將顯示在目標(biāo)容器中.
子視圖默認(rèn)為關(guān)閉狀態(tài), 因此代碼中通過(guò) style="display: none;" 使子視圖容器在開(kāi)始時(shí)隱藏.

JQueryElement 是開(kāi)源共享的代碼, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 頁(yè)面下載 dll 或者是源代碼.

實(shí)際過(guò)程演示: http://www.tudou.com/programs/view/uVx2BBMHgOQ/, 建議全屏觀看.

歡迎訪問(wèn) panzer 開(kāi)源項(xiàng)目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 執(zhí)行各種 js 和 jQuery 腳本以及錄制功能和 jQueryUI 的 Asp.net 控件 JQueryElement.

您可能感興趣的文章: