65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET 内容滚动控件

Rahul Singla
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.85/5 (9投票s)

2008年12月15日

CPOL

3分钟阅读

viewsIcon

97321

downloadIcon

1330

可以纵向或横向以任意方向滚动任何ASP.NET服务器端控件或HTML控件

Sample.gif

引言

内容滚动是Web上非常常见的任务。这个ASP.NET服务器端控件允许您嵌入任何HTML或ASP控件作为其模板，然后可以以可配置的滚动速度纵向或横向地滚动。

背景

基本上，我一直在寻找相同的功能。我找到了一些不错的JavaScript示例（我研究过，但最终代码需要为ASP.NET进行完全自定义）。问题是，它们在服务器端开发中不能直接使用。开发人员需要负责将其嵌入页面。

我还发现了一些此类商业产品。问题是，它们要求您通过产品准备内容。它会生成HTML、CSS等，您需要将其复制到您的页面中。我希望通过ASP.NET服务器端控件的强大功能动态地完成所有事情，因此决定自己动手编写。

JavaScript 部分

起初，我考虑在我的情况下使用Silverlight来完成这项任务。然后，事后看来，期望人们下载并安装SL来完成像滚动这样基本的功能似乎是愚蠢的。所以，我决定改用JavaScript。该控件使用了模板化和令牌化的JS，其中令牌是动态替换的。与纵向和横向滚动相关的脚本的主要部分如下所示。

function populate() {
	if (iedom) {
		cross_scroller = document.getElementById ? document.getElementById
				("[$ieScroller$]") : document.all.[$ieScroller$]
		if (scrollDirection == 'Vertical')
		    cross_scroller.style.top = parseInt(scrollerHeight) + 8 + "px"
		else if (scrollDirection == 'Horizontal')
		    cross_scroller.style.left = parseInt(scrollerWidth)// + 8 + "px"
		
//      Incorrect way of finding content sizes.
//		actualheight = cross_scroller.offsetHeight
//		actualwidth = cross_scroller.offsetWidth

//      Correct way of finding Actual Content sizes.
		actualheight = getContentHeight(cross_scroller)
		actualwidth = getContentWidth(cross_scroller)
	}
	else if (document.layers) {
		ns_scroller = document.[$nsScroller0$].document.[$nsScroller1$]
		if (scrollDirection == 'Vertical')
		    ns_scroller.top = parseInt(scrollerHeight) + 8
		else if (scrollDirection == 'Horizontal')
		    ns_scroller.left = parseInt(scrollerWidth)// + 8

		ns_scroller.document.close()
		actualheight = ns_scroller.document.height
		actualwidth = ns_scroller.document.width
	}

    // Scrolling starts here, if not set to None.
    if (scrollDirection == 'Vertical')
	    lefttime = setInterval("scrollVertical()", 20)
	else if (scrollDirection == 'Horizontal')
	    lefttime = setInterval("scrollHorizontal()", 20)
}

window.onload = populate

function scrollVertical() {
	if (iedom) {
		if (parseInt(cross_scroller.style.top) > (actualheight * (-1) + 8))
			cross_scroller.style.top = 
			    parseInt(cross_scroller.style.top) - copyspeed + "px"
		else
			cross_scroller.style.top = 
				parseInt(scrollerHeight) + 8 + "px"
	}
	else
		if (document.layers) {
		if (ns_scroller.top > (actualheight * (-1) + 8))
			ns_scroller.top -= copyspeed
		else
			ns_scroller.top = parseInt(scrollerHeight) + 8
	}
}

function scrollHorizontal() {
	if (iedom) {
		if (parseInt(cross_scroller.style.left) > (actualwidth * (-1) + 8))
			cross_scroller.style.left = 
			    parseInt(cross_scroller.style.left) - copyspeed + "px"
		else
			cross_scroller.style.left = 
				parseInt(scrollerWidth) + 8 + "px"
	}
	else
		if (document.layers) {
		if (ns_scroller.left > (actualwidth * (-1) + 8))
			ns_scroller.left -= copyspeed
		else
			ns_scroller.left = parseInt(scrollerWidth) + 8
	}
}

function getContentWidth(el) {
     var tmp=el.style.overflow
     el.style.overflow='auto'
     var w=el.scrollWidth
     el.style.overflow=tmp
     return w
}

