ASP.NET 跨浏览器 工具栏

分享于 

13分钟阅读

Web开发

  繁體

Sample Image

在Mozilla中水平工具栏选中的项将显示滚动图像。

内容

简介

我需要一个 ASP.NET 项目的灵活工具栏组件。 首先,我在浏览 WWW,但没有找到任何真正符合我要求的东西:

  • 设计器支持加上灵活的用于运行时操作的API。
  • 跨浏览器 支持( 不需要支持. x 4 )。
  • 轻松安装和部署( 没有要复制的支持文件 等等 )。
  • 通过CSS灵活的格式化和皮肤外观。
  • 免费部署- 它应该在开放源码项目中使用。

因此,我提出了自己的解决方案。 组件在所有主流浏览器上都表现良好,并且由于它的丰富的设计器支持,它也很容易使用。 主要功能:

  • 在所有主要浏览器上呈现良好的效果。
  • 完整设计器支持。
  • 支持预定义项目类型,如图像,文本字段,链接或者图像按钮。
  • 任意控制可以通过容器项目插件插入。
  • 可选的翻转图像。
  • 如果禁用了项,则支持不同的图像。
  • 水平和垂直渲染。
  • 方便的事件处理程序。
  • 自定义分隔符。

这里组件的联机在线演示在这里是

在设计器中生成工具栏

要创建工具栏,不需要编码。 如果已经将控件添加到ide的工具箱中,只需将它的拖到 web。 由于还没有预览,它将显示灰色 rectangle:

控件的所有属性都可以通过属性网格的工具栏部分访问。 它们是非常自我解释的:

要向工具栏添加项,只需单击 Items 属性( 请参见上方)的按钮即可打开新的设计器窗口。 below 是我在项目示例中使用的工具栏设置的屏幕截图。 如你所见,工具栏包含六个不同项。 可以通过下拉列表中的下拉列表轻松添加新项目:

设置工具栏和工具栏项非常简单,因为在设计时你可以得到工具栏的适当预览。 所以了解组件的最好方法是在ide中播放不同的设置。

工具栏项

