DooIT@江西搜才网

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  51 随笔 :: 17 文章 :: 1151 评论 :: 28 引用

公告

V0.1(2007-1-23)

  • 内嵌HTML
  • IE6.0+ only
  • 2000风格

 

<HTML><HEAD><TITLE>Class_Combo</TITLE>
<META content="MSHTML 6.00.2800.1589" name=GENERATOR>
<META content="" name=Author>
<META content="" name=Keywords>
<META content="" name=Description>
<SCRIPT language=JavaScript>
<!--
<!--
/**  
**    ==================================================================================================  
**    ClassName  :CLASS_COMBO  
**    Intro      :a control to replace select control in IE
**    Example    :  
      Ver        : 0.1
    ---------------------------------------------------------------------------------------------------  
  
     <div id="demo"></div>
     <SCRIPT LANGUAGE="JavaScript">
     <!--
        var de = new CLASS_COMBO('demo',100);
   de.add(new Option("<font color='red'>Red Word</font>","a"));
     //-->
    < /SCRIPT>
  
    ---------------------------------------------------------------------------------------------------  
**    Author    :ttyp  
**    Email     :ttyp@21cn.com  
**    Date      :2007-1-23
**    ==================================================================================================  
*
*/ 
 
function CLASS_COMBO(id,width){  
  
this.opended = false;
  
this.selectedIndex = -1;
  
this.options = new Array();
  
this.value  = "";
  
this.text  = "";
  
this.id   = id;
  
var me = this;
  
var ct = null/* table */
  
var hv = null/* hidden input */
  
var pl = null/* show planel */
  
var pt = null;
  
var o = document.getElementById(id);
  
if(o){
   
var tb = document.createElement("table");
    o.appendChild(tb);
    
this.handle = tb;
   
   
var tr = tb.insertRow();
   
var tc = tr.insertCell();
   
var th = tr.insertCell();    
    tc.style.width 
= (width - 14+ 'px';
    tc.style.whiteSpace 
= "nowrap";
    ct 
= tc;
    th.style.fontFamily
="webdings";
    th.style.fontSize 
= "6pt";
    th.style.width 
= "14px";
    th.style.backgroundColor 
= "#f8f8f8";
    th.align 
= "center";
    th.innerText 
= "6";
    th.onmouseover
= function(){this.style.cursor='default';}
    th.onselectstart 
= function(){return false;}
    tb.style.borderCollapse 
="collapse";
    tb.style.fontSize 
="9pt";
    tb.style.tableLayout 
= "fixed";
    tb.border 
= 1;
    tb.borderColor 
= "#f0f0f0";
    tb.cellSpacing 
= 0;
    tb.cellPadding 
= 1;
    tb.setAttribute(
"accoc",id + "__combo_contain");
    tb.onclick 
= function(){tb.focus();me.show();}
    tb.onmouseover 
= function(){
     
this.borderColor = "#316ac5"/*IE*/
     
this.style.border = "#316ac5 1px solid"/* Safari, Opera and Mozilla */
    }
    tb.onmouseout 
= function(){
     
this.borderColor = "#f0f0f0"/*IE*/
     
this.style.border = "#f0f0f0 1px solid"/* Safari, Opera and Mozilla */    
    }
    tb.onblur
=function(){
     
var active = document.activeElement;
     
var stopHide = false;
     
if(active!=null){      
      
if(active.tagName =="TD"){
       
while(active!=null&&active.tagName!="TABLE"){
        active 
= active.parentNode;
       }
      }
      
var ac = active.getAttribute("accoc");
      
if(ac!=null&&typeof(ac)!="undefined"&&ac==id + "__combo_contain"){    
       stopHide 
= true;
      }
     }
     
if(stopHide==false){
      me.hide();
     }
    }

    pl 
= document.createElement("div");
    o.appendChild(pl);
    pt 
= document.createElement("table");
    pl.appendChild(pt);
    
var w,l,t,h;
    
    
var r = getAbsolutePos(me.handle);
    w 
= r.w;
    l 
= r.x;
    t 
= r.y+r.h;
                pl.style.position 
= "absolute";
                pl.style.top 
= t;
                pl.style.left 
= l;
                pl.style.width 
= w;
                pl.style.overflowY  
= "auto";
                pl.style.overflowX 
= "hidden";      
                pl.style.backgroundColor 
= "#ffffff";
                pl.style.border  
= "1px solid #f0f0f0";
    pl.style.display 
= "none";
    pl.style.padding 
= "0";
                pl.setAttribute(
"accoc",id + "__combo_contain"); /* for scrolling */
                pl.onblur 
= me.handle.onblur;
                pl.onselectstart  
= function(){return false;}
                pl.onfocus 
= function(){ me.handle.focus();}
    pt.style.borderCollapse 
="collapse";
    pt.style.fontSize 
="9pt";
    pt.style.width 
= "100%";
    pt.border 
= 0;
    pt.cellSpacing 
= 0;
    pt.cellPadding 
= 1;
    hv 
= document.createElement("input");   /* Create hidden input for submit */
    hv.type 
= "hidden";
    hv.name 
= id + "__combo_hiden_value";    
    hv.id 
= id + "__combo_hiden_value";
    o.appendChild(hv);
    
  }
  
this.add = function(op){
   
var tr = pt.insertRow();
   
var tc = tr.insertCell();
   
var dv = document.createElement("div");
    tc.appendChild(dv);
    dv.style.width 
= "100%";
    dv.style.border 
= "1px solid #f0f0f0";
    dv.style.padding 
= "1 1 1 1";
    dv.style.cursor 
= "hand";
    dv.style.wordBreak 
= "break-all";
    dv.style.wordWrap 
= "break-word";
    dv.innerHTML  
= op.text;
    dv.onmouseout 
= function(){this.style.border = "1px solid #f0f0f0";}
    dv.onmouseover
= function(){this.style.border = "1px solid #316ac5";}
    dv.onmousedown 
= function(){var nn = this;while(nn!=null&&nn.tagName!="TR"){nn = nn.parentNode;}me.setIndex(nn.rowIndex);}  /*when you use onclick event,the event while be ignored*/
   
if(this.selectedIndex<0){ /*set the first option for default*/
    
this.setIndex(0);
   }
   
this.options[this.options.length] = op;
   
/*
    * adjust panel height
    
*/
   
if(this.options.length>10)
   {
    pl.style.height 
= "200px";
   }
  }
  
/* OnClick Event */
  
this.onclick = function(){
  }
  
/* OnChange Event */
  
this.onchange = function(){
  }
  
this.setIndex = function(index){
   
if(index>=0&&index<this.options.length){    
    
var op = this.options[index];
    
this.selectedIndex = index;
    
this.value = hv.value;
    
this.text = op.text;
    ct.innerHTML
= toText(op.text);
    hv.value 
= op.value; /*for submit*/
    
this.onchange(); /* fire event */
   }
else{
    
this.selectedIndex = -1;
    
this.value = "";
    
this.text = "";
    hv.value 
= "";
    ct.innerText
= "";
    
this.onchange(); /* fire event */
   }
  }
  
  
function getAbsolutePos(el){
   
var r = { x: el.offsetLeft, y: el.offsetTop,w:el.offsetWidth,h:el.offsetHeight};
   
if (el.offsetParent){
    
var tmp = getAbsolutePos(el.offsetParent);
     r.x 
+= tmp.x;
     r.y 
+= tmp.y;
   }
   
return r;
  };  
  
  
function toText(txt){ /*inner function*/
   
var o = document.createElement("div");
    o.innerHTML 
= txt;
   
var s = o.innerText;
   
delete o;
   o 
= null;
   
return s;
  }
  
this.getText = function(i){
   
var item = -1;
   
if(i==null&&typeof(i)=="undefined"){
    item 
= this.selectedIndex;
   }
else{
    item 
= i;
   }
   
if(this.options.length>0&&item>=0&&item<this.options.length){
    
return toText(this.options[item].text);
   }
else{
    
return undefined;
   }
  }
  
this.show=function(){
   
this.opened = !this.opened;
   
if(this.opened&&this.options.length>0){
    pl.style.display 
= "";
   }
else{
    pl.style.display 
= "none";
   }
  }
  
this.hide=function(){
   
this.opened = false;
   pl.style.display 
= "none";
  }
  
this.clear = function(){  
   
this.hide();
   
this.setIndex(-1);
   
this.options.length = 0;
   
for(var i=pt.rows.length-1;i>=0;i--){    
    pt.deleteRow();
   }
  }
  
this.removeAt = function(index){
   
if(index>=0&&index<this.options.length){
    
this.hide();
    
this.options.splice(index,1);
    pt.deleteRow(index);
    
    
if(index<=this.selectedIndex){
     
if(this.options.length>0){
      
if(index<this.options.length){
       
this.setIndex(index);
      }
else{
       
this.setIndex(this.options.length-1);     
      }
     }
else{
      
this.setIndex(-1);
     }
    }
    
if(this.options.length<10){
     pl.style.height 
= "";
    }
   }
  }
 }
//-->
</SCRIPT>
</HEAD>
<BODY><STRONG>Style:</STRONG> 
<DIV id=demo></DIV>DSGDFGSDFG 
<P></P><BR><STRONG>Font:</STRONG> 
<DIV id=demo1></DIV>
<SCRIPT language=JavaScript>
 
<!--
 
var de = new CLASS_COMBO('demo',228);
  de.add(
new Option("<font color='red'>Red Word</font>","a"));
  de.add(
new Option("<strong>Strong Word</strong>","b"));
  de.add(
new Option("<font size=6>Big Word</font>","c"));
  de.add(
new Option("<u>Underline</u>","d"));
  de.add(
new Option("<STRIKE>Strike Word</STRIKE>","e"));
  de.add(
new Option("<cite>Cite Word</cite>","f"));
  de.add(
new Option("<span style='background-color: black;color:white;width:100%'>Black Background</span>","g"));
  de.add(
new Option("<marquee>hello</marquee>","h"));

  de.add(
new Option("long word test","i"));
  de.add(
new Option("<strong>Strong Word</strong>","b"));
  de.add(
new Option("<font size=6>Big Word</font>","c"));
  de.add(
new Option("<u>Underline</u>","d"));
  de.add(
new Option("<STRIKE>Strike Word</STRIKE>","b"));
  de.add(
new Option("<cite>Cite Word</cite>","c"));
  de.add(
new Option("<span style='background-color: black;color:white;width:100%'>Black Background</span>","c"));
  
/*
   * Set Index Demo 
   
*/  
  de.setIndex(
1);
  
/*
   * OnChange Event Demo 
   
*/
  de.onchange 
= function(){
   document.title 
=(de.getText());
  }

 
var df = new CLASS_COMBO('demo1',128);
  df.add(
new Option("<font face='Arial'>Arial</font>","h"));
  df.add(
new Option("<font face='Arial Black'>Arial Blak</font>","i"));
  df.add(
new Option("<font face='Comic Sans MS'>Comic Sans MS</font>","j"));
  df.add(
new Option("<font face='Courier New'>Courier New</font>","k"));
  df.add(
new Option("<font face='Monotype Corsiva'>Monotype Corsiva</font>","l"));
  df.add(
new Option("<font face='MS Sans Serif'>MS Sans Serif</font>","p"));
  df.add(
new Option("<font face='Verdana'>Verdana</font>","q"));
 
//-->
 </SCRIPT>

<P></P><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><INPUT onclick=de.setIndex(3) type=button value=setIndex> <INPUT onclick=de.removeAt(0) type=button value=remove> <INPUT onclick=de.clear() type=button value=clear> <INPUT onclick=alert(de.text) type=button value=text> <INPUT onclick=alert(de.getText()) type=button value=getText> <INPUT onclick=alert(de.value) type=button value=value> </BODY></HTML>
posted on 2007-01-23 15:59 ttyp 阅读(...) 评论(...) 编辑 收藏