For a menu item, when we tab onto it, we want this element get 'focus' event, so that the submenu will show up. In the post,  we will see how to achieve it by using JS+css, we will also see how to use 'nextElementSibling' to only focus the elemnt has…

The opposite component is the other component affected in a focus event. Specifically, in a focus-lost event, the opposite component is the one gaining the focus. In a focus-gain event, the opposite component is the one losing the focus. Sometimes th…

参考资料: HTML5的服务器(server-sent event)发送事件有什么应用场景? W3school HTML 5 服务器发送事件 『后台消息推送功能』,前端除了轮询.scoket.第三方服务(如wilddog)外,暂时没好方案.刚刚还真发现个新的了:HTML5的服务器 EventSource (server-sent event)发送事件 总体体验就是简化版的socket.并不能代替 socket ,适应场景是客户端只需要监听,不需要发送消息给服务端的情况. 目前还有一个问题:从效果…

HTML5 aria-* and role 在video-js的demo中看到了很多aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet Application. Accessible一般是为不方便的人士提供的功能,比如windows的放大镜,语音朗读,高对比度主题等. google到了一个youtube的视频,讲解的很清楚,有代码有示例.估计是Google Developer Day 2011的分享演讲.真是个有责任感人性化的公司啊…

HTML5 aria-* and role 在bootstrap中看到role和aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet Application. Accessible一般是为不方便的人士提供的功能,比如windows的放大镜,语音朗读,高对比度主题等. HTML5针对html tag增加的属性:role 和 aria-*. role的作用是描述一个非标准的tag的实际作用.比如用div做button,那么设置div 的…

HTML5已经越来越流行起来了.尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用.方便大家学习,也将应用的源代码整理了一下发给大家. 1.纯CSS3实现打火机火焰动画 这又是一款非常酷的纯CSS3动画特效,它是一个能够点燃的打火机,当你用鼠标滑过这仅仅打火机时,打火机就会打开,然后開始出现火焰燃烧的动画特效.另外要说明的是,整个动画都是利用纯CSS3实现的.没有一行JS代码,小伙伴们.这个CSS3动…

知识要点 HTML5 (drag&drop) API  (Event) 拖放数据(对象):DataTransfer 拖放内容:setData getData 拖放效果(动作):dropEffect.effectAllowd 拖放图像:setDargImage 学习目标 掌握html5原声拖放(drag& drop)API 与 拖放事件 了解拖放流程 学会解决拖放种的兼容 前置要求 原生dom操作 原生事件 默认行为(阻止默认行为) 事件冒泡(阻止事件冒泡) 什么是Drag与Drop? Dr…

转自:http://www.cnblogs.com/think/archive/2011/10/06/CEF-Introduce.html 简介 Chromium Embedded Framework (CEF)是由 Marshall Greenblatt 在2008年创办的开源项目,致力于基于Google Chromium项目开发一个Web控件. CEF目前已支持多种编程语言和操作系统,能方便地集成到现有或者新的应用程序中,设计上,它追求高性能的同时,也追求易于使用,它的基本框架通过原生库提供…

L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. 使用 example // initialize the map on the "map" div with a given center and zoom var map = L.map('map', { center: [51.505, -0.09], zoom: 13 }); 构造器 构造器 使用 描述 L.Map( <HTMLElement|String> id, <Map options…

在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找了很多类似的插件,主要有下面种: 第一个组件是写bootstrap table的主人公wenzhixin封装的一个组件——multiple-select.这个组件风格简单.文档全.功能强大.但是觉得它选中的效果不太好.关于它的效果展示,我们放在后面.还是给出对应的文档API. Multiple-Se…