1<html>
2<head><title>漂亮的下拉框</title>
3<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
4<script>
5// ViaSelect Environment Constants
6var SS_ENV = new Object();
7SS_ENV.IE_Version = new Number(((window.navigator.appVersion.split('; '))[1].split(' '))[1]);
8SS_ENV.CR = new Object();
9SS_ENV.CR.ReverseBackground = '#E2519C';
10SS_ENV.CR.ReverseText = 'white';
11SS_ENV.CR.Border = '#D55C9A';
12SS_ENV.CR.BorderActive = '#FF6CB7';
13SS_ENV.ImgPrefix = 'http://www.viafriend.com/images';
14SS_ENV.DefaultHeight = 20;
15SS_ENV.ButtonWidth = 13;
16SS_ENV.OptionsDivStyle = ''
17\+ ' display:none;'
18\+ ' z-index:10;'
19\+ ' position:absolute;'
20\+ ' border:1 solid '+ SS_ENV.CR.Border+';'
21\+ ' background-color:white;'
22\+ ' scrollbar-face-color:#D4D0C8;'
23\+ ' scrollbar-shadow-color:white;'
24\+ ' scrollbar-highlight-color:#F6F5F4;'
25\+ ' scrollbar-3dlight-color:white'
26\+ ' scrollbar-darkshadow-color:#86837E;'
27\+ ' scrollbar-track-color:#F6F5F4;'
28\+ ' scrollbar-arrow-color:#86837E;';
29SS_ENV.OptionNobrStyle = ''
30\+ ' font-size:12px;'
31\+ ' font-family:奔覆;';
32// SaySelect Variables
33var SS_VAR = new Object();
34SS_VAR.DivDummy = document.createElement("DIV");
35SS_VAR.SelectList = new Array();
36SS_VAR.bEventAttached = false;
37
38var SS_CreatedElements = new Object();
39
40function unloadObjects()
41{
42try {
43if (SS_VAR && SS_VAR.SelectList)
44{
45for (key in SS_VAR.SelectList)
46{
47if (SS_VAR.SelectList[key])
48{
49try {
50SS_VAR.SelectList[key].select.setAttribute('SS', 0);
51} catch (e) {};
52delete SS_VAR.SelectList[key];
53}
54}
55}
56} catch (e) {};
57}
58
59attachEvent("onunload", unloadObjects);
60
61function SS_create (srcHTML, ListMax, bAutoDetect)
62{
63// property
64this.ssID = SS_VAR.SelectList.length;
65this.bOriginalSelect = (bAutoDetect && SS_ENV.IE_Version < 5.5);
66this.select = SS_createElement(srcHTML);
67this.selectedIndex = this.select.selectedIndex;
68this.options = this.select.options;
69this.width = parseInt(this.select.style.width);
70this.height = (this.select.style.height) ? parseInt(this.select.style.height) : SS_ENV.DefaultHeight;
71this.OptionHeight = this.height - 4;
72this.bListDown = (ListMax && '-'==ListMax.toString().substr(0, 1)) ? false : true;
73this.ListMax = (!isNaN(parseInt(ListMax))) ? Math.abs(ListMax) : 100;
74
75this.Table;
76this.TitleDiv;
77this.TitleTable;
78this.TitleWrapper;
79this.OptionsDiv;
80this.OptionsWrapper;
81this.OptionsTable;
82this.bFocused = false;
83this.bExpanded = false;
84this.bReverse = false;
85
86// private method
87this.isThisEventToBeCanceled = SS_isThisEventToBeCanceled;
88this.toggleTitle = SS_toggleTitle;
89this.syncSelectedIndex = SS_syncSelectedIndex;
90this.toggleOptions = SS_toggleOptions;
91this.turnOnOption = SS_turnOnOption;
92this.turnOffOption = SS_turnOffOption;
93this.handleMousewheel = SS_handleMousewheel;
94this.handleOverTitle = SS_handleOverTitle;
95this.handleOutTitle = SS_handleOutTitle;
96this.handleOverOption = SS_handleOverOption;
97this.createTable = SS_createTable;
98this.createTitleDiv = SS_createTitleDiv;
99this.createOptionsDiv = SS_createOptionsDiv;
100this.createOptionTr = SS_createOptionTr;
101this.adjustOptionsDiv = SS_adjustOptionsDiv;
102this.syncOptions = SS_syncOptions;
103this.pressOption = SS_pressOption;
104this.moveOption = SS_moveOption;
105this.releaseOption = SS_releaseOption;
106this.pressTitle = SS_pressTitle;
107this.releaseTitle = SS_releaseTitle;
108
109// public method
110this.display = SS_display;
111this.insertOption = SS_insertOption;
112this.deleteOption = SS_deleteOption;
113this.changeOption = SS_changeOption;
114
115// initiate
116this.createTable();
117this.select.setAttribute('SS', this);
118if (!this.bOriginalSelect)
119this.select.onpropertychange = SS_handlePropertychange;
120SS_VAR.SelectList[this.ssID] = this;
121}
122function SS_display ()
123{
124document.write("<div id=SS_TempDiv></div>\n");
125document.all.SS_TempDiv.appendChild(this.Table);
126document.all.SS_TempDiv.removeNode();
127}
128function SS_write (srcHTML, ListMax, bAutoDetect)
129{
130var oSS = new SS_create(srcHTML, ListMax, bAutoDetect);
131oSS.display();
132return oSS;
133}
134function SS_insertOption (value, innerText, idx)
135{
136var NewOption = document.createElement("OPTION");
137SS_CreatedElements[SS_CreatedElements.length] = NewOption;
138this.options.add(NewOption, idx);
139NewOption.innerText = innerText;
140NewOption.value = value;
141
142if (!this.bOriginalSelect)
143this.createOptionTr(idx);
144this.syncOptions();
145this.adjustOptionsDiv();
146this.syncSelectedIndex();
147}
148function SS_deleteOption (idx)
149{
150this.options.remove(idx);
151if (!this.bOriginalSelect)
152this.OptionsTable.deleteRow(idx);
153this.syncOptions();
154this.adjustOptionsDiv();
155this.syncSelectedIndex();
156}
157function SS_changeOption (idx, value, innerText)
158{
159this.options[idx].value = value;
160this.options[idx].innerText = innerText;
161this.syncOptions();
162this.syncSelectedIndex();
163}
164
165function SS_cancelEvent (event)
166{
167event.cancelBubble = true;
168event.returnValue = false;
169}
170function SS_isThisEventToBeCanceled (event)
171{
172if ('object' == typeof(event)) {
173switch (event.type) {
174case 'mousedown':
175if (!(event.button & 1)) return true;
176break;
177case 'mouseup':
178if (!(event.button & 1)) return true;
179if (SS_ENV.IE_Version >= 5.5 && event.srcElement != this.srcElementOfLastMousedown && this.srcElementOfLastMousedown != null) {
180this.srcElementOfLastMousedown = null;
181return true;
182}
183break;
184case 'mouseout':
185if (!(SS_ENV.IE_Version < 5.5 && event.srcElement == this.srcElementOfLastMousedown))
186return true;
187break;
188case 'mousemove':
189if (SS_ENV.IE_Version >= 5.5 && event.srcElement != this.srcElementOfLastMousedown && this.srcElementOfLastMousedown != null)
190return true;
191break;
192}
193}
194return false;
195}
196function SS_createElement (html)
197{
198SS_VAR.DivDummy.insertAdjacentHTML('afterBegin', html);
199var oEl = SS_VAR.DivDummy.children(0);
200while (SS_VAR.DivDummy.children.length > 0) {
201SS_VAR.DivDummy.removeChild(SS_VAR.DivDummy.children(0));
202}
203return oEl;
204}
205function SS_blurExcept (except)
206{
207SS_cancelEvent(window.event);
208
209except = ('number'==typeof(except)) ? except : -1;
210
211var bHasToDetachEvent = true;
212for (var i=0; i < SS_VAR.SelectList.length; i++) {
213if (-1==except && SS_VAR.SelectList[i].bFocused && SS_VAR.SelectList[i].bExpanded) {
214SS_VAR.SelectList[i].toggleOptions(false, true);
215SS_VAR.SelectList[i].toggleTitle(true);
216bHasToDetachEvent = false;
217}
218else if (i!=except) {
219if (SS_VAR.SelectList[i].bExpanded)
220SS_VAR.SelectList[i].toggleOptions(false, true);
221if (SS_VAR.SelectList[i].bReverse)
222SS_VAR.SelectList[i].toggleTitle(false);
223SS_VAR.SelectList[i].bFocused = false;
224}
225}
226
227if (SS_VAR.bEventAttached && bHasToDetachEvent) {
228document.detachEvent('onmousedown', SS_blurExcept);
229document.detachEvent('ondblclick', SS_blurExcept);
230SS_VAR.bEventAttached = false;
231}
232}
233function SS_syncSelectedIndex ()
234{
235this.selectedIndex = this.select.selectedIndex;
236
237if (this.bOriginalSelect) return;
238
239if (this.TitleTable.cells(0).childNodes(0).innerText != this.options[this.selectedIndex].innerText)
240this.TitleTable.cells(0).childNodes(0).innerText = this.options[this.selectedIndex].innerText;
241if (this.bExpanded)
242this.toggleOptions(false);
243}
244function SS_toggleTitle (bReverse)
245{
246this.bReverse = ('undefined'!=typeof(bReverse)) ? bReverse: (!this.bReverse);
247this.TitleTable.cells(0).style.backgroundColor = this.bReverse ? SS_ENV.CR.ReverseBackground : '';
248this.TitleTable.cells(0).style.color = this.bReverse ? SS_ENV.CR.ReverseText : '';
249}
250function SS_toggleOptions (bExpanded, bStrict)
251{
252if (!bStrict && !this.bFocused) {
253SS_blurExcept(this.ssID);
254}
255this.bExpanded = ('undefined'!=typeof(bExpanded)) ? bExpanded: (!this.bExpanded);
256if (this.bExpanded) {
257this.adjustOptionsDiv();
258this.OptionsDiv.style.display = 'block';
259if (!bStrict) {
260this.toggleTitle(false);
261this.handleOverOption(this.selectedIndex);
262}
263this.handleOutTitle();
264}
265else {
266this.OptionsDiv.style.display = 'none';
267if (!bStrict) {
268this.toggleTitle(true);
269}
270}
271if (!bStrict) {
272this.bFocused = true;
273
274if (!SS_VAR.bEventAttached) {
275document.attachEvent('onmousedown', SS_blurExcept);
276document.attachEvent('ondblclick', SS_blurExcept);
277SS_VAR.bEventAttached = true;
278}
279}
280}
281function SS_handlePropertychange ()
282{
283if ('propertychange'==window.event.type && 'selectedIndex'==window.event.propertyName) {
284var oSS = window.event.srcElement.SS;
285oSS.syncSelectedIndex();
286
287if (null != oSS.select.onchange)
288oSS.select.onchange();
289}
290}
291function SS_handleMousewheel (event)
292{
293var idx = this.selectedIndex;
294if ('mousewheel'==event.type && this.bFocused && this.bReverse) {
295for (var i=0; i < event.wheelDelta; i += 120)
296idx--;
297for (var i=0; i > event.wheelDelta; i -= 120)
298idx++;
299}
300idx = Math.max(idx, 0);
301idx = Math.min(idx, this.options.length - 1);
302this.select.selectedIndex = idx;
303}
304function SS_handleOverTitle ()
305{
306if (this.bExpanded)
307return;
308
309this.TitleTable.style.borderColor = SS_ENV.CR.BorderActive;
310this.TitleTable.cells(1).style.display = 'none';
311this.TitleTable.cells(2).style.display = 'block';
312}
313function SS_handleOutTitle ()
314{
315this.TitleTable.style.borderColor = SS_ENV.CR.Border;
316this.TitleTable.cells(2).style.display = 'none';
317this.TitleTable.cells(1).style.display = 'block';
318}
319function SS_handleOverOption (idx)
320{
321for (var i=0; i < this.options.length; i++) {
322if (i==idx)
323this.turnOnOption(i);
324else
325this.turnOffOption(i);
326}
327}
328function SS_turnOnOption (idx)
329{
330this.OptionsTable.cells(idx).style.color = SS_ENV.CR.ReverseText;
331this.OptionsTable.cells(idx).style.backgroundColor = SS_ENV.CR.ReverseBackground;
332}
333function SS_turnOffOption (idx)
334{
335this.OptionsTable.cells(idx).style.color = '';
336this.OptionsTable.cells(idx).style.backgroundColor = '';
337}
338function SS_adjustOptionsDiv ()
339{
340if (this.bOriginalSelect) return;
341
342this.OptionsDiv.style.width = this.width;
343this.OptionsDiv.style.height = Math.min(this.options.length, this.ListMax) * this.OptionHeight + 2;
344this.OptionsWrapper.style.height = this.options.length * this.OptionHeight;
345this.OptionsDiv.style.overflowY = (this.options.length > this.ListMax) ? 'scroll' : '';
346
347var top = this.Table.offsetTop;
348var left = this.Table.offsetLeft;
349for (var El = this.Table.offsetParent; 'BODY'!=El.tagName && 'absolute'!=El.style.position && 'relative'!=El.style.position; El = El.offsetParent) {
350if ('TABLE' != El.tagName) {
351top += El.clientTop;
352left += El.clientLeft;
353}
354top += El.offsetTop;
355left += El.offsetLeft;
356}
357this.OptionsDiv.style.top = (this.bListDown) ? (top + this.height) : (top - parseInt(this.OptionsDiv.style.height));
358this.OptionsDiv.style.left = left;
359
360this.TitleWrapper.style.top = 0;
361this.TitleWrapper.style.left = 0;
362}
363function SS_syncOptions ()
364{
365if (this.bOriginalSelect) return;
366
367for (var i=0; i < this.options.length; i++) {
368this.OptionsTable.cells(i).setAttribute('index', i);
369if (this.OptionsTable.cells(i).childNodes(0).innerText != this.options[i].innerText)
370this.OptionsTable.cells(i).childNodes(0).innerText = this.options[i].innerText;
371}
372}
373function SS_pressTitle (event)
374{
375SS_cancelEvent(event);
376
377this.srcElementOfLastMousedown = event.srcElement;
378
379this.toggleOptions();
380}
381function SS_releaseTitle (event)
382{
383SS_cancelEvent(event);
384
385if (this.isThisEventToBeCanceled(event)) return;
386
387this.srcElementOfLastMousedown = null;
388}
389function SS_pressOption (event)
390{
391SS_cancelEvent(event);
392
393this.srcElementOfLastMousedown = event.srcElement;
394}
395function SS_moveOption (event)
396{
397SS_cancelEvent(event);
398
399if (this.isThisEventToBeCanceled(event)) return;
400if (!(event.offsetX >= 0 && event.offsetX <= this.OptionsTable.offsetWidth)) return;
401
402this.handleOverOption(Math.floor(event.offsetY / this.OptionHeight));
403}
404function SS_releaseOption (event)
405{
406SS_cancelEvent(event);
407
408if (this.isThisEventToBeCanceled(event)) return;
409
410this.srcElementOfLastMousedown = null;
411
412if (event.offsetX >= 0 && event.offsetX <= this.OptionsTable.offsetWidth) {
413this.toggleOptions(false);
414this.select.selectedIndex = Math.floor(event.offsetY / this.OptionHeight);
415}
416}
417function SS_createTable ()
418{
419this.Table = SS_createElement(""
420\+ "<table border=0 cellpadding=0 cellspacing=0 style='table-layout:fixed; cursor:default'>"
421\+ "<tr><td></td></tr>"
422\+ "</table>"
423);
424if (!isNaN(this.width))
425this.Table.style.width = this.width;
426this.Table.style.height = this.height;
427
428if (!this.bOriginalSelect) {
429this.createTitleDiv();
430this.createOptionsDiv();
431this.Table.cells(0).appendChild(this.TitleDiv);
432this.Table.cells(0).appendChild(this.OptionsDiv);
433}
434else {
435this.Table.cells(0).appendChild(this.select);
436}
437}
438function SS_createTitleDiv ()
439{
440this.TitleDiv = SS_createElement(""
441\+ "<div style='position:relative; top:0; left:0;'>"
442\+ " <table border=0 cellpadding=0 cellspacing=1"
443\+ " height="+this.height
444\+ " bgcolor=white"
445\+ " style='table-layout:fixed; border:1 solid "+SS_ENV.CR.Border+";'"
446\+ " onmouseover='SS_VAR.SelectList["+this.ssID+"].adjustOptionsDiv()'"
447\+ " >"
448\+ " <tr>"
449\+ " <td><nobr style='text-oveflow:hidden;"+SS_ENV.OptionNobrStyle+"'></nobr></td>"
450\+ " <td width="+SS_ENV.ButtonWidth+" align=center style='word-wrap:normal'></td>"
451\+ " <td style='display:none' width="+SS_ENV.ButtonWidth+" align=center style='word-wrap:normal'></td>"
452\+ " <td style='display:none'></td>"
453\+ " </tr>"
454\+ " </table>"
455\+ "</div>"
456);
457this.TitleTable = this.TitleDiv.childNodes(0);
458this.TitleTable.cells(0).childNodes(0).innerText = this.options[this.selectedIndex].innerText;
459this.TitleTable.cells(1).innerHTML = "<img src='"+SS_ENV.ImgPrefix+"/btn_down.gif' border=0 align=absmiddle>";
460this.TitleTable.cells(2).innerHTML = "<img src='"+SS_ENV.ImgPrefix+"/btn_down_s.gif' border=0 align=absmiddle>";
461this.TitleTable.cells(3).appendChild(this.select);
462this.TitleWrapper = document.createElement(""
463\+ "<img src='"+SS_ENV.ImgPrefix+"/img_blank.gif'"
464\+ " style='position:absolute; top:0; left:0; z-index:2; width:100%; height:"+this.height+";'"
465\+ " onmouseover='SS_VAR.SelectList["+this.ssID+"].handleOverTitle()'"
466\+ " onmouseout='SS_VAR.SelectList["+this.ssID+"].handleOutTitle(); SS_VAR.SelectList["+this.ssID+"].releaseTitle(window.event);'"
467\+ " onmousedown='SS_VAR.SelectList["+this.ssID+"].pressTitle(window.event)'"
468\+ " ondblclick='SS_VAR.SelectList["+this.ssID+"].pressTitle(window.event); SS_VAR.SelectList["+this.ssID+"].releaseTitle(window.event);'"
469\+ " onmouseup='SS_VAR.SelectList["+this.ssID+"].releaseTitle(window.event)'"
470\+ " onmousewheel='SS_VAR.SelectList["+this.ssID+"].handleMousewheel(window.event)'"
471\+ " ondragstart='SS_cancelEvent(window.event)'"
472\+ ">"
473);
474SS_CreatedElements[SS_CreatedElements.length] = this.TitleWrapper;
475this.TitleDiv.appendChild(this.TitleWrapper);
476}
477function SS_createOptionsDiv ()
478{
479this.OptionsDiv = SS_createElement(""
480\+ "<div style='"+SS_ENV.OptionsDivStyle+"'"
481\+ " onscroll='SS_VAR.SelectList["+this.ssID+"].moveOption(window.event)'"
482\+ " onmousedown='SS_cancelEvent(window.event)'"
483\+ ">"
484\+ " <table border=0 cellpadding=0 cellspacing=0 width=100% style='table-layout:fixed'>"
485\+ " </table>"
486\+ "</div>"
487);
488this.OptionsTable = this.OptionsDiv.childNodes(0);
489for (var i=0; i < this.options.length; i++) {
490this.createOptionTr(i);
491}
492this.syncOptions();
493this.OptionsWrapper = document.createElement(""
494\+ "<img src='"+SS_ENV.ImgPrefix+"/img_blank.gif'"
495\+ " style='position:absolute; top:0; left:0; width:100%;'"
496\+ " onmousedown='SS_VAR.SelectList["+this.ssID+"].pressOption(window.event)'"
497\+ " onmousemove='SS_VAR.SelectList["+this.ssID+"].moveOption(window.event)'"
498\+ " onmouseup='SS_VAR.SelectList["+this.ssID+"].releaseOption(window.event)'"
499\+ " onmouseout='SS_VAR.SelectList["+this.ssID+"].releaseOption(window.event)'"
500\+ " ondragstart='SS_cancelEvent(window.event)'"
501\+ ">"
502);
503SS_CreatedElements[SS_CreatedElements.length] = this.OptionsWrapper;
504this.OptionsDiv.appendChild(this.OptionsWrapper);
505}
506function SS_createOptionTr (idx)
507{
508idx = ('undefined'!=typeof(idx)) ? idx : this.options.length - 1;
509var OptionTr = this.OptionsTable.insertRow(-1);
510var OptionTd = document.createElement("<td height="+this.OptionHeight+"></td>");
511SS_CreatedElements[SS_CreatedElements.length] = this.OptionsTd;
512OptionTd.appendChild(document.createElement("<nobr style='"+SS_ENV.OptionNobrStyle+"'></nobr>"));
513OptionTr.appendChild(OptionTd);
514}
515</script>
516</head>
517<body><script>SS_write("<select style='width:60;height:18px;font-size:12px' name=star>\n"
518+" <option value=\"\" selected>不限</option>\n"
519+"<option value=\"水瓶座\">水瓶座</option>"
520+"<option value=\"双鱼座\">双鱼座</option>"
521+"<option value=\"白羊座\">白羊座</option>"
522+"<option value=\"金牛座\">金牛座</option>"
523+"<option value=\"双子座\">双子座</option>"
524+"<option value=\"巨蟹座\">巨蟹座</option>"
525+"<option value=\"狮子座\">狮子座</option>"
526+"<option value=\"处女座\">处女座</option>"
527+"<option value=\"天秤座\">天秤座</option>"
528+"<option value=\"天蝎座\">天蝎座</option>"
529+"<option value=\"射手座\">射手座</option>"
530+"<option value=\"摩羯座\">摩羯座</option>"
531+"</select>\n");
532</script><br/>
533<script>SS_write("<select name='province' style='width:60;height:18px;font-size:12px'>\n"
534+"<option value=\"\" selected>都行</option>\n"
535+"<option value=\"北京\">北京</option>"
536+"<option value=\"上海\">上海</option>"
537+"<option value=\"天津\">天津</option>"
538+"<option value=\"重庆\">重庆</option>"
539+"<option value=\"安徽\">安徽</option>"
540+"<option value=\"福建\">福建</option>"
541+"<option value=\"甘肃\">甘肃</option>"
542+"<option value=\"广东\">广东</option>"
543+"<option value=\"广西\">广西</option>"
544+"<option value=\"贵州\">贵州</option>"
545+"<option value=\"海南\">海南</option>"
546+"<option value=\"河北\">河北</option>"
547+"<option value=\"黑龙江\">黑龙江</option>"
548+"<option value=\"河南\">河南</option>"
549+"<option value=\"湖北\">湖北</option>"
550+"<option value=\"湖南\">湖南</option>"
551+"<option value=\"内蒙古\">内蒙古</option>"
552+"<option value=\"江苏\">江苏</option>"
553+"<option value=\"江西\">江西</option>"
554+"<option value=\"吉林\">吉林</option>"
555+"<option value=\"辽宁\">辽宁</option>"
556+"<option value=\"宁夏\">宁夏</option>"
557+"<option value=\"青海\">青海</option>"
558+"<option value=\"山西\">山西</option>"
559+"<option value=\"陕西\">陕西</option>"
560+"<option value=\"山东\">山东</option>"
561+"<option value=\"四川\">四川</option>"
562+"<option value=\"江西\">江西</option>"
563+"<option value=\"西藏\">西藏</option>"
564+"<option value=\"新疆\">新疆</option>"
565+"<option value=\"云南\">云南</option>"
566+"<option value=\"浙江\">浙江</option>"
567+"<option value=\"其它\">其它</option>"
568+"</select>\n",8); </script>
569</body>
570</html>
去掉了灰色倒三角的漂亮下拉列表
comments powered by Disqus