使用HTML和CSS编写无JavaScript的Todo应用

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载

用css实现一个todo应用程序,但不是TodoMVC那样的设计,它不使用JavaScript,而是所有的交互都是由CSS驱动的。

他是怎样实现的?简单来说:它使用预渲染HTML,CSS兄弟组合器(~),CSS计数器和:checked,:target和所需的伪选择器的组合。 这篇文章的其余部分将会更详细的介绍。

具有的功能:

  • 添加todo item(可达50条)
  • 标记已完成的item
  • 删除item
  • 筛选已完成的item和未完成的item
  • 显示未完成的items数量
  • 不允许添加空的item

并不具有的功能:

  • 页面重载后并没有数据持久性
  • 不能一次性标记所有item为已完成
  • 不通通过按Enter键来创建项目

通过:checked的伪类来实现显示和隐藏内容

为了实现应用程序可交互,我们需要一些方法来存储和修改状态,然后在CSS中做出反应。 但通常情况下,该状态将保存在HTML中,但是没有JavaScript,我们无法修改DOM结构。

为了解决这个问题,我们可以使用复选框表单字段来存储状态,然后使用:checked 伪类选择器访问该状态。

Toggle content: <input type="checkbox"></input>
<div id="content">
  Hello world!
</div>

<style>
  #content {
    display: none;
  }
  input:checked ~ #content {
    display: block;
  }
</style>

以上代码也使用了CSS通用兄弟选择器:~。 它匹配我们检查输入的所有以下兄弟姐妹 - 在这种情况下,我们要显示或隐藏的div。这也意味着CSS可以用于控制所有的item显隐状态。

我们知道HTML标签label的属性,允许我们定位和切换与复选框本身无关的按钮。再来看一段代码:

<input type="checkbox" id="toggle-box"></input>
<label for="toggle-box">Toggle!</label>
<div id="content">
  Hello world!
</div>

更大范围地实现显示或隐藏功能

现在我们有办法存储状态了,每个待办事项都有三个复选框来存储状态:

  • 该item是否被创建
  • 该item是否被标记已完成
  • 该item是否被删除

可能会给你一个线索如何应用程序将工作。 没有JavaScript,我们无法修改DOM。 这意味着所有的todo item都必须是初始页HTML的一部分。 如果您查看页面的源码,您会发现它已经包含50个预渲染的待办事项。

.todo#todo-1
    input.created-checkbox
    .todo#todo-2
        input.created-checkbox
        .todo#todo-3
            ...

以下是应用的部分html截图

个人待办事项如下所示:

我们来看看如何实现删除功能。 首先我们有一个复选框来存储删除的状态:

<input type="checkbox" class="deleted-checkbox" id="deleted-checkbox-3">

需要一个删除按钮

<label for="deleted-checkbox-3" class="deleted-checkbox-label">×</label>

If the checkbox is :checked we want to hide all parts of that item. But since each todo item contains all following todo items we have make sure to keep the next .todo visible. 如果该复选框是:checked,我们要隐藏该项目的所有部分。 但是由于每个待办事项包含其他的item,那我们还需要确保保持下一个.todo是可见的。

.deleted-checkbox:checked ~ :not(.todo) {
    display: none !important;
}

为了相对简单一些,复选框首先位于item的DOM中。因此,所有可见的UI可以通过~选择器来匹配。

根据完成状态来过滤item

TodoMVC可以让您选择只查看已完成或未完成的待办事项。我们也可以使用复选框来实现这一点,但是使用URL哈希更简洁些。

<a class="filter-active" href="#/active">Active</a>

When you click on the link the browser will scroll to the element with the id /active 当你点击该链接后,页面会滚动定位到id为/active的元素上。但更重要的是,此时该元素已经匹配了伪类:target

<div id="/completed" class="completed-filter">
    <!-- Todo items -->
</div>

我们可以匹配未完成的子项,并将其隐藏。

.completed-filter:target
    .created-checkbox:checked
    ~ .done-checkbox:not(:checked)
    ~ .todo-input {
    display: none !important;
}

