Web前端

HTML属性tabindex_控制tab切换顺序&&让元素可获得焦点

在网页中可以使用 Tab 键在链接、输入框之间切换(Shift + Tab 是逆序切换),这在纯键盘操作、填写表格等场景下非常有用。tabindex 是 HTML 的一个全局属性,跟 Tab 键的这个行为密切相关,主要有两个用处:

  1. 使用 Tab 键时,设定可聚焦元素的切换顺序;
  2. 使元素可聚焦,例如 div 元素默认无法获得焦点,但设置 tabindex 属性后就可以。

本文主要内容如下:

  • 描述我在 tabindex 方面踩过的一个坑(无法触发 focus / onkeyup / onkeydown)
  • 介绍 focusable 元素、tabindex 属性的取值和效果
  • 介绍网页中使用 Tab 键切换存在的一些问题

继续阅读

为WordPress的继续阅读增加动画效果

wp-read-more-animate

若 WordPress 的文章里添加了 more 标签,则在列表页中会生成一个 “继续阅读” 的链接。“继续阅读”的链接为 post-link#more-id,就是一个锚点链接,因此点击后进入的内容页面会跳到内容的后续部分。

但这样的跳转略显突兀,如果能加一点滚动的动画效果就好多了。这个是可以做到的:判断链接后面是否带了 #more,有则使用 jQuery.animate() 来增加一个滚动效果。

继续阅读

解决Chrome/IE中图片底部多出几像素的问题

遇到了一个问题:网页中的img图片底部会比父层多出几像素,像是设置了padding-bottm/margin-bottom的效果(实际没有)。如下图所示,将父层背景设置为绿色,可以看到底部多出了几像素,Chrome/IE 8均是如此。

图片底部多出几像素图片底部多出几像素

代码如下,就是简单的DIV层中放了一张图片。

继续阅读

HTML5调用手机的Datepicker(日期选择器)

使用 HTML5 制作的手机 APP 如何调用手机系统的 Datepicker(日期选择器)?除了使用 phonegap/cordova 的 api 来调用之外,其实直接使用 HTML5 的 <input> 标签属性就可以实现了。如果想找一款适合移动端使用的 Datepicker,也可以查看 Github精选在 – 适合移动端的HTML5 Datepicker

HTML5中新的input类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证,包含了如下新的输入类型:

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

HTML5中的datepicker

HTML5 拥有多个可供选取日期和时间的新输入类型:

  • date – 选取日、月、年
  • month – 选取月、年
  • week – 选取周和年
  • time – 选取时间(小时和分钟)
  • datetime – 选取时间、日、月、年(UTC 时间)
  • datetime-local – 选取时间、日、月、年(本地时间)

继续阅读

Emmet语法速查表

Emmet可以快速的编写HTML代码,输入缩写,按tab即可生成相应代码。

嵌套操作

>: Child
+: Sibling
^: Climb-up
*: 乘法, 如 ul<li*5,将生成如下结果
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
(): 分组,如 (header>ul>li*2)+footer>p,结果如下
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>

属性操作

ID和Class,如div#header.class1.class2.class3, 结果如下:

<div id="footer" class="class1 class2 class3"></div>

也可以自定义属性,如td[title="hello" colspan=3],属性可以不用引号,结果如下:

<td title="Hello world!" colspan="3"></td>

序列

结合之前的嵌套操作和属性操作, 通过*$可以输出数字序列, 如ul>li.item$*3,结果如下:

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

通过@, 可以改变数字序列的顺序以及基数,如ul>li$@2-*3

<ul>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
</ul>

文字

{}: 通过大括号(curly braces)在元素中插入文字, 如a{Click me}:

<a href="">Click me</a>

注意 a{click}+b{here}a>{click}+b{here} 的区别:

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

其他

官方语法介绍:http://docs.emmet.io/

官方语法速查表:http://docs.emmet.io/cheat-sheet/