简单的自定义Combobox控件

 

 

根据前面对复合控件的开发的简单研究,综合前面所学的知识,实现了一个简单的ComboBox的控件的练习,程序的设计思路如下,利用一个input标签、一个Img标签、和前台的window.createPopup()对象生成一个简单的ComboBox控件,将描述此控件的样式文件,和执行的前台的js文件放如一个固定的文件夹my controls中以便用户使用。本示例仅仅实现了简单的combox控件的功能,还有很多地方值得进一步修改。

.具体的实现过程如下.
第一步:建立自定义控件的工程命名为myComboBoxs,至于具体的创建过程在前面已经叙述过了在此不在叙述。
第二步:建立测试工程TestCombobox
第三步:建立描述控件样式的样式表文件和执行前台功能的js文件.

ComboBox具体实现代码如下: 

using  System;
using  System.Collections.Generic;
using  System.ComponentModel;
using  System.Text;
using  System.Web;
using  System.Web.UI;
using  System.Web.UI.WebControls;

[assembly: TagPrefix(
" my.ComBox " " ylj " )] 
namespace  my.ComBox
{
    [DefaultProperty(
"Text")]
    [ToolboxData(
"<{0}:ComBox runat=server>")]
    
public class ComBox : WebControl,ICallbackEventHandler
    
{
        [Bindable(
true)]
        [Category(
"Appearance")]
        [DefaultValue(
"")]
        [Localizable(
true)]
        
public override string ID
        
{
            
get
            
{
                
return base.ID;
            }

            
set
            
{
                
base.ID = value;
            }

        }

        
///
        
/// 获取用户选择内容
        
///

