|
0
|
1 // based on http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php
|
|
|
2
|
|
|
3
|
|
|
4 function dropdown_menu_hack(el)
|
|
|
5 {
|
|
|
6 if( navigator.appName.indexOf("Microsoft") == -1 )
|
|
|
7 return;
|
|
|
8 if(el.runtimeStyle.behavior.toLowerCase() != "none"){
|
|
|
9 el.runtimeStyle.behavior="none";
|
|
|
10
|
|
|
11 el.ondblclick = function(e)
|
|
|
12 {
|
|
|
13 window.event.returnValue = false;
|
|
|
14 return false;
|
|
|
15 }
|
|
|
16
|
|
|
17
|
|
|
18 function showMenu()
|
|
|
19 {
|
|
|
20
|
|
|
21 function selectMenu(obj) {
|
|
|
22 el.contentIndex = obj.selectedIndex;
|
|
|
23 el.selectedIndex = el.contentIndex;
|
|
|
24 el.menu.hide();
|
|
|
25 el.onchange();
|
|
|
26 }
|
|
|
27
|
|
|
28
|
|
|
29 el.menu.show(0 , el.offsetHeight, 10, 10, el);
|
|
|
30 var mb = el.menu.document.body;
|
|
|
31
|
|
|
32 // mb.style.cssText ="border:solid 1px black;margin:0;padding:0;overflow-y:auto;overflow-x:auto;background:white;text-aligbn:center;font-family:Verdana;font-size:12px;";
|
|
|
33 // mb.style.cssText ="border:solid 1px black;margin:0;padding:0;overflow-y:auto;overflow-x:auto;background:white;font-family:tahoma,geneva,helvetica,arial,sans-serif;font-size:10pt;";
|
|
|
34 mb.style.border = "solid 1px black";
|
|
|
35 mb.style.overflowY = "auto";
|
|
|
36 mb.style.margin = "0";
|
|
|
37 mb.style.padding = "0";
|
|
|
38 mb.style.fontSize = "8pt";
|
|
|
39 mb.style.fontFamily = "tahoma,geneva,helvetica,arial,sans-serif";
|
|
|
40 var t = el.contentHTML;
|
|
|
41 t = t.replace(/<select/gi,'<ul');
|
|
|
42 t = t.replace(/<option/gi,'<li');
|
|
|
43 t = t.replace(/<\/option/gi,'</li');
|
|
|
44 t = t.replace(/<\/select/gi,'</ul');
|
|
|
45 t = t.replace(/> /gi,'> ');
|
|
|
46 mb.innerHTML = t;
|
|
|
47
|
|
|
48 el.select = mb.all.tags("ul")[0];
|
|
|
49 el.select.style.cssText="list-style:none;margin:0;padding:0;";
|
|
|
50 mb.options = el.select.getElementsByTagName("li");
|
|
|
51
|
|
|
52 for(var i=0;i<mb.options.length;i++)
|
|
|
53 {
|
|
|
54 mb.options[i].selectedIndex = i;
|
|
|
55 mb.options[i].style.cssText = "list-style:none;margin:0;padding:1px 2px;width:100%;cursor:hand;cursor:pointer;white-space:nowrap;"
|
|
|
56 mb.options[i].title = mb.options[i].innerHTML;
|
|
|
57 mb.options[i].innerHTML = "<nobr>" + mb.options[i].innerHTML + "</nobr>";
|
|
|
58
|
|
|
59 mb.options[i].onmouseover = function()
|
|
|
60 {
|
|
|
61 if( mb.options.selected ){mb.options.selected.style.background="white";mb.options.selected.style.color="black";}
|
|
|
62 mb.options.selected = this;
|
|
|
63 this.style.background = "#316ac5";
|
|
|
64 this.style.color = "white";
|
|
|
65 }
|
|
|
66
|
|
|
67 mb.options[i].onmouseout = function(){
|
|
|
68 this.style.background="white";this.style.color="black";
|
|
|
69 }
|
|
|
70
|
|
|
71 mb.options[i].onmousedown = function(){selectMenu(this);}
|
|
|
72 mb.options[i].onkeydown = function(){selectMenu(this);}
|
|
|
73
|
|
|
74
|
|
|
75 if(i == el.contentIndex)
|
|
|
76 {
|
|
|
77 mb.options[i].style.background = "#316ac5";
|
|
|
78 mb.options[i].style.color = "white";
|
|
|
79 mb.options.selected = mb.options[i];
|
|
|
80 }
|
|
|
81 }
|
|
|
82
|
|
|
83 // var mwPadding = 22;
|
|
|
84 var mwPadding = 4;
|
|
|
85 var mw = Math.max( ( el.select.offsetWidth + mwPadding ), el.offsetWidth + mwPadding );
|
|
|
86 mw = Math.max( mw, ( mb.scrollWidth+mwPadding) );
|
|
|
87 // var mh = mb.options.length * 15 + 8 ;
|
|
|
88 var mh = mb.options.length * 15 + 2 ;
|
|
|
89
|
|
|
90 var mx = 0;
|
|
|
91 var my = el.offsetHeight - 2;
|
|
|
92 var docH = document.documentElement.offsetHeight ;
|
|
|
93 var bottomH = docH - el.getBoundingClientRect().bottom ;
|
|
|
94
|
|
|
95 mh = Math.min(mh, Math.max(( docH - el.getBoundingClientRect().top - 50),100) );
|
|
|
96
|
|
|
97 if( bottomH < mh )
|
|
|
98 {
|
|
|
99
|
|
|
100 mh = Math.max( (bottomH - 12),10);
|
|
|
101 if( mh <100 )
|
|
|
102 {
|
|
|
103 my = -100 ;
|
|
|
104
|
|
|
105 }
|
|
|
106 mh = Math.max(mh,100);
|
|
|
107 }
|
|
|
108
|
|
|
109
|
|
|
110 self.focus();
|
|
|
111
|
|
|
112 el.menu.show( mx, my+2, mw, mh , el);
|
|
|
113 // sync = null;
|
|
|
114 if(mb.options.selected)
|
|
|
115 {
|
|
|
116 mb.scrollTop = mb.options.selected.offsetTop;
|
|
|
117 }
|
|
|
118
|
|
|
119 window.onresize = function(){el.menu.hide()};
|
|
|
120 }
|
|
|
121
|
|
|
122 if(dropdown_menu_hack.menu ==null)
|
|
|
123 {
|
|
|
124 dropdown_menu_hack.menu = window.createPopup();
|
|
|
125 document.attachEvent("onkeydown",dropdown_menu_hack.menu.hide);
|
|
|
126 }
|
|
|
127 el.menu = dropdown_menu_hack.menu ;
|
|
|
128 el.onclick = showMenu;
|
|
|
129 }
|
|
|
130 el.contentOptions = new Array();
|
|
|
131 el.contentIndex = el.selectedIndex;
|
|
|
132 el.contentHTML = el.outerHTML;
|
|
|
133
|
|
|
134 for(var i=0;i<el.options.length;i++)
|
|
|
135 {
|
|
|
136 el.contentOptions [el.contentOptions.length] =
|
|
|
137 {
|
|
|
138 "value": el.options[i].value,
|
|
|
139 "text": el.options[i].innerHTML
|
|
|
140 }
|
|
|
141
|
|
|
142 // if(!el.options[i].selected){el.options[i].removeNode(true);i--;};
|
|
|
143 }
|
|
|
144 }
|
