下拉框重写

$(function () {
    $(".select-default").selectOpen();
});
$.fn.selectOpen = function () {
    var singleSelect = function (parentObj) {
        parentObj.addClass("single-select"); //添加样式
        parentObj.children().hide(); //隐藏内容
        var sltWidth = parentObj.attr("width"); //定义宽度
        var sltHeight = parentObj.attr("height"); //定义高度
        var divObj = $(‘<div class="boxwrap focus"></div>‘).prependTo(parentObj); //前插入一个DIV
        divObj.css("width", sltWidth); //写入宽度
        //创建元素
        var titObj = $(‘<a class="select-tit" href="javascript:;"><span></span><i></i></a>‘).appendTo(divObj);
        var itemObj = $(‘<div class="select-items"><ul></ul></div>‘).appendTo(divObj);
        itemObj.find("ul").css("width", sltWidth);
        itemObj.find("ul").css("height", sltHeight);
        var selectObj = parentObj.find("select").eq(0); //取得select对象
        //遍历option选项
        selectObj.find("option").each(function (i) {
            var indexNum = selectObj.find("option").index(this); //当前索引
            var liObj = $(‘<li title="‘ + $(this).text() + ‘">‘ + $(this).text() + ‘</li>‘).appendTo(itemObj.find("ul")); //创建LI
            if ($(this).prop("selected") == true) {
                liObj.addClass("selected");
                titObj.find("span").text($(this).text()).attr("title", $(this).text());
            }
            //检查控件是否启用
            if ($(this).prop("disabled") == true) {
                liObj.css("cursor", "default");
                return;
            }
            //绑定事件
            liObj.click(function () {
                $(this).siblings().removeClass("selected");
                $(this).addClass("selected"); //添加选中样式
                selectObj.find("option").prop("selected", false);
                selectObj.find("option").eq(indexNum).prop("selected", true); //赋值给对应的option
                titObj.find("span").text($(this).text()).attr("title", $(this).text()); //赋值选中值
                itemObj.hide(); //隐藏下拉框
                selectObj.trigger("change"); //触发select的onchange事件

            });
        });

        //检查控件是否启用
        if (selectObj.prop("disabled") == true) {
            titObj.css("cursor", "default");
            return;
        }
        //绑定单击事件
        titObj.click(function (e) {
            e.stopPropagation();
            //表单验证提示信息点击之后消失
            $(this).parents(".pst-rela").find(".tips-text").hide();
            if (itemObj.is(":hidden")) {
                selectObj.trigger("click"); //触发select的click事件

                //隐藏其它的下位框菜单
                $(".single-select .select-items").hide();
                //位于其它无素的上面
                itemObj.css("z-index", "51");
                //显示下拉框
                itemObj.show();
                //加深边框颜色
                //divObj.addClass(‘focus‘);    

            } else {
                //位于其它无素的上面
                itemObj.css("z-index", "");
                selectObj.trigger("blur"); //触发select的onblure事件
                //隐藏下拉框
                itemObj.hide();
                //去除边框颜色
                //divObj.removeClass(‘focus‘);
            }
        });
        //绑定页面点击事件
        $(document).click(function (e) {
            selectObj.trigger("blur"); //触发select的onblure事件
            itemObj.hide(); //隐藏下拉框
            //divObj.removeClass(‘focus‘);//去除边框颜色
        });
    };
    return $(this).each(function () {
        singleSelect($(this));
    });
}
//下拉框重写结束
<div class="select-default">
    <select >
        <option value="">这样就可以啦</option>
    </select>
</div>

.single-select ol, ul
{
    list-style: none;
    padding: 0;
    margin: 0;
}
.single-select
{
    position: relative;
    display: inline-block;
    font-family: Microsoft YaHei;
    color: #666;
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
    cursor: pointer;
}
.single-select .boxwrap
{
    display: inline-block;
    width: 161px;
    border: solid 1px #d6d6d6;
    vertical-align: middle;
}
.single-select .boxwrap.focus, .single-select .boxwrap.focus ul
{
    border: solid 1px #ed9334;
}
.single-select .select-tit
{
    position: relative;
    display: block;
    padding: 0 36px 0 5px;
    line-height: 26px;
    height: 26px;
    text-decoration: none;
    background: #fff;
    word-break: break-all;
    color: #666;
    overflow: hidden;
}
.single-select .select-tit span
{
    display: inline-block;
    height: 26px;
}
.single-select .select-tit i
{
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    width: 26px;
    height: 26px;
    background: url(../images/sprite.png) -134px -20px no-repeat;
}
.boxwrap.focus i{
    background-position:-134px -20px;
}
.single-select .select-items
{
    display: none;
    position: absolute;
    left: 0;
    top: 31px;
}
.select-up .select-items
{
    top:auto;
    bottom:31px;
}
.single-select .select-items ul
{
    position: relative;
    width: 161px;
    max-height: 130px;
    border: 1px solid #d6d6d6;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
}
.single-select .select-items ul li
{
    display: block;
    padding-left: 5px;
    line-height: 26px;
    height: 26px;
    overflow: hidden;
    cursor: pointer;
}
.single-select .select-items ul li:hover
{
    color:#ed9334;
}
.single-select .select-items ul li.selected
{
    background: #ed9334;
    color:#fff;
}
.single-select.disabled .boxwrap
{
    border: 1px solid #d6d6d6;
}
.single-select.disabled .select-tit
{
    color:#b3b3b3;
    cursor:default;
}
.single-select.disabled .select-items
{
    display:none !important;
}
/* 下拉框样式结束 */