        public string Text
        
{
            
get
            
{
                String s 
= (String)ViewState["Text"];
                
return ((s == null? String.Empty : s);
            }


            
set
            
{
                ViewState[
"Text"= value;
            }

        }

        
/// 
        
/// 是否允许用户输入值,为使控件既可以同过选择值,又可以通过用户输入设置此属性。
        
/// 

        public bool AllowWrite
        
{
            
get
            
{
                
if (ViewState["AllowWrite"== null)
                
{
                    
return true;
                }

                
else
                
{
                    
return (bool)ViewState["AllowWrite"];
                }

            }

            
set 
            
{
                ViewState[
"AllowWrite"= value;
            }

        }

        
/// 
        
///  生成ComBoxItem的值
        
/// 

        public string ItemsValue
        
{
            
get
            
{
                
if (ViewState["ItemValue"== null)
                
{
                    
return "";
                }

                
else
                
{
                    
return ViewState["ItemValue"].ToString();
                }

            }

            
set
            
{
                ViewState[
"ItemValue"= value;
            }

        
        }

        
/// 
        
/// 设置控件的宽度
        
/// 

        public override Unit Width
        
{
            
get
            
{
                
if(ViewState["Width"]==null)
                
{
                    
return base.Width;
                }

                
else
                
{
                    
return (Unit)ViewState["Width"];
                }

            }

            
set
            
{
                ViewState[
"Width"= value;
            }

        }

        
/// 
        
/// 样式表和js文件的所在路径
        
/// 

        public string ControlsURL
        
{
            
get
            
{
                
if (ViewState["ControlsURL"== null)
                
{
                    
return "My Controls/";
                }

                
else
                
{
                    
return ViewState["ControlsURL"].ToString();
                }

            }

            
set
            
{
                ViewState[
"ControlsURL"= value;
            }

        }

        
public string CssStyle
        
{
            
get
            
{
                
if (ViewState["CssStyle"== null)
                
{
                    
return "Default";
                }

                
else
                
{
                    
return ViewState["CssStyle"].ToString();
                }

            }

            
set
            
{
                ViewState[
"CssStyle"= value;
            }

        }

        
        
public event EventHandler ComBox_Request;
        
protected virtual void OnComBox_Request(object sender,EventArgs e)
        

            
if(ComBox_Request!=null)
            
{
                ComBox_Request(
this, e);
            }

        
        }

        
public string  GetCallbackResult()
        

            
return ItemsValue;
        }

        
void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
        
{
            OnComBox_Request(
this, EventArgs.Empty);
        }

        
        
protected override void  OnPreRender(EventArgs e)
        
{
            ClientScriptManager curClientScriptManger 
= Page.ClientScript;
            curClientScriptManger.RegisterClientScriptInclude(
this.GetType(), "0", ControlsURL.ToString() + "JS/CreateCombox.js");
            
base.OnPreRender(e);
          
        }

        
protected override void RenderContents(HtmlTextWriter output)
        
{
            output.AddAttribute(HtmlTextWriterAttribute.Type, 
"text/css");
            output.AddAttribute(HtmlTextWriterAttribute.Rel, 
"stylesheet");
            output.AddAttribute(HtmlTextWriterAttribute.Href, ControlsURL 
+ "Css/ComBox/ComBox.css");
            output.RenderBeginTag(HtmlTextWriterTag.Link);
            output.RenderEndTag();
            output.AddAttribute(HtmlTextWriterAttribute.Type, 
"Text");
            output.AddAttribute(HtmlTextWriterAttribute.Value, 
"");
            output.AddAttribute(HtmlTextWriterAttribute.Class, 
"Combox_"+CssStyle.ToString());
            output.AddAttribute(HtmlTextWriterAttribute.Id, 
"Textbox_" + ID);
            output.AddAttribute(HtmlTextWriterAttribute.Onclick, Page.ClientScript.GetCallbackEventReference(
thisnull"CreatComboBox""Textbox_" + ID) + ";return false;");
            
if ((bool)AllowWrite == true)
            
{
                output.AddAttribute(HtmlTextWriterAttribute.ReadOnly, 
"readonly");
            }

            output.RenderBeginTag(HtmlTextWriterTag.Input);
            output.RenderEndTag();
            output.AddAttribute(HtmlTextWriterAttribute.Src, ControlsURL.ToString() 
+ "Css/ComBox/Img/DropArrow.gif");
            output.AddAttribute(HtmlTextWriterAttribute.Class, 
"BtnImg_"+CssStyle.ToString());
            output.AddAttribute(HtmlTextWriterAttribute.Onclick, Page.ClientScript.GetCallbackEventReference(
thisnull"CreatComboBox""Textbox_" + ID) + ";return false;"); ;
            output.RenderBeginTag(HtmlTextWriterTag.Img);
            output.RenderEndTag();
        }

       
    }

}

具体生成控件并实现功能前台的js脚本代码如下:

 


var  oPopup = window.createPopup();
var  popt = false ;
var  ShowPopupFlag = false ;


function  CreatComboBox(str,obj)
{
    
var Arr=str.split(",");
    
var CreateCheckBox = '';
    
var TextBox=obj.id;
    
var PopTop = getIET(obj)+21;
    
var PopLeft=getIEL(obj);
   
    
for(var i=0;i<Arr.length;i++)
    
{
        CreateCheckBox
+=""+ i +"" class="ComboBoxItem_Mac" οnmοuseοver='this.className="ComboBoxItemHover_Mac"'  οnmοuseοut='this.className="ComboBoxItem_Mac"'>"+i+" value="+Arr[i]+" οnclick=GetValeu(this) />"+i+"" οnclick=ChangeChildStatus(this.id)>"+Arr[i]+"
"
    }

    
    
var styleStr='body{background-image: url(My Controls/Css/ComBox/Img/dropdownBg.gif);border: 1px solid #C3C3C3;border-top: none;    scrollbar-face-color: #F8F6F2;scrollbar-highlight-color: #ffffff;scrollbar-shadow-color:#E9E9E9;scrollbar-3dlight-color:#DBDBDB;scrollbar-arrow-color:#787878;scrollbar-track-color: #F5F5F5;scrollbar-darkshadow-color: #AEAEAE; }.ComboBoxItem_Mac{font-family:Arial;font-size:11px;color:#333333;padding: 0px;text-decoration:none;text-align:left;}.ComboBoxItemHover_Mac{font-family: Arial;font-size:11px; color:white;text-decoration: none;background-color: #777777;cursor: hand;padding: 0px;text-align: left;}';
    
    
var HtmlStr=''+styleStr+''+CreateCheckBox+''
    
    oPopup.document.body.innerHTML 
= "";
    
var oPopBody = oPopup.document.body;
    oPopup.show(PopLeft,PopTop, 
122150, document.body); 
    oPopup.document.write(HtmlStr);
}

function  getIET(e) {
var t=e.offsetTop;
while(e=e.offsetParent){
t
+=e.offsetTop;
}

return t;
}


function  getIEL(e) {
var l=e.offsetLeft;
while(e=e.offsetParent){
l
+=e.offsetLeft;
}

return l;}

前台的样式文件定义如下:

.Combox_Default
{
    background-image
: url(Img/bg.gif);
    background-repeat
: repeat-x;
    vertical-align
: middle;
    font-family
: Arial, Verdana;
    border
: 0px;
    margin-right
: 0px;
    border-left
: 1px solid #B3B3B3;
    font-size
: 12px;
    color
: black;
    padding-top
: 0px;
    padding-left
: 3px;
    height
: 21px;
    width
:100px
 
}

  .BtnImg_Default
    
{
    vertical-align
: middle;
    
}

 本示例仅仅简单的实现了ComboBox的部分功能,本人希望它还能支持主题皮肤的功能,因此将继续研究下去。

你可能感兴趣的:(简单的自定义Combobox控件)