|
 |
栏目导栏 |
|
| |
|
|
|
|
|
资料搜索 |
|
| |
|
|
|
|
|
热门文章 |
|
| |
|
|
|
|
|
最新文章 |
|
| |
|
|
|
| |
| |
|
|
|
|
在WEB应用中，如何才能使应用高效率呢?如何才能吸引用户呢?这的确是个大学问,页面的内容,色搭配等都十分重要。但不可忽视的是,多数情况下，对于数据的呈现方式也是十分重要的。由于web应用的规模不断增大，数据也越来越多了,有时候,由于在一个页面同时显示的数据太多，从而造成页面的不美观,用户因此也会感到厌倦和操作困难。因此，本文将介绍利用repeater控件的隐藏区域，以达到较好的数据显示效果。 44VLinux联盟
44VLinux联盟
防止数据过多加载有很多方法，比如采用数据分页的方法,又或者采用master/detail的方式,就是先显示每条数据的主要内容，而对于详细数据,用户只需要点detail的链接就可以了。本文将介绍另外一种方式来显示数据，它采用折叠的隐藏方式，当用户需要看每条记录的详细描述时，不需要另外打开链接窗口，而直接在原数据记录的下方，呈现出原先隐藏的数据详细资料。这样一来，方便了用户的操作。我们先来看下其实际效果(http://aspnet.4guysfromrolla.com/demos/collapsibleRepeater.aspx)。 接下来，我们看如何在repeater中实现其效果。 44VLinux联盟
44VLinux联盟
要实现上面的效果，我们必须采用客户端的脚本技术，从而实现隐藏或展示某个区域。而在IE 4.x后,是可以实现该技术的。比如,＜div＞标记内的内容，当用户点击时可以动态地隐藏起来，而＜p＞标记内容的内容，也可以当用户移动鼠标到某特定区域时显示出来。而其中的关键之处，在于其display和visibility的CSS风格属性。下面的代码显示了其使用方法，当用户点击HIDE CONTENT按钮时，则会隐藏原本显示的文本，当点击show content时，又会显示原先的文本了。 44VLinux联盟
44VLinux联盟
＜script language="JavaScript"＞ 44VLinux联盟
function showHideContent(id, show) 44VLinux联盟
{ 44VLinux联盟
var elem = document.getElementById(id); 44VLinux联盟
if (elem) 44VLinux联盟
{ 44VLinux联盟
if (show) 44VLinux联盟
{ 44VLinux联盟
elem.style.display = 'block'; 44VLinux联盟
elem.style.visibility = 'visible'; 44VLinux联盟
} 44VLinux联盟
else 44VLinux联盟
{ 44VLinux联盟
elem.style.display = 'none'; 44VLinux联盟
elem.style.visibility = 'hidden'; 44VLinux联盟
} 44VLinux联盟
} 44VLinux联盟
} 44VLinux联盟
＜/script＞ 44VLinux联盟
＜div id="someRegion"＞ 44VLinux联盟
This text will be displayed or hidden when clicking the appropriate button below... 44VLinux联盟
＜/div＞ 44VLinux联盟
＜input type="button" value = "Hide Content" 44VLinux联盟
onclick="showHideContent('someRegion', false);"＞ 44VLinux联盟
＜input type="button" value = "Show Content" onclick="showHideContent('someRegion', true);"＞ 44VLinux联盟
44VLinux联盟
在上面的javscript代码中，充分利用了HTML元素的display和visiblity属性，而且要注意，这两个属性应该同时使用。首先在button按钮的onclick事件中，调用了自定义的javscript写的函数showhidecontent,该函数有两个参数，id和show,id表示要显示或者隐藏的区域的名称，比如该例子中，要显示或隐藏的区域是＜div＞标记内的文本，show为布尔值，决定是否隐藏或显示该区域。而在showhidecontent函数中，则根据show的值,控制display和visiblity属性。 44VLinux联盟
44VLinux联盟
明白了上面例子的道理后，下面就可以在repeater控件中应用了。比如，我们要创建一个FAQ问答录，其中有很多用户要询问的问题，则使用上面的方法，可以先将用户的问题使用repeater控件罗列出来,之后当用户点击该问题时,则会显示出隐藏的回答，十分方便。Repeater的代码片段如下: 44VLinux联盟
44VLinux联盟
＜asp:Repeater id="rptFAQs" runat="server"＞ 44VLinux联盟
＜ItemTemplate＞ 44VLinux联盟
＜h2＞＜%# DataBinder.Eval(Container.DataItem, "Description") %＞＜/h2＞＜br /＞ 44VLinux联盟
＜b＞Submitted By:＜/b＞ ＜%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %＞＜br /＞ 44VLinux联盟
＜b＞Views:＜/b＞ ＜%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %＞＜br /＞ 44VLinux联盟
＜b＞FAQ:＜/b＞＜br /＞ 44VLinux联盟
＜%# DataBinder.Eval(Container.DataItem, "Answer") %＞ 44VLinux联盟
＜/ItemTemplate＞ 44VLinux联盟
＜/asp:Repeater＞ 44VLinux联盟
44VLinux联盟
我们可以看到，上面的代码只是描述了静态的一个repeater。接下来，我们要在repeater的模版列上进行一下修改，以满足要求。 44VLinux联盟
首先，我们为每一条记录都创建两个＜div＞标记，一个显示FAQ的问题，另一个则显示问题的答案,而且要为每一个＜div＞标记赋值一个唯一的id,每条记录中，显示问题的＜div＞标记的id记作h index(index为Repeater控件中每一项的id号，利用itemindex),而显示答案的＜div＞标记的id记作dindex。代码如下: 44VLinux联盟
44VLinux联盟
＜script language="JavaScript"＞ 44VLinux联盟
function ToggleDisplay(id) 44VLinux联盟
{ 44VLinux联盟
var elem = document.getElementById('d' + id); 44VLinux联盟
if (elem) 44VLinux联盟
{ 44VLinux联盟
if (elem.style.display != 'block') 44VLinux联盟
{ 44VLinux联盟
elem.style.display = 'block'; 44VLinux联盟
elem.style.visibility = 'visible'; 44VLinux联盟
} 44VLinux联盟
else 44VLinux联盟
{ 44VLinux联盟
elem.style.display = 'none'; 44VLinux联盟
elem.style.visibility = 'hidden'; 44VLinux联盟
} 44VLinux联盟
} 44VLinux联盟
} 44VLinux联盟
＜/script＞ 44VLinux联盟
＜style＞ 44VLinux联盟
.header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer; 44VLinux联盟
background-color:#cccccc; font-family: Verdana; } 44VLinux联盟
.details { display:none; visibility:hidden; background-color:#eeeeee; 44VLinux联盟
font-family: Verdana; } 44VLinux联盟
＜/style＞ 44VLinux联盟
44VLinux联盟
＜asp:Repeater id="rptFAQs" runat="server"＞ 44VLinux联盟
＜ItemTemplate＞ 44VLinux联盟
＜div id='h＜%# DataBinder.Eval(Container, "ItemIndex") %＞' class="header" 44VLinux联盟
onclick='ToggleDisplay(＜%# DataBinder.Eval(Container, "ItemIndex") %＞);'＞ 44VLinux联盟
＜%# DataBinder.Eval(Container.DataItem, "Description") %＞ 44VLinux联盟
＜/div＞ 44VLinux联盟
44VLinux联盟
＜div id='d＜%# DataBinder.Eval(Container, "ItemIndex") %＞' class="details"＞ 44VLinux联盟
＜b＞Submitted By:＜/b＞ ＜%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %＞＜br /＞ 44VLinux联盟
＜b＞Views:＜/b＞ ＜%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %＞＜br /＞ 44VLinux联盟
＜b＞FAQ:＜/b＞＜br /＞ 44VLinux联盟
＜%# DataBinder.Eval(Container.DataItem, "Answer") %＞ 44VLinux联盟
＜/div＞ 44VLinux联盟
＜/ItemTemplate＞ 44VLinux联盟
＜/asp:Repeater＞ 44VLinux联盟
44VLinux联盟
我们重点来看下后半部分的代码，其中 44VLinux联盟
＜div id='h＜%# DataBinder.Eval(Container, "ItemIndex") %＞' class="header" 44VLinux联盟
onclick='ToggleDisplay(＜%# DataBinder.Eval(Container, "ItemIndex") %＞);'＞会将每条记录的问题部分，包裹在类似＜div id=h1＞,＜div id=h2＞之类的标记内，当点击时，则调用toggledisplay函数，在该函数内，看传入的参数是否是需要显示的区域（注意，通过 44VLinux联盟
var elem = document.getElementById('d' + id);）一句进行判断，是的话则设置display和visiblity属性显示，否则不显示。 44VLinux联盟
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论 |
|
|
|
|
|