CSS

完整压缩包下载地址:http://pan.baidu.com/s/1i3yI5Ul

时间: 2024-09-30 15:52:07

下拉框重写的相关文章

自建List&lt;&gt;绑定ComboBox下拉框实现省市联动

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Data.SqlClient; namespace _04省市联动 { public partial cl

select下拉框的样式在浏览器上的兼容问题

最近项目中遇到了自定义下拉框的默认样式在谷歌,火狐,IE上显示不同的问题. 左侧图片就是重写的样式,下拉框的右侧三角是选用的bootstrap里面的图片,通过绝对定位放过去的. css: select { /*Chrome同Firefox与IE里面的右侧三角显示的样式不同*/ border: solid 1px #ddd; /*将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; p

自定义控件基础01_菜单轮__viewPager_下拉框_自定义开关

1,自定义控件分类: 1.1组合控件:由安卓中原生的控件组合起来,配合动画达成的效果 1.2自定义控件 1.3组合控件案例演示: 案例:优酷菜单demo 三层圆环,按下menu键会通过动画效果消失在界面,点击小房子和中层圆环,最外层圆环消失 ①布局实现: 三层相对布局相互叠加(因为图片背景是透明的,所以可以叠加显示) 由于三个布局是叠加显示的,所以这个菜单选项要使用一个占据焦点比较强的(不然有可能点击不到)ImageButton控件 控件上background=”@android:color/t

高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框

上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输入时显示一个提示字符串.由于Background对ComboBox无效,所以直接通过Background来实现是不行了.需要重新写ComboBox的模板,也就是Template,自定义一个模板来实现这个结果.又看了一下QQ的下拉框,这玩意不自定义也难以实现,所以就干脆自定义了. 先上代码,先是Com

框架 day50 BOS项目 4 批量导入(ocupload插件,pinyin4J)/POI解析Excel/Combobox下拉框/分区组合条件分页查询(ajax)/分区数据导出(Excel)

知识点: 批量导入(ocupload插件,pinyin4J /POI解析Excel(apache POI) /区域分页查询 /Combobox下拉框 /分区组合条件分页查询(ajax) /分区数据导出(Excel下载) BOS项目笔记第4天 1.    区域批量导入功能 *Ajax不支持文件上传. *上传并且不刷新上传页面原理: Target到一个0,0,0的隐藏iframe里,造成一个没有刷新的假象 <form target="myIframe" action="ab

Java Swing应用程序 JComboBox下拉框联动查询

在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份:<下拉框省份> 市区:<下拉框市区> 县乡:<下拉框县乡> 街道:<街道下拉框> 查询 譬如说,你选择了省:江苏省,那么在市区中只会显示江苏省的市区 譬如:(网上的图) 具体详细实现可以参考,写得挺好的:http://blog.csdn.net/sinat_24491773/article/details/50810471 那么在swing

基于element-ui的多选下拉框和tag标签的二次封装

前言: 今年这大半年我主要负责公司的后台教务管理的开发,这个管理系统目前主要是给公司的内部人员去配置公司的核心项目(例如:熊猫小课)的所有数据,例如课程的配置.课程期数的配置.课程版本的配置.活动的配置.课程安排表.管理员的权限配置.物流的管理.退款管理.学员咨询管理等功能.因为一开始这个教务系统的原型设计就是基于element-ui 1.4.13的版本设计的,前端一开始为了和设计稿给的原型保持一致,项目中也是基于element-ui 1.4.13在开发,现在这个版本官方已经停止维护了,我们曾经

DevExpress的下拉框控件ComboxBoxEdit怎样绑定键值对选项

场景 DevExpress的下拉框控件ComboBoxEdit控件的使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/102855898 在设置ComboBoxEdit的下拉框内容时除了最简单的 comboBox.Properties.Items.Add("下拉选项1"); 如果要添加键值对形式的数据该怎样实现. 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi

读取mysql中的特定列值放入页面的下拉框中

1.使用的技术:JSP,Spring JDBC(Mapper) 2.代码 2.1 接口 public interface IMeetingRoomDao { public List<Mrcap> selectCap(); public List<Mrfloor> selectFloor(); } 2.2 实现类 @Override public List<Mrcap> selectCap() { List<Mrcap> caplist = new Array