jquery repeater 模仿 Google 展开页面预览子视图
更新时间：2021年9月22日 10:19 点击：1873
如果, 有不明白的问题, 请先阅读 30 分钟掌握无刷新 Repeater.
示例代码下载: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar
本文将详细的讲解 Repeater 控件中如何使用子视图, 目录如下:
* 准备
* 定义子视图样本
* 切换子视图状态
* 定义子视图容器
示例图片:
请参照 http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc 中的准备.
定义子视图样本
显示在 repeater 中的 repeater 被称为子视图, 每一个子视图都是子视图样本的副本, 并根据条件来展示不同的数据. 子视图样本的定义没有特别之处, 比如:
<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>
大多数情况下, 需要为子视图样本定义 FilterField 属性, 也就是搜索子视图数据所用到的字段或条件, 上面的代码中, 我们添加了 url 作为条件, 那么后台返回数据的代码可以这样编写:
[WebMethod]
public SortedDictionary<string, object> GetGooglePicture ( string url )
{
// 返回 JSON
}
由于, 只返回一行数据, 因此不必添加 pageindex 和 pagesize 参数.
关于如何返回 JSON, 请参考 使用 ASP.NET 一般处理程序或 WebService 返回 JSON, 本示例所有代码为在 .NET 4.0 下编写.
切换子视图状态
如果需要在 Repeater 中控制子视图切换, 关闭和打开, 可以使用 shiftview, collapseview, expandview 三个函数, 比如:
// 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 为例, 第一个参数为子视图的 ID, 之后的参数为用于搜索子视图数据的条件, 示例中将字段 url 作为参数, 对应了子视图样本 FilterField 属性中的 url. 如果有更多的条件, 继续添加即可, 顺序需要和子视图样本 FilterField 属性中条件一样.
expandview 方法和 shiftview 是类似的, 不同的 expandview 是打开子视图, 而 shiftview 是切换子视图的打开状态.
而 collapseview 方法是关闭子视图, 不需要传递条件.
默认情况下, 当子视图首次被打开时, 将自动调用 fill 方法来填充数据, 而之后的打开显示现存的数据, 不再刷新.
定义子视图容器
除了定义子视图样本之外, 还需要在行模板中定义子视图容器, 在刚才的代码中, 有这样一段:
// je-id="<子视图 ID>"
<ItemTemplate>
<div class="picture">
<div je-id="pictureRepeater" style="display: none;">
</div>
</div>
</ItemTemplate>
通过 je-id 绑定为子视图 ID, 即可将元素绑定为子视图的容器, 而子视图将显示在目标容器中.
子视图默认为关闭状态, 因此代码中通过 style="display: none;" 使子视图容器在开始时隐藏.
示例代码下载: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar
本文将详细的讲解 Repeater 控件中如何使用子视图, 目录如下:
* 准备
* 定义子视图样本
* 切换子视图状态
* 定义子视图容器
示例图片:
请参照 http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc 中的准备.
定义子视图样本
显示在 repeater 中的 repeater 被称为子视图, 每一个子视图都是子视图样本的副本, 并根据条件来展示不同的数据. 子视图样本的定义没有特别之处, 比如:
复制代码 代码如下:
<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>
大多数情况下, 需要为子视图样本定义 FilterField 属性, 也就是搜索子视图数据所用到的字段或条件, 上面的代码中, 我们添加了 url 作为条件, 那么后台返回数据的代码可以这样编写:
复制代码 代码如下:
[WebMethod]
public SortedDictionary<string, object> GetGooglePicture ( string url )
{
// 返回 JSON
}
由于, 只返回一行数据, 因此不必添加 pageindex 和 pagesize 参数.
关于如何返回 JSON, 请参考 使用 ASP.NET 一般处理程序或 WebService 返回 JSON, 本示例所有代码为在 .NET 4.0 下编写.
切换子视图状态
如果需要在 Repeater 中控制子视图切换, 关闭和打开, 可以使用 shiftview, collapseview, expandview 三个函数, 比如:
复制代码 代码如下:
// 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 为例, 第一个参数为子视图的 ID, 之后的参数为用于搜索子视图数据的条件, 示例中将字段 url 作为参数, 对应了子视图样本 FilterField 属性中的 url. 如果有更多的条件, 继续添加即可, 顺序需要和子视图样本 FilterField 属性中条件一样.
expandview 方法和 shiftview 是类似的, 不同的 expandview 是打开子视图, 而 shiftview 是切换子视图的打开状态.
而 collapseview 方法是关闭子视图, 不需要传递条件.
默认情况下, 当子视图首次被打开时, 将自动调用 fill 方法来填充数据, 而之后的打开显示现存的数据, 不再刷新.
定义子视图容器
除了定义子视图样本之外, 还需要在行模板中定义子视图容器, 在刚才的代码中, 有这样一段:
复制代码 代码如下:
// je-id="<子视图 ID>"
<ItemTemplate>
<div class="picture">
<div je-id="pictureRepeater" style="display: none;">
</div>
</div>
</ItemTemplate>
通过 je-id 绑定为子视图 ID, 即可将元素绑定为子视图的容器, 而子视图将显示在目标容器中.
子视图默认为关闭状态, 因此代码中通过 style="display: none;" 使子视图容器在开始时隐藏.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
实际过程演示: http://www.tudou.com/programs/view/uVx2BBMHgOQ/, 建议全屏观看.
欢迎访问 panzer 开源项目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 执行各种 js 和 jQuery 脚本以及录制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement.
相关文章
- 专做了百度和google的网盟推广以作推广效果的评估比较。百度的周期为6天，google为4天。 从百度的统计数据可以看出这六天的点击次数总共为464，平均点击花费了0.30元...2017-07-06
- Google是这样介绍PageRank的： Google 出类拔萃的地方在于专注开发“完美的搜索引擎”，联合创始人拉里·佩奇将这种搜索引擎定义为可“确解用户...2017-07-06
JS实现获取来自百度,Google,soso,sogou关键词的方法
这篇文章主要介绍了JS实现获取来自百度,Google,soso,sogou关键词的方法,结合实例形式分析了js获取来路页面的方法与相关搜索引擎关键词的处理技巧,需要的朋友可以参考下...2017-01-09- 一，GOOGLE简介 Google(www.google.com)是一个搜索引擎，由两个斯坦福大学博士生Larry Page与Sergey Brin于1998年9月发明，Google Inc. 于1999年创立。2000年7月...2016-09-20
- 本文章根据我们经验我们来说说怎么提高google adsense点击率吧。 本文章根据我们经验我们来说说怎么提高google adsense点击率吧。 第a步 接下来我们要安...2017-07-06
- Google 最近发布并开源了 GAPID，这是一个工具合集，允许检查、调整和重复从应用程序到 Graphics 驱动之间的调用。...2017-07-06
- 一个英国人在自己的网站Jon Burrows上推出了一项服务：显示 Google Talk 的在线状态！ 下面是先锋 JasonIT 的显示： 大家可以看见，显示有“GTAlk On-Lin...2016-09-20
- $fp = fsockopen("www.google.cn", 80, $errno, $errstr, 30); if(!$fp){ echo "$errstr ($errno)<br /> "; }else{ $out = "GET /search?oe=utf8&ie=utf8&sourc...2016-11-25
- 象Google的广告，展示啥内容，都是由Google自己控制的，使用普通的页面提交连接的方式，我们是无法统计我们页面上的Google广告被点击了多少次，被谁点击了。因为这些...2016-09-20
- 用过几个国内的计数器，来源分析网站，感觉也就那样了。前段时间申请了google analytics，等了很久总算受到邀请了，赶快改写代码。现在可以看看结果了感觉google analy...2016-09-20
- Google实验室总是会有许许多多的新奇想法。2006年2月23日，它又给我们带来了惊喜。这一次给我们带来的是一个名叫Google Page Creator的东西，利用这个在线网页...2016-09-20
- 最近谷歌是留是去闹的沸沸扬扬的。咱们不争论谁对谁错，也不要一味的悲伤不已。今天我们就来讨论下，假如谷歌真的走了，真的离我们这些辛苦做站的草根而去了。那我们究竟该...2016-10-10
- 过以上的判断我的网站肯定是进入沙盒，领导催得紧，我也着急的很。可是越是这个时候我越需要冷静。快速的记录进入沙盒之前的动作。 1：购买了大量的外链 2：不稳定的...2016-10-10
- 我们主要是用到php 调用google在线翻译功能哦，post一个远程地址再用curl读取google翻译后的值就OK了。 class Google_API_translator { public $out = ""; ...2016-11-25
- 当一款新的技术，不，应该说当一个技术出现了一丁点欣喜的进步时，现在科技圈里就立刻往它的身上贴上各种「颠覆」的标签。...2016-12-21
- 本人7月14日正式做企业站SEO，这个也算比较早的单子，到手后对TITLE和META信息修改下了，在首页和底部增强了下密度。然后做了些关键词外链。 手上同时进行的还有别的单...2017-07-06
- Google实验室总是会有许许多多的新奇想法。2006年2月23日，它又给我们带来了惊喜。这一次给我们带来的是一个名叫GPC（Google Page Creator）的东西，利用这个在线...2016-09-20
Android利用Google Weather API来制作自己的天气应用
如果你想制作自己的Android天气应用,那么你来对地方了.没有比使用Google Weather API XML解析更简单的方法了.所以你只需要知道如何解析XML即可. 背景 我们需要...2016-09-20- function selected ( $param , $value ) { if ( $param == $value ) print "SELECTED" ; } # Collect any form data to control the display $scale = 10 ; $ma...2016-11-25
- 今天，Google 发布了第三份 Android 安全年度回顾，全面回顾近一年 Google 是如何保护超过 14 亿 Android 用户及其信息安全的。 确保用户安全是 Google 的目标在 2016 年，为实现保护用户信息和设备安全的目标，Google 提升了对有害 App 的防范能力，为 Android 7.0 Nougat 增添了安全特性，与设备厂商、学者和 Android 生态系统中的其他成员紧密合作。...2017-07-06