Y.A. R.D

分享于 

6分钟阅读

Web开发

  繁體

介绍

这是一个可以帮助你制作可以由用户定制的页面的控件。 控件显示类似的属性,如我的MSN拖放。

背景

我看到很多人发布了他们的查询,比如我的MSN。 其中一些人还发布了微软在. armx 扩展方面做的事情。 我不知道微软在做什么。 但是在这里我重写了 System.Web.UI.WebControls.Panel 类。

这个控件很容易使用。 控件公开一些 public 设置可以拖动特性的属性。

使用代码

我已经重写了 System.Web.UI.WebControls.Panel 类。 这样用户就可以使用 Panel 类公开的所有属性和方法。 控件有三个 public 属性:

  • Draggable - 提示 Panel 是否可以拖动。
  • PanelX - 获取X 坐标的Panel 电流。
  • PanelY - 获取Y 坐标的Panel 电流。
<%@RegisterTagPrefix="cc1"Namespace="Drag"Assembly="Panel"%><cc1:NewPanelDraggable=true id="NewPanel1"style="position:absolute; 
 width:155px; height:115px; z-index:1;"runat="server"cssClass="drag"align=center></cc1:NewPanel>

上面 示例非常简单。 为了得到类似我的MSN,我添加了一个 <表>Panel 中获取外部结构,以及在该表中添加内容的另一个 table。

如果未完成这里操作,用户可以通过单击 Panel 中的任意位置来拖动 Panel。 这可以由文件中的以下行修改。

strRender.Append("if (event.srcElement.parentElement" + 
 ".parentElement.parentElement.parentElement.tagName=="DIV"){");

第一个 parentElement 选择 <TD> 第二个 parentElement 选择 <TR> 第三个 parentElement 选择 <表> 第四个 parentElement 选择 <DIV>Panel 呈现的。 你还可以更改类 <TD> 用于拖动 Panel的。

<%@RegisterTagPrefix="cc1"Namespace="Drag"Assembly="Panel"%><cc1:NewPanelDraggable=true id="NewPanel1"style="position:absolute; width:155px; height:115px; z-index:1;"runat="server"cssClass="drag"align=center><tablecellspacing=0 cellpadding=0 border=0 width=100% height=100%><trclass="ss"height=22><tdclass="mod_tlc"width=6></td><tdclass="modhead"width=100%><asp:Labeltext="My Inbox"cssClass="tan-bold"runat="server/"></td><tdclass="mod_trc"width=6></td></tr> 
 <tr><tdcolspan=3><tablecellspacing=0 cellpadding=0 width=100% height=100% class="tables"><tr><td>Your content goes here</td></tr></table></td></tr></table></cc1:NewPanel>

为了记住每个 Panel的位置,一旦用户将 Panel 从一个位置移动到数据库中,就必须保存X 和Y 坐标。

我已经在 Web.Config 文件中设置了 ConnectionString。 连接在构造函数中创建和打开。 在鼠标上,我用 PanelIdUserId 更新了数据库中的X 和Y 位置。

table 结构如下所示:

  • UserIdVarchar ( 50 )
  • PanelIdVarchar ( 50 )
  • XInt
  • YInt

只在 CreateChildControls() 中设置 Panel的X 和Y 坐标是可能的。

this.Style.Add("Top",myReader["y"].ToString());this.Style.Add("Left",myReader["x"].ToString());

我已经附加了我从我的MSN网站上得到的Style.css。 在aspx页面和通常的代码页中都可以添加任何内容,并使它们在网页中可以拖拽。

我已经硬编码了 Draggable的属性 true 而且,在默认情况下,当页面加载时,我给所有 Panel的draggable特性 draggable MSN。

publicbool Draggable
 {
 get {
 return _draggable;
 }
 set {
 _draggable = true;
 }
 }

使用控件的步骤

  • 将ZIP文件的内容解压到虚拟目录中。
  • 将DLL复制到bin目录。
  • 使用上面提到的结构创建 table"测试"。
  • 更改 Web.Config 文件中的ConnectionString
  • 使用用户名和密码登录( 两者都应该相同,比如: USER=test PASSWORD=test )
  • Panel的位置移到页面的任意位置。
  • 使用相同的用户名和密码注销和登录以查看自定义。

用户还可以在 table 中包含一个 PageId,并在整个项目中使用该控件。


相关文章