"点击input输入框弹出选择层"的实现(二)

实现的事项如下:
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>
View Code