分享
 
 
 

在Repeater控件中创建可隐藏区域

王朝other·作者佚名  2008-05-21
窄屏简体版  字體: |||超大  

在WEB应用中,如何才能使应用高效率呢?如何才能吸引用户呢?这的确是个大学问,页面的内容,色搭配等都十分重要。但不可忽视的是,多数情况下,对于数据的呈现方式也是十分重要的。由于web应用的规模不断增大,数据也越来越多了,有时候,由于在一个页面同时显示的数据太多,从而造成页面的不美观,用户因此也会感到厌倦和操作困难。因此,本文将介绍利用repeater控件的隐藏区域,以达到较好的数据显示效果。

防止数据过多加载有很多方法,比如采用数据分页的方法,又或者采用master/detail的方式,就是先显示每条数据的主要内容,而对于详细数据,用户只需要点detail的链接就可以了。本文将介绍另外一种方式来显示数据,它采用折叠的隐藏方式,当用户需要看每条记录的详细描述时,不需要另外打开链接窗口,而直接在原数据记录的下方,呈现出原先隐藏的数据详细资料。这样一来,方便了用户的操作。我们先来看下其实际效果(http://aspnet.4guysfromrolla.com/demos/collapsibleRepeater.aspx)。 接下来,我们看如何在repeater中实现其效果。

要实现上面的效果,我们必须采用客户端的脚本技术,从而实现隐藏或展示某个区域。而在IE 4.x后,是可以实现该技术的。比如,<div>标记内的内容,当用户点击时可以动态地隐藏起来,而<p>标记内容的内容,也可以当用户移动鼠标到某特定区域时显示出来。而其中的关键之处,在于其display和visibility的CSS风格属性。下面的代码显示了其使用方法,当用户点击HIDE CONTENT按钮时,则会隐藏原本显示的文本,当点击show content时,又会显示原先的文本了。

<script language="JavaScript">function showHideContent(id, show){

var elem = document.getElementById(id);

if (elem)

{

if (show)

{

elem.style.display = 'block';

elem.style.visibility = 'visible';

}

else

{

elem.style.display = 'none';

elem.style.visibility = 'hidden';

}

}}</script><div id="someRegion">

This text will be displayed or hidden when clicking the appropriate button below...</div><input type="button" value = "Hide Content"

onclick="showHideContent('someRegion', false);"><input type="button" value = "Show Content" onclick="showHideContent('someRegion', true);">

在上面的javscript代码中,充分利用了HTML元素的display和visiblity属性,而且要注意,这两个属性应该同时使用。首先在button按钮的onclick事件中,调用了自定义的javscript写的函数showhidecontent,该函数有两个参数,id和show,id表示要显示或者隐藏的区域的名称,比如该例子中,要显示或隐藏的区域是<div>标记内的文本,show为布尔值,决定是否隐藏或显示该区域。而在showhidecontent函数中,则根据show的值,控制display和visiblity属性。

明白了上面例子的道理后,下面就可以在repeater控件中应用了。比如,我们要创建一个FAQ问答录,其中有很多用户要询问的问题,则使用上面的方法,可以先将用户的问题使用repeater控件罗列出来,之后当用户点击该问题时,则会显示出隐藏的回答,十分方便。Repeater的代码片段如下:

<asp:Repeater id="rptFAQs" runat="server"><ItemTemplate>

<h2><%# DataBinder.Eval(Container.DataItem, "Description") %></h2><br />

<b>Submitted By:</b> <%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %><br />

<b>Views:</b> <%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %><br />

<b>FAQ:</b><br />

<%# DataBinder.Eval(Container.DataItem, "Answer") %></ItemTemplate></asp:Repeater>

我们可以看到,上面的代码只是描述了静态的一个repeater。接下来,我们要在repeater的模版列上进行一下修改,以满足要求。

首先,我们为每一条记录都创建两个<div>标记,一个显示FAQ的问题,另一个则显示问题的答案,而且要为每一个<div>标记赋值一个唯一的id,每条记录中,显示问题的<div>标记的id记作h index(index为Repeater控件中每一项的id号,利用itemindex),而显示答案的<div>标记的id记作dindex。代码如下:

<script language="JavaScript">function ToggleDisplay(id){

var elem = document.getElementById('d' + id);

if (elem)

{

if (elem.style.display != 'block')

{

elem.style.display = 'block';

elem.style.visibility = 'visible';

}

else

{

elem.style.display = 'none';

elem.style.visibility = 'hidden';

}

}}</script><style>.header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer;background-color:#cccccc; font-family: Verdana; }.details { display:none; visibility:hidden; background-color:#eeeeee;font-family: Verdana; }</style>

<asp:Repeater id="rptFAQs" runat="server">

<ItemTemplate>

<div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header"onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'>

<%# DataBinder.Eval(Container.DataItem, "Description") %>

</div>

<div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="details">

<b>Submitted By:</b> <%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %><br />

<b>Views:</b> <%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %><br />

<b>FAQ:</b><br />

<%# DataBinder.Eval(Container.DataItem, "Answer") %>

</div>

</ItemTemplate></asp:Repeater>

我们重点来看下后半部分的代码,其中

<div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header"

onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'>会将每条记录的问题部分,包裹在类似<div id=h1>,<div id=h2>之类的标记内,当点击时,则调用toggledisplay函数,在该函数内,看传入的参数是否是需要显示的区域(注意,通过

var elem = document.getElementById('d' + id);)一句进行判断,是的话则设置display和visiblity属性显示,否则不显示。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有