所以,除了复选框,我们还可以在URL中存储和访问状态!

在顶部输入完毕时,在底部添加todos

将最后一个未完成的item目移动到列表的顶部,其位置为:absolute,并显示“添加”按钮。

计算未完成item条数

CSS有一个可爱的功能,称为计数器。我们可以通过他来计算出与CSS选择器匹配的item数量。我们可以用它来显示剩下几个todos。

body {
    counter-reset: items-left;
}
.created-checkbox:checked
    ~ .deleted-checkbox:not(:checked)
    ~ .done-checkbox:not(:checked)
    ~ .items-left-counter-helper {
    counter-increment: items-left;
}
#items-left:before {
    content: counter(items-left);
}

我们可以统计:

  • 被创建的item数量
  • 未被删除的item数量
  • 未完成的item数量

为什么我们是统计.items-left-counter-helper的数量,而不是计算.mark-undone-checkbox-label? 之前有尝试过,但是CSS计数器不计算被隐藏的元素,所以当筛选出已完成的item时(因为所有未完成的项目都不可见),会看到未完成的item总数量值为0。

防止用户创建空item

这里我们用到一个伪类选择器:required! HTML具有基本的表单验证功能。 例如,我们可以给一个文本输入框标记为必填:

<input required type="text" value="" class="todo-input">`

然后,我们可以使用CSS来检查该字段是否已被填写,是否是有效值:

input:not(:valid) ~ .created-checkbox-label {
    pointer-events: none;
}

使用pointer-events,我们可以禁用鼠标交互,例如单击或悬停。

最后

尽管这个应用远达到不完美,但对于CSS的伪类的灵活运用值得我们学习。

参考资料: http://www.mattzeunert.com/2017/10/30/javascript-free-todo-app.html#showing-and-hiding-content-with-the-checked-pseudo-selector 应用: http://www.mattzeunert.com/TodoCSS/#/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Petrichor的专栏

tkinter: 屏幕居中

441
来自专栏前端说吧

CSS-自定义高度的元素背景图如何自适应以及after伪类在ie下的处理

3118
来自专栏编程坑太多

RN组件库-别考虑了关注收藏吧

1874
来自专栏DeveWork

分享本站右侧 “类Metro风格侧边栏” 的实现方法

本站DeveWork.com 右侧边栏有个“类Metro风格侧边栏”的小工具,半年前的时候微软所带来的“Metro风格”(也叫Modern 风格、Windows...

2039
来自专栏从零开始学自动化测试

Selenium2+python自动化74-jquery定位

前言 元素定位可以说是学自动化的小伙伴遇到的一道门槛,学会了定位也就打通了任督二脉,前面分享过selenium的18般武艺,再加上五种js的定位大法。 这些还不...

2566
来自专栏施炯的IoT开发专栏

Docking and Anchoring Controls on Windows Mobile

    在正文之前,首先来讲讲Windows Mobile设备UI设计方面的感受。不同环境下,开发Windows Mobile设备应用程序时,界面设计的难易程度...

1745
来自专栏pangguoming

10款实用Android UI 开发框架

1. ActionBarSherlock ActionBarSherlock是一个独立的Android设计库,可以让Android 2.x的系统也能使用Acti...

3417
来自专栏coding for love

在线商城项目05-利用mock数据进行渲染和图片懒加载

既然我们已经能从mock服务器拿到mock数据,现在的任务就是用拿到的数据进行页面渲染,另外,由于页面的图片数据太多,为了提高性能,我们会使用图片懒加载。本篇我...

651
来自专栏前端黑板报

小程序--Canvas文字居中

注意红色划线的解释:对齐方式是以 X 的值为基点,然后在看看官网的 setTextAlign 最下面的图:

1352
来自专栏前端杂货铺

关于IE6的PNG图像透明使用AlphaImageLoader的缺点

PNG32的alpha透明效果在IE6下会出现bug,出现灰色背景。而目前的解决方案就是 IE提供的滤镜。需要注意的是滤镜并不是对原图片进行修改,而是对相应的h...

3548

扫码关注云+社区