TAG Jquery功能

来源：互联网发布：mysql需要多大内存编辑：程序博客网时间：2024/06/18 06:15

div.tagsinput {    background: #fff none repeat scroll 0 0;    border: 1px solid #ccc;    height: 100px;    overflow-y: auto;    padding: 5px;    width: 300px;}.bootstrap-tagsinput {    background-color: #ffffff;    border: 2px solid #ebedef;    border-radius: 6px;    font-size: 0;    margin-bottom: 18px;    padding: 6px 1px 1px 6px;    text-align: left;}.tagsinput-primary .tag {    background-color: #1abc9c;    color: #ffffff;}.bootstrap-tagsinput .tag {    background-color: #ebedef;    border-radius: 4px;    color: #7b8996;    cursor: pointer;    display: inline-block;    font-size: 13px;    height: 27px;    line-height: 15px;    margin: 0 7px 7px 0;    overflow: hidden;    padding: 6px 21px;    position: relative;    transition: all 0.25s linear 0s;    vertical-align: middle;}.bootstrap-tagsinput .tag > span::after {    content: "x";    font-family: "Flat-UI-Icons";    line-height: 27px;}.bootstrap-tagsinput .tag > span {    bottom: 0;    color: #ffffff;    cursor: pointer;    font-size: 12px;    opacity: 0;    padding: 0 10px 0 0;    position: absolute;    right: 0;    text-align: right;    text-decoration: none;    top: 0;    transition: opacity 0.25s linear 0s;    width: 100%;    z-index: 2;}.bootstrap-tagsinput input[type="text"] {    background-color: transparent;    border: medium none;    box-shadow: none;    color: #34495e;    font-size: 14px;    height: 29px;    margin: 0;    max-width: inherit;    min-width: 80px;    outline: medium none;    padding: 0;    vertical-align: top;    width: auto !important;}.bootstrap-tagsinput .tag:hover {    background-color: #16a085;    color: #ffffff;    padding-left: 14px;    padding-right: 28px;}.bootstrap-tagsinput .tag:hover > span {    filter: none;    opacity: 1;}.tagsinput-primary .tag {    background-color: #1abc9c;    color: #ffffff;}

JS代码

$(function (){var editor = $('#textarea1').wangEditor();$(".tagsinput").tagsinput();});

效果图如上

1 0