不使用JavaScript创建常见UI元素功能

我们已经习惯于用JavaScript编写常见的UI元素功能(如手风琴、工具提示、文本截断等),但是随着HTML和CSS有了新的功能以及旧版浏览器不再受支持,我们越来越少使用JavaScript来创建UI元素,并将其更多地集中于代码的逻辑部分(验证,数据处理等)。

下面是一些不需要JavaScript就可以创建的UI元素示例。

响应文本截断

CSS文本截断实现起来非常简单,并且性能很高,因为我们不编辑文本的HTML内容,而仅编辑其渲染。 虽然,在旧版本的浏览器中很好地支持单行文本截断,但只有较新的浏览器才支持多行文本截断。

星级评定输入

星级评分是大多数评论形式和功能的必备要素。 使用CSS实现此功能的方法有很多:使用背景图片,JavaScript,icons等。实现此功能的最易用的方法是使用icons和本地 单选框。

这个实现的缺点是,输入的HTML radio inputs是相反的顺序(从5到1的评级值),因为我们需要选择所有启动项,直到选中的输入项为止,包括CSS不能选择的选中项。 这就是为什么我们颠倒顺序,从选中的输入中选择第一个输入的原因。

此实现非常灵活,可以轻松自定义。

工具提示/下拉菜单

这是一个非常灵活的元素,因为它的CSS逻辑可用于工具提示和下拉菜单,因为它们的工作方式相似,并且均支持悬停和单击(触摸)功能。

此实现中可以考虑的一个问题是,由于它的focus样式,工具提示(下拉列表)将在单击时保持打开状态,直到用户单击离开元素为止(元素使用焦点)。

模态(Modal)

这是一个有点笨拙的实现,完全依赖于URL的查询字符串。URL中的Id必须与我们需要打开的模式元素匹配。

浮动标签输入(Floating label input)

切换(Toggle )/ 手风琴(Accordion)

最近,HTML使用<details><summary>元素获得了原生的手风琴(toggle)元素,但是使用这些元素的缺点在于它们没有太多的样式选择,因此开发人员仍然继续使用自己的实现。 幸运的是,通过复选框或单选框输入逻辑,我们可以创建可切换的元素和手风琴,而无需依赖JavaScript。

使用这个实现的缺点是,它依赖于HTML input元素,并且其逻辑导致需要额外的HTML代码,但另一方面,这也导致了一个非常易于访问的元素。

结论

如你所见,这些仅限CSS的实现依赖于CSS选择器逻辑(如:focus:placeholder-shown)来替换JavaScript逻辑。 这些CSS解决方案中的一些可以被认为是粗糙的,但是它们是高性能的、灵活的,并且不依赖于JavaScript。

在项目中使用了其中一些CSS解决方案,可以避免添加任何额外的JavaScript,或者避免将JavaScript完全用于可视化表示。

当然,还有更多的纯CSS解决方案,但是我发现这些解决方案最有趣。如果您使用任何其他解决方案,请在评论中让我知道。

英文地址原文:https://dev.to/adrianbdesigns/you-can-create-these-elements-without-javascript-525a

为了保证的可读性,本文采用意译而非直译。

Image placeholder
前端答疑
未设置
  28人点赞

没有讨论,发表一下自己的看法吧

推荐文章
可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

HTML中行内元素与块级元素区别有什么?

HTML中行内元素与块级元素区别有什么?区别有:●行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的。●块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列。●行内元素不可

块级元素和行级元素

块级标签:divph1-h6ulol等,行内标签:aspan等行内块标签:imginputbutton等. ####行内块特点: 1.不独占一行 2.可以设置宽高

行内元素与块级元素

用途:页面布局 块级元素独占一行,行内元素在同一行。块级元素占用宽度100%,行内元素有内容决定。块级元素可以设置宽高,行内元素不行。 块级元素标签h1-h6pdiv行内元素标签:spanaemib

使用Jupyter NoteBook进行IB查询和交易,以及使用算法交易示例

在搞好IB盈透接口后,试了下客户端交易,但是最终目的还是使用程序化交易。发现vnpy已经提供的Script_engine来支持JupyterNoteBook交易的,而且非常方便调用。 这里就用写了基于

python使用jieba实现中文文档分词和去停用词

分词工具的选择:  现在对于中文分词,分词工具有很多种,比如说: jieba分词、thulac、SnowNLP等。在这篇文档中,笔者使用的jieba分词,并且基于python3环境,选择jieba分词

如何使用jQuery的插件?

