首页 > 代码库 > bootstrap的pillbox使用

bootstrap的pillbox使用

2024-11-16 07:51:02   204人阅读

使用bootstrap的cameo模版，搭建了一个cms系统，使用pillbox做显示的时候，出现点击×失败的问题。

分析了一下pillbox这个控件的使用方法。

pillbox的样例在cameo/forms.html文件中。

样式定义的cameo/css/main.css中：

.pillbox {
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #e8ecf3;
    border-radius: 2px;
    line-height: 1;
}
.pillbox ul {
    display: inline-block;
    margin: 0;
}
.pillbox li {
    display: inline-block;
    margin: 2px;
    padding: 4px;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 2px;
    font-weight: bold;
}
.pillbox li:after {
    position: relative;
    float: right;
    padding-left: 4px;
    content: " \00D7";
    font-size: 12px;
}
.pillbox li.status-important {
    background-color: #ff604f;
}
.pillbox li.status-warning {
    background-color: #ffb244;
}
.pillbox li.status-success {
    background-color: #2dcb73;
}
.pillbox li.status-info {
    background-color: #1ec3c8;
}

其中"×"这个图标定义在这里，:after属于css中伪类的概念，:after 选择器在被选元素的内容后面插入内容，content 属性来指定要插入的内容。如下li:after表示在li这个元素后面插入内容"\00D7"，也就是”ד这个图标。

.pillbox li:after {
    position: relative;
    float: right;
    padding-left: 4px;
    content: " \00D7";
    font-size: 12px;
}

 点击的动作执行脚本被定义在cameo\vendor\fuelux\pillbox.js中，如果要使对这个控件的动作生效，在html文档中必须引用pillbox.js文件

<script src="http://www.mamicode.com/vendor/fuelux/pillbox.js"></script>

由于之前的html文件中，只引用了main.css没有引用pillbox.js，所以该控件的显示没有问题，但点击叉叉的动作没有响应。

bootstrap的pillbox使用


联系
我们