function getContentHeight(el) {
     var tmp=el.style.overflow
     el.style.overflow='auto'
     var w=el.scrollHeight
     el.style.overflow=tmp
     return w
}

脚本有文档记录。所以，应该很清楚。但是，它包含一些由控件动态替换的令牌。

该控件最初只支持RightToLeft和BottomToTop滚动。然而，应要求已更新，现在也支持TopToBottom和LeftToRight滚动。因此，如果您现在下载它，JavaScript中的函数名会有所变化。它们并不是真正的破坏性更改，scrollHorizontal已被重命名为scrollRightToLeft，并添加了一个新函数scrollLeftToRight。纵向滚动也有相应的更改。

ContentScroller

该控件使用ASP.NET模板化控件技术，允许您定义要滚动的内​​容。因此，您可以为滚动提供几乎任何内容。主要操作发生在控件的PreRender事件中，此时会替换令牌。它们（令牌）主要与提供动态生成的div的宽度、高度和ID有关。然后实例化ContentTemplate并将其添加到这些div中。JS通过ID获取这些div，并使它们在屏幕上移动（left=left-2）或垂直移动（top=top-2）。因此，控件本身非常简单。

使用代码

代码本身非常易于使用。请看以下示例。

<%@ Register Namespace="Rahul" TagPrefix="cs" %>
	<cs:ContentScroller runat="server" Width="300" Height="200" 
		scrollDirection="BottomToTop" scrollSpeed="2">
		<ContentTemplate>
			<pre>Put any html or ASP.NET controls here. 
			No matter how long or high it gets, it works.</pre>
			<asp:Label runat="server" BorderStyle="Dashed" 
			BorderWidth="2px" Text="Sample"></asp:Label>

			<pre>Put any html or ASP.NET controls here. 
			No matter how long or high it gets, it works.</pre>
			<asp:Label runat="server" BorderStyle="Dashed" 
			BorderWidth="2px" Text="Sample"></asp:Label>

			<pre>Put any html or ASP.NET controls here. 
			No matter how long or high it gets, it works.</pre>
			<asp:Label runat="server" BorderStyle="Dashed" 
			BorderWidth="2px" Text="Sample"></asp:Label>

			<pre>Put any html or ASP.NET controls here. 
			No matter how long or high it gets, it works.</pre>
			<asp:Label runat="server" BorderStyle="Dashed" 
			BorderWidth="2px" Text="Sample"></asp:Label>
		</ContentTemplate>			
	</cs:ContentScroller>

您放在ContentTemplate中的任何内容都将由控件滚动。我利用了ASP.NET控件模板的强大功能，允许将任何内容嵌入ContentTemplate。这还需要调整JavaScript（基本上需要动态生成一些控件，并让JavaScript引用它们进行滚动）。

关注点   

  • scrollDirection属性是关键。将其设置为LeftToRight、RightToLeft、BottomToTop或TopToBottom以指定方向，或者如果需要，将其设置为None以完全关闭滚动。内容仍将静止显示在屏幕上。
  • scrollSpeed是另一个有趣的部分。将其设置为介于1和10之间的值，以控制滚动速度，值越高速度越快。默认值为2。

示例场景

这是一个我使用此控件滚动动态生成内容的示例场景：

<%@ Register Namespace="Rahul" TagPrefix="cs" %>
<cs:ContentScroller runat="server" ID="scrollerAlert" scrollDirection="RightToLeft" 
    Height="<%# Me.alertController.scrollHeight %>" 
    Width="<%# Me.alertController.scrollWidth %>">
    <ContentTemplate>
        <table cellpadding="0" cellspacing="0">
            <tr valign="top">
	        <asp:Repeater runat="server" ID="rptAlert">
		   <ItemTemplate>
			<td valign="top" style="padding-right: 30px">
			    <a href="#" style="cursor: hand">
				<asp:Label runat="server" Text='<%# DataBinder.Eval
				(Container.DataItem, "lcNumber") %>' /><br />
				<asp:Label runat="server" Text='<%# 
				Me.formatDocuments(Container.DataItem) %>' /><br />
				</a>
						</td>
					</ItemTemplate>
				</asp:Repeater>
			</tr>
		</table>
	</ContentTemplate>
</cs:ContentScroller>

历史

  • 2008年12月15日：首次发布
  • 2009年3月2日：更新了源代码
  • 2009年5月22日：更新了源代码
© . All rights reserved.