随笔 - 24  文章 - 1 评论 - 115 trackbacks - 0

主要是通过CSS样式表中clip来实现的。兼容IE6-8,谷歌,火狐等。

 效果图:

代码如下:

 

   1  

  2  
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4 <html xmlns="http://www.w3.org/1999/xhtml">
  5 <head>
  6     <title>可以编辑的下来框实现方法--woody.wu</title>
  7     <style type="text/css">
  8         .cssINPUT
  9         {
 10             height: 19PX;
 11             padding: 3PX;
 12             padding-left: 3px;
 13             padding-right: 0px;
 14             margin: 0PX;
 15             border: 1PX SOLID #C0C0C0;
 16             font-family: 宋体,arial;
 17             font-size: 9pt;
 18         }
 19         .select_div_list
 20         {
 21             position: absolute;
 22             border: 1px solid black;
 23             background-color: White;
 24             overflow: hidden;
 25             overflow-y: auto;
 26         }
 27         .select_div_list_ul
 28         {
 29             margin: 0px;
 30             padding: 0px;
 31             list-style-type: none;
 32         }
 33         .select_div_list_ul li
 34         {
 35             cursor: pointer;
 36             padding-left: 3px;
 37             font-family: 宋体,arial;
 38             font-size: 9pt; *padding:0px;*height:20px;_height:14px;_margin:0px;_height:14px;*margin:0px;line-height:14px;}
 39         .selectSPAN
 40         {
 41             background-color: Yellow;
 42         }
 43     </style>
 44  
 45     <script type="text/javascript" src="Js/jquery-1.4.2.min.js"></script>
 46  
 47     <script type="text/javascript">
 48         var inputID = "input1";
 49         var selectID = "select1";
 50         var widt = 0;
 51         var inputWi = 0;
 52         var he = 0;
 53         $(function() {
 54             inputID = "input1";
 55             selectID = "select1";
 56             widt = 200;
 57             inputWi = widt - 20;
 58             he = $("#user").height() - 41;
 59             var offset = $("input[id=input1]").offset();
 60             $("#" + selectID).change(function() {
 61                 var newvar = $("#" + selectID).find("option:selected").text();
 62                 $("#" + inputID).val(newvar);
 63             }).click(function() {
 64                 $("#select_div_on_key" + selectID).remove();
 65             }).css({ "display""block""width": widt + "px""z-index"1"clip""rect(0px " + widt + "px 51px 151px)" });
 66  
 67             $("#" + inputID).keyup(function() {
 68                 ShowSelectCombo();
 69             }).click(function() {
 70                 ShowSelectCombo();
 71             }).css({ "z-index"2"width": inputWi + "px" }); ;
 72         });
 73         function ShowSelectCombo() {
 74             var pob = $("#" + inputID);
 75             var v = pob.val();
 76             var off = pob.offset();
 77             var wi = pob.width() + 16;
 78             var tp = off.top + pob.height() - 100 + 7;
 79             var lef = off.left - 200 + 2;
 80             var html = "<div class='select_div_list' id='select_div_on_key" + selectID + "' style='width:" + wi + "px;top:" + tp + "px;left:" + lef + "px;'><ul class='select_div_list_ul'>";
 81             $("#" + selectID).find("option").each(function() {
 82                 var tk = $(this);
 83                 html += "<li val='" + tk.val() + "' ht='" + encodeURIComponent(tk.html()) + "'>" + tk.html().replace(v, "<span class='selectSPAN'>" + v + "</span>"+ "</li>";
 84             });
 85             html += "</ul></div>";
 86             var ulDIV = $("#select_div_on_key" + selectID);
 87             ulDIV.remove();
 88             $("#user").append(html);
 89             var ulDIV = $("#select_div_on_key" + selectID);
 90             var hei = ulDIV.find("ul").height();
 91             var newHeight = hei > he ? he : hei;
 92       
 93             ulDIV.css({ height: newHeight + "px" });
 94             ulDIV.find("li").hover(function() {
 95                 $(this).css({ "background-color""#316ac5" });
 96             }, function() {
 97                 $(this).css({ "background-color""white" });
 98             });
 99             ulDIV.find("li").click(function() {
100                 var ki = $(this);
101                 var va = ki.attr("val");
102                 var htm = ki.attr("ht");
103                 htm = decodeURIComponent(htm);
104                 $("#" + inputID).val(htm);
105                 $("#" + selectID).val(va);
106                 ulDIV.remove();
107             });
108         }
109  
110     </script>
111  
112 </head>
113 <body>
114     <form name="form1" method="post" action="qqq.aspx" id="form1">
115 <div>
116 <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIxMjQ5OTYwOTdkZH49VftoWVz/vaIL4f2byf4/w86b" />
117 </div>
118  
119 <div>
120  
121     <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWDwL15JrvCgL2jaW0BgL3jaW0BgL0jaW0BgL1jaW0BgLyjaW0BgLzjaW0BgLwjaW0BgLujaW0BgL3jeW3BgKm4u6hCAL3je23BgL3jdG3BgL3jdW3BgL3jdm3BnqAGtu2PbiTi9dWHvWrW6QCqrYo" />
122 </div>
123     <div style='position: absolute; top: 100px; width: 500px; left: 200px; padding: 10px;
124         height: 400px; border: 1px solid red;' id='user'>
125         <div>
126             <div style='overflow: hidden; margin-top: 10px; height: 30px;'>
127                 <input id="input1" name="input1" type="text" class='cssINPUT' style='_height: 20px;
128                     *height: 13px; display: block; float: left; position: absolute; border-right: 0px;' />
129                 <select name="select1" id="select1" class="cssINPUT" style="float: left;
130                     display: none; height: 27PX; position: absolute; cursor: pointer; margin-left: 2px;
131                     padding: 0px;">
132     <option value="1">車身和底盤修整設備</option>
133     <option value="2">真空吸盤</option>
134     <option value="3">氧/乙炔焊割工具</option>
135     <option value="4">冷鉚机 </option>
136     <option value="5">大市場撒旦</option>
137     <option value="6">大擦</option>
138     <option value="7">第三十</option>
139     <option value="9">大市場</option>
140     <option value="20">車身外形修复机(介子机)</option>
141     <option value="1022">沙皮狗</option>
142     <option value="22">整形机</option>
143     <option value="23">舉升机</option>
144     <option value="24">修車躺板</option>
145     <option value="25">空調制冷劑充注机 </option>
146  
147 </select>
148                 
149             </div>
150         </div>
151     </form>
152 </body>
153 </html>
154 

 

posted on 2010-11-15 17:55 woody.wu 阅读(...) 评论(...) 编辑 收藏