单维度多项筛选

来自bilibili游戏中心 - WIKI
跳到导航 跳到搜索
页面贡献者 :
顾小满real

前言

  • 这是一个涉及js代码和css代码的较复杂的工具。

前期准备

1-将如下代码添加到您的WIKI的mediawiki:common.js里

$(function() {
	//解决手机上按键选项hover效果不消失的问题
	 $("body").on("touchstart", function(e) {});
	
	//筛选页面列表筛选
	$('.filter li').on('mouseenter touchstart',function(e) {
		$(this).children().addClass('hover');
	});
	
	$('.filter li').on('mouseleave touchend',function(e) {
		$(this).children().removeClass('hover');
	});
	
	$('.filter li').on('click',function(e) {
		if(!$(this).parent().attr('data-maxselect')) {
			$(this).siblings().children().removeClass('active');
			$(this).children().toggleClass('active');
		} else {
			if($(this).siblings().find('.active').length >= $(this).parent().attr('data-maxselect')) {
				return false;
			} else {
				$(this).children().toggleClass('active');
			}
		}
		var item = new Array();
		$('.filter').find('.active').parent().each(function() {
			if($('#wiki_table_select tbody').length == 0) {
				var data_type = $(this).parent().attr('data-type');
				item.push("[data-param" + data_type + "='" + $(this).attr("data-value") + "']");
			} else {
				item.push($(this).attr("data-value"));
			}
		});
		
		
		if(item.length !== 0) {
			if($('#wiki_table tbody').length != 0) {
				$('#wiki_table tbody').children().hide(400);
				$('#wiki_table tbody').children(item.toString().replace(/,/g, '')).show(300);
			} else {
				$('#wiki_table_select tbody').children().hide(400);
				var val = $('#wiki_table_select tbody').children().filter(function() {
					var data = $(this).data('param1').split(',');
					var j = 0;
					for(var i = 0; i < data.length; i++){
						if(item.indexOf(data[i]) < 0)
							continue;
						else
							j++;
					}
					if(j == item.length)
						return $(this);
				});
				val.show(300);
			}
			//$('#wiki_table tbody').children().not(item.toString().replace(/,/g, '')).hide(1000);
		} else {
			$('#wiki_table tbody').children().show(300);
		}
	});

 

2-将如下代码添加到您的WIKI的mediawiki:common.css里

/*条件筛选页面*/
.select-grid {
	width: 100%;
    padding: 10px 0 35px 0;
    display: table;
    margin: 0 0 40px 0;
    border-bottom: 1px solid #a2a9b1;
}

.select-grid table td {
    padding: 5px 10px 0 0;
}

.filter {
    display: block;
    clear: both;
}

span.select-wrap, span.imgselect-wrap {
	margin:0 15px 5px 0;
	padding: 8px 0;
	font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    display: inline-block;
    color: rgba(0,0,0,.85);
    text-align: center;
    line-height: 14px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
}

span.select-wrap {
	width:80px;
	height:30px;
}
span.imgselect-wrap {
	padding:8px 10px;
}

span.imgselect-wrap p {
	display: block;
	margin-top:10px;
}

/*手机端hover伪类显示异常,magic,只能靠js了*/
span.select-wrap.hover, span.imgselect-wrap.hover {
	color: #000;
    border: 1px solid rgb(133, 146, 239);
    cursor: pointer;
    background:#FFF;
}

span.select-wrap.active, span.imgselect-wrap.active {
	border: 1px solid rgba(119,132,222);
    color:rgba(119,132,222);
}

.filter li {
    list-style:none;
    float:left;
}

/*按钮样式修正*/
.section-wrap:hover{
	background-color:#8282b4 ;
}

span.select-wrap {
	font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    display: inline-block;
    color: rgba(0,0,0,.85);
    text-align: center;
    line-height: 14px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius:2px
}