The Select widget encapsulated by jquery solves problems such as unblocking of select border height in IE6 7 8

I. Basic Principles

The select control is always painful in the browser, and different versions can be parsed. There are mainly the following problems: 1. The height cannot be set in IE6, Z index is always at the top, cannot be blocked by other layers. 2. The height can be set in IE7, but the actual display height is always a little high, leaving a lot of space below 3, IE8 height can be set, but the text is not centered, line height is invalid 4, ie9 ie10 is relatively normal. Although some js uis have similar combo controls, they are not satisfactory. Most of them are JS-bound data. If these controls are used, obviously, there is no way to use the webform event support feature, which will not satisfy me. There are also a lot of solutions on the Internet, such as how to get the border, such as margin:-2px;, but they are not completely solved, so I am not satisfied. In addition, one of the most mentioned is to re-use Div to draw one, so this widget is available. The function is to hide the original select on the page, then draw a select using Div, and reference the border, background color, size, and other attributes of the original select, and try to keep them consistent with the original definition style, it can also trigger the change event of the original select, so that DDL can solve ASP normally when autopostback is enabled. . Net background events. To put it simply, it means how to define the definition of your original select DDL, and how to bind the data to it. You don't have to worry about the new select, how to control it, and how to set the background value, you can still retrieve the value of the original control. Ii. Main usage and EffectsAt present, there are no major problems with functions and styles. For example, if the height of IE6 7 is different from that of the center chart, you don't have to worry about fixing it. You can set the size yourself and do not copy the select size. If you want to fix the issue, you need to fix it. Like other JQ controls, the basic line of code is as follows: HTML

<Style type = "text/CSS">. common {background-color: pink; Border: 1px solid red ;} </style> <Form ID = "form1" runat = "server"> <div> <select id = "selarea" class = "common" style = "width: 240px; height: 64px; "> <option selected =" selected "> unlimited regions </option> <option> Beijing </option> <option value =" TJ "> Tianjin </Option> <option value = "sh"> Shanghai </option> <option value = "CQ"> Chongqing </option> </SELECT> <br/> <asp: dropdownlist id = "dropdownlist1" cssclass = "common" runat = "server" autopostback = "true" onselectedindexchanged = "dropdownlist1_selectedindexchanged"> <asp: listitem> 111 </ASP: listitem> <asp: listitem> 222 </ASP: listitem> <asp: listitem> 333 </ASP: listitem> <asp: listitem> 444 </ASP: listitem> </ASP: dropdownlist> </div> </form>

    <script type="text/javascript">        $(document).ready(function () {            $("select").yueSelect({                width: 120,                height: 32,                useSelectSize: true,                listDiff: 2            });        });    </script>

 

Width and height do not explain useselectsize indicates whether to retain the size of the original select. If it is true, width and height settings do not work. Listdiff refers to the interval between the next frame and the main frame. Generally, it is 2 and you can check the effect ie6ie7ie8ie9 10ff. Iii. DownloadThe link is here 4. Out-of-QuestionI never wanted to write many textual things, but recently I had the idea of writing a series of blogs, but I was too lazy to make up my mind. Check how much you are interested in. The content may be a complete enterprise framework or part. One or more of the following content may be involved. If you are interested, leave a message below, EF applications and encapsulation tend to be code first2, Enterprise Library components, automapper, and other integration with webform (too many MVC writers). 3, page, WebService, etc. use automatic unity injection, AOP aspect 4, permission system to implement page and button interception and configuration 5, use of some CSS and js ui frameworks and bug fixes, for example, liger ui6 and nlayerappv2 domain-driven frameworks .................. I believe that no one is willing to write a blog for myself. Comments and recommendations are the motivation for writing!