自制漂亮的select[1]

[入库:2005年8月18日] [更新:2007年3月24日]

本文简介:选择自 possible_y 的 blog

效果如图:

代码如下:

<html>
<head><title>漂亮的下拉框</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script>
// viaselect environment constants
var ss_env = new object();
ss_env.ie_version = new number(((window.navigator.appversion.split('; '))[1].split(' '))[1]);
ss_env.cr = new object();
ss_env.cr.reversebackground = '#e2519c';
ss_env.cr.reversetext = 'white';
ss_env.cr.border = '#d55c9a';
ss_env.cr.borderactive = '#ff6cb7';
ss_env.defaultheight = 20;
ss_env.buttonwidth = 13;
ss_env.optionsdivstyle = ''
 + ' display:none;'
 + ' z-index:10;'
 + ' position:absolute;'
 + ' border:1 solid '+ ss_env.cr.border+';'
 + ' background-color:white;'
 + ' scrollbar-face-color:#d4d0c8;'
 + ' scrollbar-shadow-color:white;'
 + ' scrollbar-highlight-color:#f6f5f4;'
 + ' scrollbar-3dlight-color:white'
 + ' scrollbar-darkshadow-color:#86837e;'
 + ' scrollbar-track-color:#f6f5f4;'
 + ' scrollbar-arrow-color:#86837e;';
ss_env.optionnobrstyle = ''
 + ' font-size:12px;'
 + ' font-family:奔覆;';
// sayselect variables
var ss_var = new object();
ss_var.divdummy = document.createelement("div");
ss_var.selectlist = new array();
ss_var.beventattached = false;

var ss_createdelements = new object();
img_s_src="btn_down_s.gif";
img_src="btn_down.gif";
img_blank_src="img_blank.gif";


function unloadobjects()
{
 try {
  if (ss_var && ss_var.selectlist)
  {
   for (key in ss_var.selectlist)
   {
if (ss_var.selectlist[key])
{
 try {
  ss_var.selectlist[key].select.setattribute('ss', 0);
 } catch (e) {};
 delete ss_var.selectlist[key];
}
   }
  }
 } catch (e) {};
}

attachevent("onunload", unloadobjects);

function ss_create (srchtml, listmax, bautodetect)
{
 // property
 this.ssid = ss_var.selectlist.length;
 this.boriginalselect = (bautodetect && ss_env.ie_version < 5.5);
 this.select = ss_createelement(srchtml);
 this.selectedindex = this.select.selectedindex;
 this.options = this.select.options;
 this.width = parseint(this.select.style.width);
 this.height = (this.select.style.height) ? parseint(this.select.style.height) : ss_env.defaultheight;
 this.optionheight = this.height - 4;
 this.blistdown = (listmax && '-'==listmax.tostring().substr(0, 1)) ? false : true;
 this.listmax = (!isnan(parseint(listmax))) ? math.abs(listmax) : 100;

 this.table;
 this.titlediv;
 this.titletable;
 this.titlewrapper;
 this.optionsdiv;
 this.optionswrapper;
 this.optionstable;
 this.bfocused = false;
 this.bexpanded = false;
 this.breverse = false;

 // private method
 this.isthiseventtobecanceled = ss_isthiseventtobecanceled;
 this.toggletitle = ss_toggletitle;
 this.syncselectedindex = ss_syncselectedindex;
 this.toggleoptions = ss_toggleoptions;
 this.turnonoption = ss_turnonoption;
 this.turnoffoption = ss_turnoffoption;
 this.handlemousewheel = ss_handlemousewheel;
 this.handleovertitle = ss_handleovertitle;
 this.handleouttitle = ss_handleouttitle;
 this.handleoveroption = ss_handleoveroption;
 this.createtable = ss_createtable;
 this.createtitlediv = ss_createtitlediv;
 this.createoptionsdiv = ss_createoptionsdiv;
 this.createoptiontr = ss_createoptiontr;
 this.adjustoptionsdiv = ss_adjustoptionsdiv;
 this.syncoptions = ss_syncoptions;
 this.pressoption = ss_pressoption;
 this.moveoption = ss_moveoption;
 this.releaseoption = ss_releaseoption;
 this.presstitle = ss_presstitle;
 this.releasetitle = ss_releasetitle;

 // public method
 this.display = ss_display;
 this.insertoption = ss_insertoption;
 this.deleteoption = ss_deleteoption;
 this.changeoption = ss_changeoption;

 // initiate
 this.createtable();
 this.select.setattribute('ss', this);
 if (!this.boriginalselect)
  this.select.onpropertychange = ss_handlepropertychange;
 ss_var.selectlist[this.ssid] = this;
}
function ss_display ()
{
 document.write("<div id=ss_tempdiv></div>\n");
 document.all.ss_tempdiv.appendchild(this.table);
 document.all.ss_tempdiv.removenode();
}
function ss_write (srchtml, listmax, bautodetect)
{

本文关键:select
  相关方案
Google
 

本站最佳浏览方式为 分辨率 1024x768 IE 6.0(或更高版本的 IE浏览器)

go top