Day: May 4, 2015

CSS:去除点击链接和按钮时出现的虚线框

在前端制作的过程中会发现,一些文字/图片链接,或者一些input控件,在点击时会在周围出现虚线边框,一般会在火狐和IE浏览器下出现虚线框,谷歌下不会有。 这些虚线边框是作为对视觉设计的一种辅助,在不使用鼠标,而用键盘Tab键进行页面浏览时,会标示出当前所在的链接或控件的位置,便于浏览。这对那些视觉有障碍的人士来说更是必不可少的。 但是有些时候我们却不想使用它们,因为浏览器对虚线框的解析有差异,并且不规则,所以在视觉设计上反而成为了某种缺陷。所以这种时候,我们想要禁用这些虚线边框,使浏览者的视觉享受能够完美无瑕。 那么,如何去除这些点击时才会出现的虚线边框呢? 1. outline:none; 通常我们会这么写:a,input{outline:none;} 优点是代码简洁,使用一行css就能解决问题,但是也有缺点:ie6、ie7并不认识outline属性,需要配合仅ie6和ie7支持的css属性blr:expression_r(this.onFocus=this.blur());使用来达到兼容,expression 条件,这句话的意思是链接在获得焦点的同时失去焦点,但是blr不宜多用,会影响效率。 2. hidefocus=”true”; hidefocus是ie系列的专有属性,能够作用于所有ie序列的浏览器,需要配合css的outline:none。 也可以写作:hidefocus=”hidefocus”; 另外,hidefocus并不是W3C推荐的标准属性。 缺点是非全局控制,需要在每个需要去虚线边框的链接或input上加代码。 3. onfocus=”this.blur()”; 优点是比较通用。… Read More

Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板

Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现。Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页面,包括图表、表格、地图、消息中心、监控面板等后台管理项目所需的各种组件。     在线演示      源码下载 特别感谢 Chairo 分享的源码下载!… Read More

优秀的 jQuery 文本输入框自动完成 & 自动提示插件

文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作,是非常好的产品使用体验。这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件,帮助你在网站中轻松添加输入框的自动完成和自动提示功能。 在这篇文章中,我们使用 jQuery 实现智能输入框光标的位置。它不需要图像,是使用纯粹的 CSS3 实现的,而且实时、准确,这意味着你在添加或删除文本的时候它会自动适应。使用事件代理机制实现,所以不用担心性能问题。 下载源码    在线演示   主要参数介绍: serviceUrl:Ajax 请求的 URL; lookup:本地数据数组;… Read More

【特别推荐】Web 开发人员必备的经典 HTML5 教程

对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西。唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进。本文将分享能够帮助您快速掌握 HTML5 的实例教程,值得好好学习。 Measuring Page Load Speed with Navigation Timing Navigation Timing 是用于精确测量网站性能的 JavaScript API。该 API 提供一种简单的方式来获得准确,详细的时序统计,页面导航和负载事件。它可现在能够在Internet… Read More

推荐10款非常优秀的 HTML5 开发工具

HTML5 发展如火如荼,随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟,未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助你更高效的编写 HTML5 应用。 Initializr Initializr 是制作 HTML5 网站最好的入门辅助开发工具,你可以使用提供的特色模板快速生成网站,也可以自定义,Initializr 会为你生成代码简洁的可定制的网页模板。… Read More

九个让人难以置信的HTML5和JavaScript实验

Google的 Chrome实验室 收 集了很多让人难以置信的基于 HTML5 Canvas 和 JavaScript 的实验项目,里面的例子都很独特,让人惊叹。我从未想过结合 HTML 和 JavaScript 能实现这么强大的效果。今天,本文与大家分享其中9个很棒的例子,为了有更好的效果,建议在Chrome浏览器中浏览。 Untangle 拖动蓝点,让所有线都不相交,看看你多久能解开? 🙂   Z… Read More