如何使用jQuery的插件?例如:需要使用表单插件,按下列步骤就可实现插件的调用:(1)在页面中导入包含表单插件的JS文件,并确定它定位与主jQuery库后,其代码如下: (2)在JS文件或页面J

使用Jenkins一键打包部署SpringBoot应用,就是这么6!

SpringBoot实战电商项目mall(25k+star)地址:https://github.com/macrozheng/mall 摘要任何简单操作的背后,都有一套相当复杂的机制。本文将以Spri

7 个好用的 TypeScript 新功能

作者:RC翻译:疯狂的技术宅 原文:https://blog.bitsrc.io/7-new-... 未经允许严禁转载 TypeScript语言小组一直在以惊人的速度推出新功能。从最新的《Javasc

在react中怎么引用js

在react中怎么引用js推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入。第一种:使用插件react-load-script如果没有安装

怎么用js和css写一个幻灯片

怎么用js和css写一个幻灯片思路如下:1、创建一个div,用来包裹所有的图片,并设置定位方式为relative;2、所有的图片设置定位方式为absolute;距离顶部为0;3、并使用css属性tra

如何调用jquery?

如何调用jquery?调用jquery首先需要引入jquery文件,有两种方式引入,一种是本地引入,另一种是使用cdn引入。jquery是结构化的开源js文件,按照js文件引用方式使用。1、可以到jQ

有哪些常用jQuery UI框架?

jqueryUI框架1、国产jQueryUI框架(jUI)DWZDWZ富客户端框架(jQueryRIAframework),是中国人自己开发的基于jQuery实现的AjaxRIA开源框架.设计目标是简

小程序怎么用js修改css?

小程序怎么用js修改css?微信小程序和普通的前端开发有很多不同。前端开发中修改样式,js可以操作DOM,即document.getElementById(id).style.property=new

喊话 JavaScript 开发者:玩 DOM 也要专业范儿

别再害怕DOM了,让我们充分挖掘DOM的潜力,你会真的爱上它。 2008年,当我刚成为一名专业Web开发人员参加工作时,我了解一些HTML、CSS和PHP的知识。那时我也在学习JavaScript

JavaScript 的数据结构和算法

现在有个还不是好的项目,未来会成为好的项目的项目想介绍给大家。传送门https://github.com/MasterShu/JavaScript-Da...这个是本人在维护的一个项目。主要是使用Ja

JavaScript 安全知识: CORS 简明教程

概述浏览器会强制同源策略以禁止不同源的网站获得响应; 『同源策略』不会阻止对其他来源的请求,但是会禁用JavaScript对响应内容的读取。 -CORS标头允许访问跨域响应。 -CORS与凭证一起需要

一起来学 TypeScript

鉴于JavaScript社区正式更名为F2E前端,我就大胆的把我另外一个项目也放上来。😄这个项目是关于TypeScript,是个人记录TypeScript的学习历程以及各个常用库的TypeScript

5种用于前端开发的JavaScript替代方案

JavaScript虽然是很受欢迎的语言,但是并不适合所有人,那么有哪些替代方案呢?本文将分析5种JavaScript替代方案。1995年,Netscape(网景通信公司)聘请BrendanEich为

javascript如何判断是不是整数?

方式一、使用取余运算符判断任何整数都会被1整除,即余数是0。利用这个规则来判断是否是整数。functionisInteger(obj){ returnobj%1===0 } isInteger(3);

9 个顶级的JavaScript图表库

数据可视化技术在过去十年中一直在不断改进,现在许多高级图表库可供消费者使用。在2000年代初期,图表生成主要由服务器端图像位图构成。诸如Flash和Silverlight之类的插件提供了更具交互性的图

JavaScript闭包基础指南

闭包是函数创建时范围内所有变量的集合。要使用闭包,请在另一个称为嵌套函数的函数内创建一个函数。内部函数将有权访问外部函数范围中的变量(Closure有助于访问外部函数范围),即使在返回外部函数之后也是

先学php还是javascript?

javascript是前台的东西,PHP是后台的东西,两者先学谁都是一样的。两者之间没有啥实质性的必然联系。Javascript就是浏览器执行的脚本语言,控制页面内容。php就是服务器端执行的语言,读

深入了解JavaScript async/await !

Asyncfunctions让我们以async这个关键字开始。它可以被放置在任何函数前面,像下面这样:asyncfunctionf(){ return1; }在函数前面的「async」这个单词表达了一

JavaScript中对“this”的简单理解

1.this的奥秘很多时候,JS中的this对于咱们的初学者很容易产生困惑不解。this的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this表示类方法中当前对象的