首页»JavaScript»这些地方你不必使用 JavaScript

这些地方你不必使用 JavaScript

来源:Web武松娱乐 发布时间:2016-06-08 阅读次数:
  在前端开发的时候,我经常会使用 CSS 来代替 JavaScript 做一些交互。下面是我仅仅用几行 CSS 创建的一些组件。

 1. Tooltips

  Tooltips 对于展示一些信息非常有用。目前有很多 JavaScript 插件实现了这个功能,但是如果你不想使网站更加的笨重,可以使用 CSS 来实现它。   我们可以使用伪元素来展示信息,并在 :hover 时显示它(你可以使用 HTML 的 title 属性来实现完成的解决方案)。   HTML <span class="tooltip-toggle" data-tooltip="Sample text for your tooltip!"> Label for your tooltip </span>   CSS .tooltip-toggle { cursor: pointer; position: relative; } .tooltip-toggle svg { height: 18px; width: 18px; padding-right: 0.5rem; } .tooltip-toggle::before { position: absolute; top: -80px; left: -80px; background-color: #2B222A; border-radius: 5px; color: #fff; content: attr(data-tooltip); padding: 1rem; text-transform: none; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; width: 160px; } .tooltip-toggle::after { position: absolute; top: -12px; left: 9px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #2B222A; content: " "; font-size: 0; line-height: 0; margin-left: -5px; width: 0; } .tooltip-toggle::before, .tooltip-toggle::after { color: #efefef; font-family: monospace; font-size: 16px; opacity: 0; pointer-events: none; text-align: center; } .tooltip-toggle:hover::before, .tooltip-toggle:hover::after { opacity: 1; -webkit-transition: all 0.75s ease; transition: all 0.75s ease; }   DEMO:https://codepen.io/cristina-silva/pen/XXOpga

 2. 下拉菜单

  如果你想实现一个简单的下拉菜单,你可以通过 CSS 的 :hover 简单的触发菜单的隐藏。   HTML <div class="nav-container"> <ul class="nav-items"> <!-- Navigation --> <li class="nav-item"><a href="http://yourbusinessenterprise.com/quot;#">Home</a></li>" <li class="nav-item"><a href="http://yourbusinessenterprise.com/quot;#">About</a></li>" <li class="nav-item"><a href="http://yourbusinessenterprise.com/quot;#">Contact</a></li>" <!-- Dropdown menu --> <li class="nav-item nav-item-dropdown"> <a class="dropdown-trigger" href="http://yourbusinessenterprise.com/quot;#">Settings</a>" <ul class="dropdown-menu"> <li class="dropdown-menu-item"> <a href="http://yourbusinessenterprise.com/quot;#">Dropdow" Item 1</a> </li> <li class="dropdown-menu-item"> <a href="http://yourbusinessenterprise.com/quot;#">Dropdow" Item 2</a> </li> <li class="dropdown-menu-item"> <a href="http://yourbusinessenterprise.com/quot;#">Dropdow" Item 3</a> </li> </ul> </li> </ul> </div>   CSS .nav-container { background-color: #fff; border-radius: 4px; box-shadow: 0 1px 2px 0 rgba(153, 153, 153, 0.35); padding: 1em; border: 1px solid #eee; display: block; max-width: 400px; margin: 0 auto; text-align: center; } ul, li { list-style: none; -webkit-padding-start: 0; } a { text-decoration: none; color: #ED3E44; } .nav-item { padding: 1em; display: inline; } .nav-item-dropdown { position: relative; } .nav-item-dropdown:hover > .dropdown-menu { display: block; opacity: 1; } .dropdown-trigger { position: relative; } .dropdown-trigger:focus + .dropdown-menu { display: block; opacity: 1; } .dropdown-trigger::after { content: "›"; position: absolute; color: #ED3E44; font-size: 24px; font-weight: bold; -webkit-transform: rotate(90deg); transform: rotate(90deg); top: -5px; right: -15px; } .dropdown-menu { background-color: #ED3E44; display: inline-block; text-align: right; position: absolute; top: 2.5rem; right: -10px; display: none; opacity: 0; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; width: 160px; } .dropdown-menu a { color: #fff; } .dropdown-menu-item { cursor: pointer; padding: 1em; text-align: center; } .dropdown-menu-item:hover { background-color: #eb272d; }   DEMO:https://codepen.io/cristina-silva/pen/NNOodj/

 3. 可见性切换

  转向 JavaScript 最常见的是切换元素的可见性,我最近才知道可以使用 CSS 的伪类 :checked 来实现。   HTML <div class="toggle"> <!-- Checkbox toggle --> <input type="checkbox" value="selected" id="beethoven-joke" class="toggle-input"> <label for="beethoven-joke" class="toggle-label">What was Beethoven's favorite fruit?</label> <!-- Content to toggle --> <div role="toggle" class="toggle-content"> BA-NA-NA-NA! </div> </div>   CSS .toggle { margin: 0 auto; max-width: 400px; } .toggle-label { font-size: 16px; background: #fff; padding: 1em; cursor: pointer; display: block; margin: 0 auto 1em; box-shadow: 0 1px 2px 0 rgba(153, 153, 153, 0.35); border-radius: 4px; } .toggle-label:after { color: #ED3E44; content: "+"; float: right; font-weight: bold; } .toggle-content { color: #B0B3C2; font-family: monospace; font-size: 16px; margin-bottom: 1.5em; padding: 1em; } .toggle-input { display: none; } .toggle-input:not(checked) ~ .toggle-content { display: none; } .toggle-input:checked ~ .toggle-content { display: block; } .toggle-input:checked ~ .toggle-label:after { content: "-"; }   DEMO:http://codepen.io/cristina-silva/pen/pyXQrj?editors=1100

 最后

  总之,在你的项目中使用 CSS 代替 JavaScript 有以下好处:
  1. 轻量级,不需要安装插件或者添加一个 .js 文件
  2. 清楚的展示样式和转换发生了什么
  3. 使一切变得更加简单,搭建更快
  英文原文:robots.thoughtbot.com
QQ群: WEB武松娱乐官方总群(83010142) 加群密码:关注下方微信公众号,发送消息 mm 获取
提示:更多精彩内容关注微信公众号:全栈武松娱乐中心(fsder-com)
网友评论(共0条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心
武松娱乐官网