网站项目必备——12款经典的白富美型 jQuery 图片轮播插件

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你。   Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本。 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果 ✓  … Read More

那些让人惊叹的的国外创意404错误页面设计

在网上冲浪的时候碰到404错误页面是非常令人沮丧的,随后的一两秒内如果没有什么吸引你的注意力的话,我敢肯定你会离开网站,再也不会回来。 因此,很多网站都会设计一个新颖的错误页面,以吸引用户继续浏览其它的内容。这里收集了45个非常有创意的404错误页面设计作品,一起欣赏:)   1. Batman 2. Godzilla 3. Oroza 4. Ferdaze 5. Suspended Animations 6. War Hammer 7. … Read More

60款很酷的 jQuery 幻灯片演示和下载

jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展示系列项目时非常好的方法。 今天这篇文章要给大家分享的是60款很酷的 jQuery 幻灯片插件,相信里面一定会有你喜欢的。 Cloud Carousel (演示 | 下载) ShineTime (演示 | 下载) Nivo Slider … Read More

【翻译】即学即用的Web前端优化技巧 ( Front-end optimizations you can start doing right now )

英文原文 http://odiseo.net/javascript/front-end-optimizations-you-can-do-right-now-on-your-existing-code 强烈建议各位Web前端开发人员都要“真正”去学习Javascript并且掌握基本的DOM知识。诚然我也不得不赞同,不少基于Javascript特性的小把戏和小技巧根本就不会带来终端用户能明显觉察到的性能提升。话虽如此,我会在这篇文章里分享一些优化技巧,你可以马上在代码里使用这些技巧从而让程序跑的更快。而且从今以后,每当在项目里使用Javascript的时候你都应该想到并实践这些优化。 精明的使用选择器 Use selectors wisely 假设程序里有一个id为#profile-container的div, 你想在其内部选择一个或多个class为myClass的input元素。你可能会很快写出下面这样一个jquery选择器: $('#profile-container input.myClass')   这句可以满足需求,但并不是最好的方法。事实上,$(‘#profile-container’).find(‘input.myClass’)会比上面那句更快。为什么呢?这需要了解下Jquery选择器机制。首先,$(‘#profile-container’)这个选择器可以很快的获得要选取的部分,这样当使用find()的时候,就会限制在一个很有限的查找范围,从而提升了性能。可以参开Jquery源码。 Rob Tarr的文章给出的一些测试结果可以印证这点,他还发现如果链式的使用find()逐层查找会更快,比如$(‘.container’).find(‘.main’).find(‘ul.list-1′).find(‘li’) seesparkbox.com给出的选择器测试比较的结果 另一种精明的使用选择器提高性能的办法就是明确的的声明需要查找的元素类型。比如,如果我们知道要选择的元素类型的话,$(‘ul.todo’)明显会比$(‘.todo’)快的多。 缓存jQuery选择器的结果… Read More

部分国行Android手机缺少谷歌GMS服务包导致HTML5 Geolocation无法定位的问题

最近项目上用到HTML5的geolocation用于定位,用Chrome和手头的手机测试好好的功能,到终端用户那里反馈一些手机不能定位,最 后确定出是部分三星、摩托的部分国行Android手机“阉割”了谷歌GMS服务包,导致HTML5的geolocation无法使用wifi和基站定位 服务导致。 值得一提的是前期在stackoverflow和google groups里搜到对症描述的解决方案(貌似Android 2.*或者三星自身的问题)全部失效,因为介是个“中国特色”的问题-_lll 首先介绍下HTML5的Geolocation功能。通常情况下,我们是先判断浏览器是否支持geolocation, 如果不支持,可以提示错误,或者进入其他逻辑处理流程,现在移动端的智能手机浏览器绝大部分都是支持的。 if( navigator.geolocation ){ navigator.geolocation.getCurrentPosition( updateLocation, handleLocationError, {maximumAge:60000, timeout:50000, enableHighAccuracy:true} );… Read More