工具栏内置了支持各种项类型的内置工具。 此外,可以使用空容器项将任意控件插入到工具栏中。 ( 顺便说一下,你也可以使用没有工具栏的。 如果你只需要在你的页面上带有翻转的单个图像按钮- 只需直接在你的网页窗体上拖动控件即可。

ToolbarImage

这里项目呈现一个简单的图像,其中带有可选的翻转。 可以指定一个附加的DisabledImageUrl,如果项属性的RenderDisabledtrue 可以指定一个附加标签( LabelText 属性),它在图像的旁边呈现。

ToolbarButton

这里项目呈现一个图像按钮,该按钮回发到服务器并在工具栏上引发一个 ItemSubmitted 事件。 ToolbarImage 控件一样,该项目支持滚动和禁用的图像。 如果项属性的RenderDisabled 设置为 true 通常渲染普通图像而不是图像按钮。

可以指定附加标签( LabelText 属性),它在图像按钮的旁边呈现。 在以后的版本中,我将通过一个 LinkButton 替换这个标签,该也回发到服务器。

ToolbarLink

这里项目呈现超链接的图像。 ToolbarImage 控件一样,该项目支持滚动和禁用的图像。 如果项属性的RenderDisabled 设置为 true 通常呈现一个普通图像而不是一个链接。 可以指定附加标签( LabelText 属性),它作为超链接( 请参见上面的垂直工具栏示例图像)的一部分呈现。

ToolbarTextBox

这里项目呈现 ASP.NET TextBox。 你可以通过项的Text 属性获取/设置项的文本。 要格式化文本框,请使用项本身的属性( CssClassWidthHeight 等等 )。 如果文本已经更改,这里项目将在工具栏上引发 ItemSubmitted 事件。 标准 ASP.NET TextBox 类似,它提供了 AutoPostBack 属性,它会在文本发生更改时自动向服务器发送。

ToolbarLabel

呈现一个简单的文本,用HTML括起来 span 标记。可以用于在它的自己的项单元格中呈现文本。 这是一种安全的方式,可以在不获取格式问题的情况下将文本分配给工具栏。

ToolbarSeparator

呈现分隔符项。分隔符是非常简单的控件,这些控件通过工具栏的属性进行配置。 这样可以方便地同时配置工具栏的所有分隔符。 如果你希望将项目更灵活地分开,只需使用 ToolbarImage 项。

ControlContainerItem

此类是任意控件的空容器。 这使你可以在运行时将任意控件插入工具栏。

假设要将 ASP.NET DropDown 控件添加到工具栏中:

  • 使用设计器( 不要忘记 ItemId - 你需要它在运行时引用项目) 将 ControlContainerItem 添加到工具栏。
  • 运行时,你可以只使用两行代码指定 DropDown 控件:
privatevoid Page_Load(object sender, System.EventArgs e)
{ 
 //get the container item ToolbarItem item = this.Toolbar1.Items["DropdownItem"];
 //add the dropdown to the container's Controls collection item.Controls.Add(this.MyDropDownList);
}

示例项目包含一个web窗体( containeritem.aspx ),它在运行时添加一个 CheckBox 控件。

使用代码

postback 事件处理

可以通过工具栏事件的ItemPostBack,为工具栏项的事件处理程序提供 register 事件处理程序。 如果发生事件,工具栏将把导致 postback的项提交到事件处理程序。 如果有几个项目回发到服务器,你可能会使用 ItemId 属性来决定如何响应该事件。

典型的事件处理程序如下所示:

///<summary>/// Handles the toolbar's button events.///</summary>///<paramname="item">Clicked toolbar button.</param>privatevoid Toolbar1_ItemPostBack(ToolbarItem item)
{
 if (item.ItemId == "SAVE")
 {
 //save something }
 elseif (item.ItemId == "DELETE")
 {
 //delete something }
}

运行时处理工具栏项

你可以在运行时轻松自定义工具栏。 工具栏 Collection的Items 提供了查找,添加或者删除项所需的所有内容:

例如:示例项目的编辑按钮在运行时创建。 在代码 below 中,创建一个新的ToolbarButton 对象。 然后,确定保存按钮的索引,并使用它在保存按钮之后添加新的编辑按钮。

///<summary>/// Creates an additional toolbar button and adds it to/// the toolbar's <c>Items</c> collection.///</summary>privatevoid CreateEditButton()
{
 //create an"edit" button ToolbarButton editItem = new ToolbarButton();
 editItem.ID = "EditItem";
 editItem.ImageUrl = "images/edit.gif";
 editItem.RollOverImageUrl = "images/edit_ro.gif";
 editItem.ItemId = "Edit";
 editItem.ToolTip = "Click to enable save button";
 editItem.ItemCellWidth = Unit.Pixel(100);
 //get the index of the save button and insert the//edit button right after this oneint index = this.Toolbar1.Items.IndexOf("Save");
 this.Toolbar1.Items.Insert(index + 1, editItem);
}

注意,动态创建的工具栏项控件不存储在ViewState中,因此你必须在 postback 中重新创建它们 !

故障排除

翻转不工作

JavaScript使用 id HTML元素的属性,该元素包含要交换翻转图像的图像( HTML图像或者图像按钮)。

<imgsrc="save.gif"id="saveitem"/>

但是,只有在正确设置 ASP.NET ToolbarItem 对象的ID ( 非 ItemId ) 属性时,这里属性才可用。 因此,如果滚动失败,请检查控件的( 当然,在检查了你的图像url之后,当然)的id。

如果在设计器中配置了工具栏,则会自动生成 id。 但是,如果在运行时通过代码添加项,则需要自己指定标识:

//create an"edit" buttonToolbarButton editItem = new ToolbarButton();
editItem.ID = "EditItem";

非浏览器浏览器常见格式故障

每个默认情况下,ASP.NET 为所有非ie浏览器(。) 呈现降级输出,以防止工具栏呈现CSS样式。 例如如果你使用图像项的标签,工具栏可能会出现错误:

要正确标识 Firefox &公司,有更新的browserCaps配置( 代表"浏览器功能") 是很重要的。 Rob Everhardt在这里做了一个很好的工作。 你可以在他的网站上找到 browserCaps,链接和下载的介绍。

如果由于某些原因无法更新 browserCaps,还可以使用外部样式表( 该示例假定工具栏的CSS类为 mytoolbar ) 中的声明来修复工具栏布局。

/* adjust images and image buttons via external CSS */
.mytoolbar img,. mytoolbar input
{
 vertical-align:middle;
 border: none;
}

这个样本看起来像是在网关 4上的垃圾。

是的,而且我可以完美地活下去。 我不得不在废弃的HTML标签之间进行选择 对齐 , 边框 等等 ) 和适当的CSS外观。 我选择了与我测试过的所有主要浏览器完美配合的后者。

但是,如果你需要这个控件的低级版本,你应该能够使用非常少的( 但不要让我为你做这个- ) 来获得它。 查看 ToolbarImageItem 类的呈现方法,并使用相应的HTML属性交换CSS呈现。

确认和许可证

为了为滚动链接输出 JavaScript,我从 MetaBuilders'rolloverlink 开始,这是我根据需要改编的过程。 MetaBuilders在他们的站点上提供了很多控件- 查看。

水平工具栏示例的background 主题取自伟大的PHPBB2 公告板。 垂直工具栏示例的图形是我的,请随意使用。

这里控件是在 LESS 限制的GNU通用 public 许可证( LGPL ) 下发布的。 尽管你不能把你的名字写在它上面,并且声明它是你的( 甚至出售它),但是你可以随意调整它。 免费和商业应用 吧 !

新闻稿

这是第一个版本,我很肯定会有 Bug 补丁和增强功能。 如果你不想查看更新,可以在我的网站上订阅 newsletter newsletter。

历史记录

  • V 1.0: 初始释放( Jan 22,2005 )
  • V 1.01: 具有'可以本地化'属性的更新属性,支持 i18n。
  • V 1.02: 使库符合 CLS ( 感谢 Jorge Castellanos )

tool  asp  asp-net  bro  浏览  跨浏览器  
相关文章