基於mui的滿意度插件

header 頭部的引入文件

 <link href="css/mui.min.css" rel="stylesheet"/>

<link rel="stylesheet" type="text/css" href="css/manyidu.css"/>

 <script src="js/mui.min.js"></script>

 

HTML 內容區域

<div class="manyidu">
　　<form class="form-group">
　　　　<div class="form-control mui-table-view-cell">
　　　　　　<label>滿意度：</label>
　　　　　　<div class="icons mui-inline" style="margin-left: 6px;">
　　　　　　　　<i data-index="1" class="mui-icon mui-icon-star"></i>
　　　　　　　　<i data-index="2" class="mui-icon mui-icon-star"></i>
　　　　　　　　<i data-index="3" class="mui-icon mui-icon-star"></i>
　　　　　　　　<i data-index="4" class="mui-icon mui-icon-star"></i>
　　　　　　　　<i data-index="5" class="mui-icon mui-icon-star"></i>
　　　　　　</div>
　　　　</div>
　　</form>
　　<input type="button" name="" id="fabu" value="發佈評價" />
</div>

JQuery部分

<script type="text/javascript" charset="utf-8">

// 星星滿意度
mui('.icons').on('tap','i',function(){
var index = parseInt(this.getAttribute("data-index"));
var parent = this.parentNode;
var children = parent.children;
if(this.classList.contains("mui-icon-star")){ //點擊的那個以前若是由空心的星星變成實心的
for(var i=0;i<index;i++){
children[i].classList.remove('mui-icon-star'); //star是空心的星星
children[i].classList.add('mui-icon-star-filled'); //filled是實心的星星
}
}else{
for (var i = index; i < 5; i++) { //點擊的那個以後由實心的星星變成空心的
children[i].classList.add('mui-icon-star')
children[i].classList.remove('mui-icon-star-filled')
}
}
//打了幾顆星呢
// console.log(index);
});

</script>

 

CSS 部分

/* 滿意度評價 */
.mui-icon-star{
color: darkorange;
}

.mui-icon-star-filled{
color: darkorange;
width: 1.125rem;
height:1.125rem;
}
.mui-table-view-cell{
padding: 0;
}
.mui-table-view-cell label{
font-weight: 400;
font-size: 0.875rem;
}
.mui-inline{
margin-left: 0.1875rem!important;
}
.mui-icon-star{
width: 1.125rem;
height:1.125rem;
}

 

/* 按鈕 */
.anniu{
padding: 0.9375rem 0.625rem;
background-color: #FFFFFF;
display: flex;
justify-content: flex-start;
}
.anniu span{
font-size: 0.625rem;
}
.anniu img{
width: 0.9375rem;
height: 0.9375rem;
float: left;
}
.anniu button{
width: 30%;
border-radius: 0.9375rem;
border: 0.0625rem solid #FC0034;
margin: 0 0.125rem;
padding: 0.375rem 0.125rem;
}
.anniu button:nth-child(1){
color: #FFFFFF;
background-color: #FC0034;
}
.anniu button:nth-child(2){
width: 80%;
color: #FB137A;

}
.anniu button:nth-child(3){
color: #FB137A;
width: 70%;
}
.anniu button:nth-child(4){
color: #FB137A;
width: 70%;
}

 

補充說明：

該內容也是在網上開別人的，而後根據雪球進行了一部分的微調，歡迎你們相互交流