整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

使用CSS3做一个带动画的下拉列表,来学习一下吧


下拉列表select在表单中应该算是使用频率比较高的一个元素,而我们也知道页面上默认的select标签样式是很难看的。基本所有的团队都会选择使用Bootstrap或者自己封装一个下拉列表的组件,今天我们也试着使用CSS3新特性来写一个带动画效果的下拉列表样式吧。

CSS3

感兴趣的可以自行去github上学习源码,github地址如下。

https://github.com/zhouxiongking/article-pages/blob/master/articles/dropdown/dropdown.html

页面效果

首先,我们来看看带动画效果的下拉列表效果是什么样的,如下图所示。

效果图

页面组成

这里我们简单分析下页面的构成,实际上非常的简单,主要包含以下三个元素。

  1. 表示外层容器的div元素

  2. 上面是一个span元素

  3. 下面是一个ul元素,每个li表示一个列表项

在整个下拉列表中,主要有两个动画。

  1. 下拉菜单旁边的小三角图标,在鼠标悬浮和离开时动态变换

  2. 下方的列表,在鼠标悬浮和离开上面的span元素时,列表会有动画显示和消失的效果。

代码构成

下面我们来看看整个页面的代码构成。

  • HTML

首先是页面的HTML代码,正如上一部分所讲,页面主要为一个外层容器div,内部是一个span和ul元素,每个列表项li内包含一个a元素,所有HTML部分代码如下所示。

HTML代码

  • CSS

CSS部分的代码才是整个实现效果的核心,我们具体来分析。

首先是页面的全局基本配置样式。

全局配置

然后是外层容器的样式。

外层容器样式

然后是span元素的样式,旁边的上三角形通过伪元素::after来实现,在::after伪元素中通过border-color属性来控制三角形的朝向,然后通过transition属性设置变换样式。

span元素以及上三角形

当鼠标停留在span元素上时,span元素背景色会改变,上三角会变成下三角。

鼠标停留后span的样式

紧接着是下面的ul以及li元素的样式,都是一些很普通的属性。

ul与li样式

然后是li下的a元素的样式。

li下a元素样式

然后是css中最核心的地方,ul的动画效果,通过translate3d属性改变ul所处的位置,再以transform属性添加动画效果。

ul初始状态

至此,所有代码讲解完毕,如果运行成功后,会得到文章开始时的下拉列表效果。

结束语

本篇文章主要给大家介绍了如何使用CSS编写一个带动画的下拉列表效果,你学会了吗?

有下拉列表的表单

题目只能有30个字,不能写全,其实今天我们要学习的内容有三个,第一,下拉列表表单,第二,多行文字输入表单,第三,数据集表单。

开始学习吧!

前天和昨天我们在《HTML表单元素初识1——零基础自学网页制作》和《HTML表单元素初识2——零基础自学网页制作》中基本上把<input/>标签的type属性里不同的值进行了讲解与实践,今天我们来学习其他包含在<form></form>之间的元素。

带有下拉列表的表单

我们在一些网站填写注册信息时,经常会遇到选择"生活所在地"的操作,因为中国的地名是固定的,因此页面会为我们提供一个下拉列表选项,我们直接点选即可,就不需要输入文字了,这样操作的好处在于不会出现拼写错误。例如:

写这个功能我们需要介绍一组新标签<select></select>。"select"(选择)。在这个标签中再添加<option></option>。"option"(选项)。这样就可以写出带有下拉列表的表单了,示例代码如下:

<select><option></option></select>

这段代码我们继续在昨天的"表单.html"文件中添加即可,在<input type = "image" src = "img/示例图片/submit.jpg"/><br>这段代码之前即可!与这个图片提交按钮共用一个<form></form>标签!

下面我们为多选表单添加名称,示例代码如下:

请选择省份<select><option></option></select>

下面我们添加不同选项,示例代码如下:

请选择省份
  <select >
  <option >河北</option>
  <option >山东</option>
  <option >河南</option>
  <option >海南</option>
  <option >江苏</option>
  <option >安徽</option>
  </select>
  <br><br>

