自定义Dropdownlist 下拉框的Tooltip

      ASP.NET 里面的 Dropdownlist 控件是一个数据绑定控件,它作为一个易用强大的数据源展示控件是每个Web Application 和网站必不可少的UI组件,但是我们也很容易就发现它的一个缺点就是当下拉框选项列表里某个选项的字符长度大于下拉框本体的宽度时,选项将被截断.我们将不易完全看清选项进行选择.

    所以我们在这里需要完成的是对Dropdownlist 控件实施某种措施,让它可以在上述情况下将下拉框选项内的字符内容全部展现给用户以方便用户进行选择操作.

        在ASP.NET 框架下 Dropdownlist 控件在客户端是以 <select> 这个HTML标签来呈现的,它里面的选项也将被解析成 <option> 元素,根据WC3标准,<option>有个title 属性是为选项添加 tooltip 的,我们就可以利用这个特性,将下拉列表框里的每个选项的文本内容复制一份至title 属性里,这时当用户将鼠标指针指向选项时将能看见选项内容的tooltip 方便他了解选项内容进行操作.

方案一: 在服务器端给Dropdownlist 中的 ListItem 添加 title 属性

实现如下:

在服务器端代码创建方法:

        protected void DropDownList1_DataBound(object sender, EventArgs e)

        {

            ListItemCollection items=((DropDownList)sender).Items;

            for (int i = 0; i < items.Count; i++)

            {

                ListItem item = items[i];

                item.Attributes.Add("title", item.Text);

            }

        }

 

并将 Dropdownlist 的DataBound 事件委托 关联上面的方法.至此,当有数据源绑定到相关的Dropdownlist控件时,它的选项就会有 Tooptip 的效果.

 

方案二:使用Javascrip操作HTML元素利用若干个 DIV元素模拟替代页面上的DropDownList.

方案一：是一种快速便捷的实现，但是测试后得知，<option> 的title 属性不被ie6支持，所以此种方法在ie6下无法实现.

方案二：是一个灵活自由的实现可以在此基础上多加完善以实现更优秀的功能，但是它的开发周期长，机制复杂，不容易被掌握是硬伤。

方案一：有因为用户可能使用Ie6，造成我们为用户设计的这个功能无效的风险。

方案二：由于客户端脚本实现复杂，有可能出现浏览器运行错误，并且都是运行时操作元素，如果页面元素过多的话，可能元素间会产生干扰，造成操作失败，功能失效。

 

方案一：立马就能使用

方案二：一个DropList控件3小时/人  另：重写DropDownList 控件的呈现方法将此功能集成将更易部署此功能。