实现的事项如下:
1)一个Text+一个Selection的组合。
2)Text可以随意输入内容,点击Text后弹出DIV,在Text输入后DIV隐藏
3)点击DIV后，点击内容赋值给Text,DIV关闭
4)DIV显示时，点击任何非DIV位置，DIV隐藏
改变上面一版的rasio为li.
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <title>Test</title> 8 <style type="text/css"> 9 body { 10 font-size: 12px; 11 } 12 li{ 13 font-size:12px; 14 list-style-type:none; 15 margin: 0; 16 padding: 3px; 17 } 18 ul{ 19 margin: 0; 20 padding: 0; 21 } 22 #selectUnit { 23 background: #FFF; 24 position: absolute; 25 top: 0px; 26 left: center; 27 border: 1px solid #000; 28 overflow: hidden; 29 width: 240px; 30 z-index: 1000; 31 } 32 33 #selectCountry { 34 background: #FFF; 35 position: absolute; 36 top: 0px; 37 left: center; 38 border: 1px solid #000; 39 overflow: hidden; 40 width: 240px; 41 z-index: 1000; 42 } 43 44 .selectItemtit { 45 line-height: 20px; 46 height: 20px; 47 margin: 1px; 48 padding-left: 1px; 49 } 50 51 .bgc_ccc { 52 background: #E88E22; 53 } 54 55 .selectItemleft { 56 float: left; 57 margin: 0px; 58 padding: 0px; 59 font-size: 12px; 60 font-weight: bold; 61 color: #fff; 62 } 63 64 .selectItemright { 65 float: right; 66 cursor: pointer; 67 color: #fff; 68 } 69 70 .selectItemcls { 71 clear: both; 72 font-size: 0px; 73 height: 0px; 74 overflow: hidden; 75 } 76 77 .selectItemhidden { 78 display: none; 79 } 80 81 </style> 82 <script src="JS/jquery-1.3.1.js"></script> 83 <script src="JS/jquery.bgiframe.js"></script> 84 </head> 85 <body> 86 <form id="form1" runat="server"> 87 <div> 88 <table> 89 <tr> 90 <th>Unit</th> 91 <th>Country</th> 92 </tr> 93 <asp:Repeater ID="rptData" runat="server"> 94 <ItemTemplate> 95 <tr> 96 <td> 97 <input type="text" value='<%#Eval("Unit")%>' id="txtUnit" name="txtUnit" /> 98 </td> 99 <td> 100 <input type="text" value='<%#Eval("Country")%>' id="txtCountry" name="txtCountry" /> 101 </td> 102 </tr> 103 </ItemTemplate> 104 </asp:Repeater> 105 </table> 106 </div> 107 <div id="selectUnit" class="selectItemhidden"> 108 <div id="selectItemAd" class="selectItemtit bgc_ccc"> 109 <h2 id="selectItemTitle" class="selectItemleft">请选择单位</h2> 110 <div id="selectItemClose" class="selectItemright">关闭</div> 111 </div> 112 <div id="selectItemCount" class="selectItemcont"> 113 <ul id="selectSub"> 114 <li title="KG" style="background-color:blue">千克</li> 115 <li title="PCS">个</li> 116 <li title="KM">千米</li> 117 </ul> 118 </div> 119 </div> 120 <div id="selectCountry" class="selectItemhidden"> 121 <div id="selectItemAd" class="selectItemtit bgc_ccc"> 122 <h2 id="selectItemTitle" class="selectItemleft">请选择国家地区</h2> 123 <div id="selectItemClose" class="selectItemright">关闭</div> 124 </div> 125 <div id="selectItemCount" class="selectItemcont"> 126 <ul id="selectSub"> 127 <li title="CN">中国</li> 128 <li title="HK">香港</li> 129 <li title="DE">德国</li> 130 <li title="US">美国</li> 131 </ul> 132 </div> 133 </div> 134 </form> 135 </body> 136 <script type="text/javascript"> 137 jQuery.fn.selectCity = function (targetId) { 138 var _seft = this; 139 var targetId = $(targetId); 140 141 targetId.click(function (e) { 142 e.stopPropagation(); // 2 143 }); 144 145 return this.each(function () { 146 var $this = $(this); 147 $this.click(function () { 148 $(".selectItemhidden").hide(); 149 150 var A_top = $(this).offset().top + $(this).outerHeight(true); // 1 151 var A_left = $(this).offset().left; 152 targetId.bgiframe(); 153 targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" }); 154 155 targetId.find("#selectSub :li").css("background", "#fff"); 156 targetId.find("#selectSub :li[title='" + $this.val() + "']").css("background", "#E22E88"); 157 158 159 targetId.find("#selectItemClose").click(function () { 160 targetId.hide(); 161 }); 162 163 targetId.find("#selectSub :li").unbind(); 164 targetId.find("#selectSub :li").click(function () { 165 $this.val($(this).attr("title")); 166 targetId.hide(); 167 }); 168 169 $(document).unbind('click'); 170 $(document).click(function (event) { 171 if (event.target.id != $this.attr("id")) { 172 targetId.hide(); 173 } 174 }); 175 }) 176 $this.keydown(function () { $(".selectItemhidden").hide(); }); 177 }); 178 } 179 180 $(function () { 181 //test1: 182 $("input[name='txtUnit']").selectCity("#selectUnit"); 183 //test2： 184 $("input[name='txtCountry']").selectCity("#selectCountry"); 185 }); 186 </script> 187 </html>