为了规范起见,我们为表单信息添加name和value属性,示例代码如下:

请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan">河南</option>
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江苏</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br>

大家要注意的是,在下拉列表表单中,name写在<select>中,value写在<option>中。

页面效果如下:

这里告诉大家一个规律,下拉列表表单默认显示第一个<option></option>中的文字内容。

如果您想改变这个默认显示,请在需要显示的<option>中添加selected属性,并赋值为"selected"。

示例代码如下:

请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan" selected="selected">河南</option>
 <!--选中这个选项--><option value="Hainan">海南</option><option value="Jiangsu">江苏</option><option value="Anhui">安徽</option></select><br><br>

页面效果如图:

多行文字输入表单

我们在西瓜视频上发布视频时会被要求填写视频描述,页面中的输入框不是像下图这么短的单行输入框。

而是多行输入框,如图:

使用<textarea></textarea>标签即可添加这样的输入框,不过要设置row(列)和cols(行)属性的数值。示例代码如下:

<br>请简要描述您的剧本的情节<br><textarea row="3" cols="20"></textarea><br>

这段代码添加到</select><br><br>之后,与其共同使用一个<form></form>标签。

下面我们为这个多行输入框添加一些提示和限制。

首先,添加提示文字,和type="text"的<input/>标签一样,都是使用placeholder属性。

第二,我们限制一下字数,使用maxlength(最大长度)属性。

第三,在页面加载完成后,直接让光标停留在输入框中,使用autofocus属性。

下面看看如何写吧,示例代码如下:(不要忘记写好name属性!)

<br>
请简要描述您的剧本的情节<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多输入80字"maxlength="80"autofocus></textarea><br>

页面效果如图:

如果刷新页面不能正确显示,请尝试关闭后重新打开!

数据集表单

数据集表单实际上就是一个将不同选项或信息打包上传的设置。

当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。(W3school)

这个数据集有三个部分组成,首先是<fliedset></fliedset>,这个标签不会显示,只是告诉浏览器这里的数据要打包。

第二是<legend></legend>,"legend"(说明),这里添加数据集名称。

第三就是我们之前学到的那些标签了。

示例代码如下:

<fliedset> <legend>信息打包</legend> </fliedset>

下面我们使用这段代码把form2打包一下吧。示例代码如下:

<form>
  <fieldset><!--开始-->
  <legend>信息打包</legend><br>
  <!--标题-->兴趣爱好:<br>
  <input type = "checkbox" name = "hobby" value = "reading"/>读书
  <input type = "checkbox" name = "hobby" value = "film"/>电影
  <input type = "checkbox" name = "hobby" value = "painting"/>绘画
  <input type = "checkbox" name = "hobby" value = "music"/>音乐
  <br>
  最高学历:<br>
  <input type = "radio" name = "education" value = "highSchool"/>高中
  <input type = "radio" name = "education" value = "bachelor"/>本科
  <input type = "radio" name = "education" value = "master"/>硕士
  <input type = "radio" name = "education" value = "doctor"/>博士
  <br>
  请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan" selected="selected">河南</option><!--选中这个选项-->
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江苏</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br><br>
  请简要描述您的剧本的情节<br>
  <textarea row="3" cols="20" name ="storyOutLine"placeholder="最多输入80字"maxlength="80"autofocus></textarea>
  <br>
  </fieldset><!--结尾-->
  <input type = "image" src = "img/示例图片/submit.jpg"/><br>
  <input type="reset" /><br>
  <input type = "submit" value = "submit"/>
  </form>

页面效果如下:

今天的内容结束了!

如果您喜欢我的教程请关注我,点赞也能让我充满动力!

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

第一个HTML页面如何写?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

见的用户界面元素之一是下拉列表(Dropdown List),提供一组可选项供用户选择。该元素通常显示为展开的列表形式,用户可以通过单击或选择列表中的选项。对于下拉列表的选项,一般由系统代码组成,因此通常无法对其进行维护,但有时会需要动态更新下拉列表的选项值。本文将介绍如何通过输入框实现下拉列表选项值的动态更新。

