适合初学者的select插件

发布时间: 编辑:WANG 0人评论 190次浏览 jQuery表单验证插件

简介:通过原生生成美化后的,分享给初学者

自制小清新select插件图片预览

自制小清新select插件图片预览

自制小清新select插件浏览器适配

  • 支持Chrome所有版本
  • 支持Firefox所有版本
  • 支持Safari所有版本
  • 支持IE9及以上版本

jQuery插件浏览器支持

自制小清新select插件使用教程

<html>
<head>
    <link href="/Content/select.css" rel="stylesheet" />
    <link href="/CSS/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
</head>
<body>
        <select id="mySelect">
            <option value="1">成功1</option>
            <option value="2">成功2</option>
            <option value="3" selected="selected">成功3</option>
            <option value="4">成功4</option>
            <option value="5">失败5</option>
            <option value="6">失败6</option>
            <option value="7">失败7</option>
            <option value="8">失败8</option>
            <option value="9">失败9</option>
            <option value="10">失败10</option>
            <option value="11">失败11</option>
            <option value="12">失败12</option>
        </select>
</body>
</html>

jq代码:  

<script src="/JS/jquery-1.11.3.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(); 不传参数可以这样写
    $("#mySelect").select({
      width: "200px"
    });
    //可选参数,不填就是默认值
    //width: "180px",            //生成的select框宽度
    //listMaxHeight:"200px",     //生成的下拉列表最大高度
    //themeColor: "#00bb9c",    //主题颜色
    //fontColor: "#000",        //字体颜色
    //fontFamily: "'Helvetica Neue', arial, sans-serif",    //字体种类
    //fontSize:"15px",           //字体大小
    //showSearch: false,        //是否启用搜索框
    //rowColor:"#fff",          //行原本的颜色
    //rowHoverColor: "#0faf03", //移动选择时,每一行的hover底色
    //fontHoverColor: "#fff",   //移动选择时,每一行的字体hover颜色
    //mainContent: "请选择",    //选择显示框的默认文字
    //searchContent: "关键词搜索"   //搜索框的默认提示文字  
  });</script>
备注:js文件的引用顺序必须和示例一样,并且缺一不可


查看更多

转载必须注明来自:https://huajiakeji.com/jqueryform/37352.html

评论:(0)

已有 0 位网友发表了一针见血的评论,你还等什么?



为打击盗链困扰,本站已启用公众号人机验证
微信扫码关注公众号,发送"插件"二字获得验证码,验证码5分钟有效。

Chrome插件离线安装方法