当前博客：实现一个电影网站常见的筛选器

267 次浏览【转载需注明来源】

收藏内容 (0) (0)

博客作者：【qiang】

个性签名：请输入个性签名___________

很多网站都有类似的筛选器，我们实现一下这样的一个筛选器，先放一个我做好的筛选器图片。

第一步：创建项目（有项目的可以跳过）

打开快码编程软件，新建一个项目。

分析一下筛选器的结构，

一个区块包裹4个区块，我们用html把结构写出来

<区块 类名="筛选器">
    <区块></区块>
    <区块></区块>
    <区块></区块>
    <区块></区块>
</区块>

然后每个小区块都有一个标题，一个列表，

列表里面是列表项，列表项是可以点击的文字，这里用按钮或者超链接都可以，我这里用超链接来做比较好（给超链接的链接地址属性写上javascript:;或者javascript:void(0)可以阻止超链接的跳转）。

<区块 类名="筛选器">
	<区块 类名="筛选行">
		<标题4>栏目 :</标题4>
		<无序列表>
			<列表项 类名="选中"><超链接 链接地址="javascript:;">电影</超链接></列表项>
			<列表项><超链接 链接地址="javascript:;">微电影</超链接></列表项>
			<列表项><超链接 链接地址="javascript:;">系列电影</超链接></列表项>
			<列表项><超链接 链接地址="javascript:;">纪录片</超链接></列表项>
			<列表项><超链接 链接地址="javascript:;">晚会</超链接></列表项>
			<列表项><超链接 链接地址="javascript:;">独家</超链接></列表项>
			<列表项><超链接 链接地址="javascript:;">综艺</超链接></列表项>
			<列表项><超链接 链接地址="javascript:;">体育</超链接></列表项>
		</无序列表>
	</区块>
	<区块></区块>
	<区块></区块>
	<区块></区块>
</区块>

调试出来的结果非常难看，我们需要先把列表项放在一排，然后给列表加上样式。

/* 重置网页基础样式*/
网页主体 {
	外边距: 0;
}
/* 这里都是网页自带的样式,建议引一个UI框架 */
标题4,
无序列表,
列表项 {
	外边距: 0;
	内边距: 0;
}
/* 重置超链接的下划线样式 */
超链接 {
	文本-装饰: 无效;
}
/* 设置列表项样式 */
.筛选器 .筛选行 列表项 {
	/* 设置为内联块元素,元素就不会占满,元素可以在同一行 */
	显示模式: 内联块元素;
	/* 给元素和元素之间设置一个间隔 */
	外边距: 4px 2px;
}
/* 设置列表项里面的超链接 */
.筛选器 .筛选行 列表项 超链接 {
	/* 设置成块级元素,占满列表项 */
	显示模式: 块级元素;
	/* 设置一个左右内边距,变成选中样式的时候,更加好看,并且点击区域更大了,方便点击 */
	内边距: 0 8px;
}

继续修改，这里教大家一个布局，当左右布局的时候，左边或者右边是固定的元素，可以把元素设置成浮动，另外一个元素设置一个左右外边距，把浮动的元素的距离隔出来，并且可以撑开元素的盒子，外面的盒子就不用设置清除浮动，演示一下。

/* 设置筛选器分类标题 */
.筛选器 .筛选行 标题4 {
	/* 把元素设置成浮动,脱离文档流 */
	浮动: 左侧;
	/* 设置元素的宽度 */
	宽度: 60px;
	/* 设置文字的样式 */
	文本-对齐: 居中;
	行高: 34px;
	颜色: #747474;
	字体-粗细: 正常;
}
/* 设置筛选器分类筛选列表 */
.筛选器 .筛选行 无序列表 {
	/* 隔开分类的距离,要不然换行会自动排列到分类的下面 */
	左边距: 65px;
}

继续筛选器的样式。

/* 设置列表项里面的超链接 */
.筛选器 .筛选行 列表项 超链接 {
	/* 设置成块级元素,占满列表项 */
	显示模式: 块级元素;
	/* 设置一个左右内边距,变成选中样式的时候,更加好看,并且点击区域更大了,方便点击 */
	内边距: 0 8px;
	行高: 26px;
	颜色: #333;
}
/* 设置列表项超链接,鼠标移入和选中的样式 */
.筛选器 .筛选行 无序列表 列表项.选中 超链接,
.筛选器 .筛选行 无序列表 列表项:鼠标移入 超链接 {
	/* 设置文字颜色和元素背景,再设置一点圆角,给人一种按钮的感觉 */
	背景: #bee9ff;
	颜色: #0077b3;
	边框-圆角: 3px;
}

样式已经出来了，我把整个筛选器写完整看看。

这个筛选器占满了整个屏幕，我们给这个筛选器设置一个最大宽度，并且让它居中。

/* 设置筛选器最大宽度并让它居中 */
.筛选器 {
	最大-宽度: 1200px;
	外边距: 30px 自动;
}

到这里，筛选器的界面效果已经出来了，我们再写一下它的脚本。

首先切换筛选器是通过点击分类列表切换的，我们需要用到点击事件。

先勾选jq支持库，jq操作dom比较方便，当然也可以用js来写。

$(".筛选器 列表项").点击(定义函数 () {
	//   点击之后,给当前元素添加一个选中的类名,同辈元素删除选中类名
	$(本对象).添加HTML样式类("选中").同辈元素().删除HTML样式类("选中");
});

这样就可以选中其它分类了，然后我们点击一个分类是不是要获取筛选器的选中分类，并且请求数据

// 	给筛选器的列表项设置一个点击函数
$(".筛选器 列表项").点击(定义函数 () {
	//   点击之后,给当前元素添加一个选中的类名,同辈元素删除选中类名
	$(本对象).添加HTML样式类("选中").同辈元素().删除HTML样式类("选中");
	// 	设置一个变量存储筛选器参数
	局部变量 请求数据参数 = {};
	// 遍历所有的选中
	$(".筛选器 列表项.选中").遍历(定义函数 () {
		// 找到选中的分类左侧的分类标题内容文本
		局部变量 类型 = $(本对象).所有父级(".筛选行").查找(".分类").获取或设置内容();
		// 替换不要的字符
		类型 = 类型.替换(" :", "");
		// 当前选中的内容文本
		局部变量 选中 = $(本对象).获取或设置内容();
		// 存储在对象里面
		请求数据参数[类型] = 选中;
	});
	// 	这里就是取出请求数据,通过api请求,更新数据了,我这里就不写了,筛选器就到这里了
	调试输出(请求数据参数);
});

因为jq的链式操作里面的选择器不能很好的标签翻译原因，我给分类标题添加了类名。