最新版自制小清新selsct插件

所属分类:输入-选择框

 27323  334  查看评论 (6)
分享到微信朋友圈
X
最新版自制小清新selsct插件 ie兼容8

更新时间:2017/9/19 上午10:22:55

更新说明:增加更多使用场景,例如禁用,非透明,完善代码结构,现在变得更精简


更新时间:2017/2/9 上午10:24:51

更新说明:修复了遗漏的一些bug,增加了部分功能,详细内容请下载后参看Demo

实例html代码:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="../CSS/jquery.select.css" rel="stylesheet" />
    <link href="../CSS/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
    <link href="../SelectIcon/iconfont.css" rel="stylesheet" />
    <title>SelectTest</title>
</head>
<body style="background-color: #fff; transition:all 1s;">
    <div style="width:725px;margin:30px auto;">
        <h2 style="text-align:center;">最新版自制小清新Select插件</h2><br />
        <div>
            <b>例1:固定宽度,无搜索框,有默认选择项,有回调函数</b><br /><br />
            <select id="mySelect">
                <option value="1">地球之巅</option>
                <option value="2">宇宙之尽</option>
                <option value="3" selected="selected">时光之末</option>
                <option value="4">生命之终</option>
                <option value="5">灵魂之绝</option>
                <option value="6">地球之底</option>
                <option value="7">宇宙之起</option>
                <option value="8">时光之初</option>
                <option value="9">生命之诞</option>
                <option value="10">灵魂之始</option>
                <option value="11">别问我为啥</option>
                <option value="12">这是测试超长宽度的兼容性</option>
            </select>
        </div>
        <div style="margin-top:220px;">
            <b>例2:自适应内容宽度,有搜索框,自定义字体,自定义下拉列表最大高度,无默认选择项</b><br /><br />
            <select id="mySelect1">
                <option value="1">地球之巅</option>
                <option value="2">宇宙之尽</option>
                <option value="3">时光之末</option>
                <option value="4">生命之终</option>
                <option value="5">灵魂之绝</option>
                <option value="6">宇宙之起</option>
                <option value="7">时光之初</option>
                <option value="8">生命之诞</option>
                <option value="9">灵魂之始</option>
                <option value="10">别问我为啥</option>
                <option value="11">这是测试超长宽度的兼容性</option>
            </select>
        </div>
        <div style="margin-top:200px;margin-bottom:230px;">
            <b>例3:自适应内容宽度,无搜索框,有默认选择项,下拉列表高度小于默认设置或自定义的最大高度</b><br /><br />
            <select id="mySelect2">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6" selected="selected">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>
        </div>
        <p style="color:red;">该插件下原生标签的change事件不会被触发,请直接通过原生select获取选择值,参考例1的回调实现</p>
        <p style="color:red;">兼容IE8及以上,给需要学习或者使用的人,更多定制请参看全部参数,如遇到什么麻烦可以留言联系我</p>
    </div>
</body>
</html>

实例js/jq代码:

<script src="../JS/jquery-1.12.4.min.js"></script>
    <script src="../JS/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="../JS/jquery.select.js"></script>
    <script type="text/javascript">
        $(function () {
            //全部使用默认参数可以直接这样使用
            //$("#mySelect").select();
            //例1,对应上面的HTML
            $("#mySelect").select({
                width: "150px",
                showSearch: false,
                callBack: function () {
                    alert("Value值是:" + $("#mySelect").val() + " Text值是:" + $("#mySelect").next().attr("text"));
                }
            });
            //例2,对应上面的HTML
            $("#mySelect1").select({
                listMaxHeight: "100px",
                themeColor: "orange",
                showSearch: true,
                fontColor: "coral",
                fontHoverColor: "#000",
                rowColor: "#fff",
                rowHoverColor: "orange",
                fontFamily: "黑体"
            });
            //例3,对应上面的HTML$("#mySelect2").select({
                themeColor: "cyan",
                rowHoverColor: "cyan"
            });
            //全部可选参数,不选将使用默认值(颜色可为支持的英文颜色,如red、cyan和16进制、RGB等,大小单位可为px、百分比等,特殊注明的除外)
            //width: "auto",            //生成的select框宽度
            //minWidth: "none",         //最小宽度值,默认不设置(特殊注明:单位只能是px)
            //opacity: true,            //是否设置背景透明,默认透明
            //listMaxHeight: "200px",     //生成的下拉列表最大高度
            //themeColor: "#00bb9c",    //主题颜色
            //fontColor: "#000",        //字体颜色
            //fontFamily: "'Helvetica Neue', arial, sans-serif",    //字体种类
            //fontSize: "15px",           //字体大小
            //showSearch: false,        //是否启用搜索框
            //rowColor: "#fff",          //行原本的颜色,此处根据页面背景颜色设置,不设置会默认白色
            //rowHoverColor: "#00bb9c", //移动选择时,每一行的hover底色
            //fontHoverColor: "#fff",   //移动选择时,每一行的字体hover颜色
            //mainContent: "请选择",    //选择显示框的默认文字
            //searchContent: "关键词搜索",   //搜索框的默认提示文字
            //callBack: function () { }   //选择事件的回调函数,替代原生change事件
            //自动变化网站背景
            setInterval(function () {
                var colors = ["#fff", "#b200ff", "#87cafa", "#b6ff00", "#4b64f6"];
                var color = colors[parseInt(Math.random() * 4)];
                $("body").css("background-color", color);
            }, 5000);
        });
    </script>

注明:定制请参看列出的全部可选参数,注意引用文件的顺序,最简单的调用方法(使用默认参数):

$("#MySelect").select();


相关插件-选择框

简单的jQuery多选下拉框

单纯的写了一个 平常用到的下拉框
  选择框
 40322  315

jQuery下拉框美化插件

jQuery自定义select下拉框美化插件
  选择框
 38385  356

JQ省市区三级联动选择插件

JQ省市区三级联动选择插件
  选择框
 149909  487

js实现美化的下拉框菜单插件

用div+ul实现的下拉框,用户可通过修改样式来定义自己喜欢的风格。
  选择框
 58344  354

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    evfive 0
    2017/2/17 17:53:14
    hello 想问一下  点击当前控件 其他控件 自动关闭(焦点隐藏下拉框) 是怎么个实现思路 ? 回复
    0
    2017/1/19 12:43:19

    这个去掉最好 $This.find(".select_content").css({ "width": ($This.width() - 40) + "px" });

    回复
    王传杰 0
    2017/1/18 13:23:33
    evfive 0
    2016/11/28 11:11:40
    evfive 0
    2016/11/22 16:11:17
    hello 想问一下  点击当前控件 其他控件 自动关闭(焦点隐藏下拉框) 是怎么个实现思路 ? 回复
    秦时明月? 0
    2016/10/20 9:10:39
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复