jquery创意下拉多选框效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery创意下拉多选框效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        @font-face {
        	font-family:'Roboto';
        	font-style:normal;
        	font-weight:100;
        	src:url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1MmgVxIIzc.ttf) format('truetype')
        }
        @font-face {
        	font-family:'Roboto';
        	font-style:normal;
        	font-weight:300;
        	src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc9.ttf) format('truetype')
        }
        @font-face {
        	font-family:'Roboto';
        	font-style:normal;
        	font-weight:400;
        	src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype')
        }
        @font-face {
        	font-family:'Roboto';
        	font-style:normal;
        	font-weight:700;
        	src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype')
        }
        @font-face {
        	font-family:'Roboto';
        	font-style:normal;
        	font-weight:900;
        	src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtfBBc9.ttf) format('truetype')
        }
        body {
        	font-family:'Roboto';
        	padding:0;
        	margin:0;
        	background:linear-gradient(-45deg,#183850 0,#183850 25%,#192c46 50%,#22254c 75%,#22254c 100%);
        	background-repeat:no-repeat;
        	background-attachment:fixed;
        	margin-top:100px;
        	margin-left:20px;
        	color:#ecf0f1
        }
        .container {
        	margin:0 auto;
        	display:table
        }
        .selectionator {
        	position:relative;
        	border-radius:2px;
        	background-color:#2c3e50;
        	color:#95a5a6;
        	perspective:800px;
        	width:200px
        }
        .selectionator .search {
        	position:relative;
        	display:block;
        	border:0;
        	width:100%;
        	padding:1em;
        	outline:0;
        	color:#FFF;
        	background-color:#16a085;
        	box-sizing:border-box;
        	transform-style:preserve-3d;
        	transform-origin:50% 0;
        	transition:transform .3s;
        	border-radius:2px;
        	z-index:99
        }
        .selectionator .search .overlay {
        	width:100%;
        	background-color:#f00;
        	height:100%;
        	position:absolute;
        	left:0;
        	top:0;
        	background:linear-gradient(to bottom,rgba(0,0,0,0.35) 0,rgba(0,0,0,0.1) 100%);
        	opacity:0
        }
        .selectionator .search .shadow {
        	position:absolute;
        	height:15px;
        	width:100%;
        	left:0;
        	bottom:-15px;
        	transform-origin:center bottom;
        	transform:scale(0.95,1) translate3d(0,0px,0);
        	background:linear-gradient(to bottom,rgba(0,0,0,0.75) 0,rgba(0,0,0,0) 100%);
        	opacity:0
        }
        .selectionator .search:before {
        	content:"\f078";
        	display:inline-block;
        	font-family:FontAwesome;
        	font-style:normal;
        	font-weight:normal;
        	line-height:1.5;
        	float:right;
        	vertical-align:middle
        }
        .selectionator:hover .search,.selectionator.opened .search {
        	transform:rotate3d(1,0,0,60deg)
        }
        .selectionator:hover .search .overlay,.selectionator.opened .search .overlay,.selectionator:hover .search .shadow,.selectionator.opened .search .shadow {
        	opacity:1
        }
        .selectionator:hover .menu,.selectionator.opened .menu {
        	height:200px;
        	opacity:1
        }
        .selectionator .menu {
        	overflow:hidden;
        	position:absolute;
        	width:100%;
        	top:50%;
        	height:0;
        	border-radius:0;
        	background-color:#2c3e50;
        	transition:all .3s ease;
        	opacity:0;
        	border:1px solid #16a085;
        	border-top:0
        }
        .selectionator ul.list {
        	list-style:none;
        	padding:0;
        	margin:0;
        	overflow:hidden;
        	overflow-y:scroll;
        	height:0;
        	-webkit-backface-visibility:hidden;
        	backface-visibility:hidden;
        	transition:all .3s ease;
        	opacity:.75;
        	width:100%;
        	height:100%
        }
        .selectionator ul.list>li span.header {
        	display:block;
        	padding:6px;
        	background-color:#34495e;
        	font-weight:200;
        	color:#fff
        }
        .selectionator ul.optgroup {
        	list-style:none;
        	padding:0;
        	margin:0;
        	-webkit-touch-callout:none;
        	-webkit-user-select:none;
        	-moz-user-select:none;
        	-ms-user-select:none;
        	user-select:none
        }
        .selectionator ul.optgroup li:hover {
        	background-color:#16a085;
        	color:#fff
        }
        .selectionator ul.optgroup li input[type="checkbox"] {
        	display:none;
        	margin:6px
        }
        .selectionator ul.optgroup li input[type="checkbox"]:checked {
        	background-color:#1abc9c
        }
        .selectionator ul.optgroup li input[type="checkbox"]:checked ~ label {
        	background-color:#2980b9;
        	color:#fff
        }
        .selectionator ul.optgroup li input[type="checkbox"]:checked ~ label:before {
        	content:"\f14a"
        }
        .selectionator ul.optgroup li label {
        	font-weight:100;
        	display:block;
        	padding-left:15px;
        	line-height:2em;
        	transition:all .3s ease
        }
        .selectionator ul.optgroup li label:before {
        	content:"\f096";
        	display:inline-block;
        	font-family:FontAwesome;
        	font-style:normal;
        	font-weight:normal;
        	line-height:1;
        	margin-right:8px;
        	vertical-align:middle
        }
    </style>
</head>

<body>

    <div class="container">
        <div id="select" ng-model=""></div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function() {
            var c = "selectionator";
            var a = {
                propertyName: "selectionator",
                src: null,
                orgElement: null,
                checkedItems: [],
                onError: function(d) {}
            };
        
            function b(d, e) {
                this.element = d;
                this.selector = null;
                this.options = $.extend({}, a, e);
                this._defaults = a;
                this._name = c;
                this.init()
            }
            b.prototype = {
                init: function() {
                    console.log("options: ", this.options);
                    var e = this;
                    var d = $(e.element);
                    e.options.src = e.element.getAttribute("data-src");
                    e.selector = e.createFromJson(e.options.data);
                    e.options.orgElement = e.element.........完整代码请登录后点击上方下载按钮下载查看