下拉列表(Dropdown List)是一种常见的用户界面元素,用于提供一组选项供用户选择。它通常以一个展开的列表形式出现,用户可以点击或选择列表中的一个选项。

一般来说,他的选项值是由系统代码组成的,所以一般是不能维护里面的选项值,但是经常会出现需要动态维护下拉列表的选项这种需求。所以今天就教大家如何通过输入框动态维护下拉列表里面的选项值。

一、效果展示

  1. 在输入框里新增或者修改选项,维护后下拉列表选项和输入框里的一致
  2. 选项可以手动修改,也可以批量复制到输入框

二、制作教程

1. 下拉列表的原理

我们如果用axure自带的下拉列表,他只能在编辑界面修改下拉列表的值,没有办法在演示界面修改。但是如果我们知道下拉列表的原型,就可以通过修改代码的方式,实现在演示界面动态维护下拉列表的效果

我们知道axure演示是通过浏览器来实现的,归根到底就是html、js、css代码,这个在以前的js调用的文章里也有详细讲解,所以我们可以通过代码调用,调用下拉列表,那下拉列表的html代码其实就是:

<select>

<option value=”值”>选项1</option>

<option value=”值”>选项2</option>

<option value=”值”>选项3</option>

<option value=”值”>选项4</option>

</select>

可以看到其实他的选项值就是 <option value=”值”>选项1</option>,所以我们要对输入框里的文本值做变换,变换成上面的格式,然后在修改代码,这样就可以替换下拉列表里的选项值了。

2. 文本框里文本的处理

那我们怎样对文本框里的值进行处理呢?如果可以有特殊标记的话,例如用每个选项用包围,这样我们用replace函数就可以实现了, 将【的值替换成<option value=”值”>,将】的值替换成</option>,但是这种方式会限制了用户输入,必须【选项】这种格式来输入,这样就很不方便了。

所以我们就要比较麻烦对函数就行分割了,首先我们要准备几个文本,用来记录和处理文本,我们可以用slice函数,slice函数可以去指定段落的文本出来,例如取前三位就把选项1取出来了,这样我们把选项1组成新的文本,加上以前一后,就变成 <option value=”值”>选项1</option>,然后继续取选项2,直到输入框里的值都取完。

但是这里还有一个问题,用户输入每个选项的长度值是未知的,我们怎样去确定要取多少位呢?这里我们可以用第二个函数indexOf来确认,这个函数可以找出指定内容第一次出现的位置,那我们只需要寻找换行的位置,提取换行之前的内容,再将文本以前一后添加,这样就可以将字符转为对应的格式。

那我们只需要写个循环,先提取第一行的选项1,将格式转为 <option value=”值”>选项1</option>,然后在去第二行的选项2,将格式转为<option value=”值”>选项2</option>,在通过设置文本,将他和前面记录的<option value=”值”>选项1</option>合在一起,这里用在target.text后面增加新提取合并的文本即可。

上面是存在换行的条件,如果已经是最后一行,就没有换,那我们就判断输入框是否为空,那如果不为空,最后一个选项就是输入框里的文本你,我们直接将他提取合并即可。

那如果值为空,我们就提取完成结束循环,结束循环我们用设置文本的交互,将提取完成的选项值设置到通过设置文本,设置到<select></select>里面,然后触发js重新调用输入框就可以了。

到这里我们基本级完成了,如果需要调整下拉列表的尺寸,我们也可以通过width和height字段修改,例如宽200高30的输入框,我们就可以写成这样<select style=”width: 200px; height: 30px;” >。

这样我们就制作完成了通过文本框维护下拉列表选项的原型模板了,下次使用时,只需要复制粘贴,修改输入框里的选项文字,即可自动实现动态维护下拉列表选项的效果了,是不是很方便呢?当然,后续你们也可以根据需要,增加一些效果,例如把输入框放在弹窗里,通过按钮显示弹窗,再修改下拉列表的值。

那以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。

本文由 @AI产品人 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。