Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 484|回复: 0

基于jquery 封装的 select 小控件,解决 IE6 7 8里 select 边框 高度 无法遮挡等问题

[复制链接]
  • TA的每日心情
    奋斗
    6 天前
  • 签到天数: 745 天

    [LV.9]以坛为家II

    2041

    主题

    2099

    帖子

    70万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    704660
    发表于 2021-6-18 15:21:41 | 显示全部楼层 |阅读模式

    一、基本原理

    select控件在浏览器中是个永远的痛,不同的版本解析出来的可谓五花八门。主要有以下问题:
    1,IE6中无法设置高度,Z INDEX永远在最上,无法被其它层遮挡
    2,IE7中可以设置高度,但是实际显示高度永远是那么一点点高,下面留出大量的空白
    3,IE8中高度可以设置,但文字不居中,LINE HEIGHT无效
    4,IE9 IE10中相对正常些
    尽管一些JS UI中有类似的COMBO控件,但都不如人意,大部分是要JS绑定数据,如果用这些控件,显然就没有办法使用WEBFORM的事件支持特性,死活不会让我满意。网上也有很多解决方案,有讲怎么去边框的,如 margin:-2px;这种等,但都解决的不彻底,不让我满意。另外说的最多的一种也就是自己重新用DIV画一个,所以有了这个小控件。功能上就是将页面上原有的SELECT 隐藏,然后用DIV画一个SELECT,并引用原SELECT的边框,底色,大小等属性,尽量保持和原定义样式一致,并且可以触发原select的change事件,这样就能保证 DDL在开启 autoPostBack的时候,可以正常解决ASP。NET的后台事件。
    说简单点,就是你原来的SELECT DDL该怎么定义怎么定义,该绑定数据就绑定数据,不用关心新画的SELECT是啥样的,该怎么控制,后台取值,你仍然去取原来控件的值就OK了。
     
    二、主要用法及效果
    目前功能和样式都没有大问题了,个别如IE6 7的高度和居中图有偏差,也就不费心修复了,各位自己设置尺寸,不要复制SELECT尺寸就可以了。有看官帮修复的,麻烦给个修复后的。
     
    和其它jq控件一样,基本一行代码,下面是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">区域不限</option>
                    <option>北京北京北京北京北京</option>
                    <option value="tj">天津</option>
                    <option value="sh">上海</option>
                    <option value="cq">重庆</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,height不解释
    useSelectSize是指是不是要保留原select的尺寸,为true时width,height设置将不起作用。
    listDiff是指下接框与主框之间的间隔修复,一般为2就可以了
     
    看下效果
    IE6
    IE7
    IE8
    IE9 10
    FF
     
     
    三、下载
     
         链接在这里
     
    四、题外
     
      从不愿写很多的文字性的东西,不过最近却有想法写一个系列的博客,却又懒的下不了决心。看看大家有多少感兴趣的,内容应可能是一个完整的企业框架或部分,可能会涉及一项或几项以下内容,有感兴趣的在下面留言,
    1,EF的应用及封装,偏向 CODE FIRST
    2,企业库部分组件、AUTOMAPPER等与WEBFORM的集成(MVC写的人太多了)
    3,PAGE、WEBSERVICE等的利用UNITY的自动注入、AOP切面
    4,权限系统实现对页面与按钮拦截与配置
    5,一些CSS和JS UI框架的使用与BUG修复,如LIGER UI
    6,NLayerAppV2领域驱动框架
    ………………
     
    我相信没有人愿意写一份给自己看的博客 ,大家的留言与推荐才是写下去的动力!
     
    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-3-28 18:45 , Processed in 0.062766 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表