一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

程序员都会的 35 个 jQuery 小技巧

收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 1 2 3 4 5 $(document).ready(function(){     $(document).bind("contextmenu",function(e){             return false;     }); }); 2. 隐藏搜索文本框文字 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Hide when clicked in the search field, the value.(example can be found below in the comment fields) $(document).ready(function() { $("input.text1").val("Enter your search text here");    textFill($('input.text1')); });      function textFill(input){ //input focus text function      var originalvalue = input.val();      input.focus( function(){                if( $.trim(input.val()) == originalvalue ){ input.val("); }      });      input.blur( function(){                if( $.trim(input.val()) == " ){ input.val(originalvalue); }      }); } 3. 在新窗口中打开链接 1 2 3 4 5 6 7 8 9 10 11 XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid. $(document).ready(function() {    //Example 1: Every link will open in a new window    $('a[href^="http://"]').attr("target", "_blank");     //Example 2: Links with the rel="external" attribute will only open in a new window    $('a[@rel$=’external']').click(function(){          this.target = "_blank";    }); });// how to use <a href="http://www.opensourcehunter.com" rel=external>open link</a> 4. 检测浏览器 注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量 1 2 3 4 5 6 7 8 9 10 11 12 […]

龙生   06 Nov 2015
View Details

css设置各种中文字体如雅黑、黑体、宋体、楷体等等

代码如下: .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 说明: 加上中文名“微软雅黑”是为了兼容opera。 MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中文有着不凡的效果。 在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名: Mac OS的一些: 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti 华文宋体:STSong 华文仿宋:STFangsong 儷黑 Pro:LiHei Pro Medium 儷宋 Pro:LiSong Pro Light 標楷體:BiauKai 蘋果儷中黑:Apple LiGothic Medium 蘋果儷細宋:Apple LiSung Light Windows的一些: 新細明體:PMingLiU 細明體:MingLiU 標楷體:DFKai-SB 黑体:SimHei 宋体:SimSun 新宋体:NSimSun 仿宋:FangSong 楷体:KaiTi 仿宋_GB2312:FangSong_GB2312 楷体_GB2312:KaiTi_GB2312 微軟正黑體:Microsoft JhengHei 微软雅黑体:Microsoft YaHei 装Office会生出来的一些: 隶书:LiSu 幼圆:YouYuan 华文细黑:STXihei 华文楷体:STKaiti 华文宋体:STSong 华文中宋:STZhongsong 华文仿宋:STFangsong 方正舒体:FZShuTi 方正姚体:FZYaoti 华文彩云:STCaiyun 华文琥珀:STHupo 华文隶书:STLiti 华文行楷:STXingkai 华文新魏:STXinwei 注:如果字体的名称是一个单词的,不需要加引号,否则在ie6,7里面会失效,并且后面的样式也会不生效! from:http://www.jb51.net/css/163448.html

龙生   03 Nov 2015
View Details

CSS3的REM设置字体大小

在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。真是进也难,退也难呀。 最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置Web页面的字体大小。让我一下子就来劲了,一口气看完并测试了一回,还真是爽歪歪的呀。师傅说好东西不能吃独食,于我就在这里给大家吹吹这个从没见过的REM。 在详细介绍rem之前,我们先一起来回顾一下我们常用的两种记量单位,也是备受争论的两个: PX为单位 EM为单位 PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。 em为单位 前面也说了,使用是“px”为单位是比较方便,而又一致,但在浏览器中放大或缩放浏览页面时会存在一个问题,要解决这个问题,我们可以使用“em”单位。Richard Rutter’在《How to size text using ems》一文中有做过详细的介绍,追至早一点,Richard Rutter也在《How to Size Text in CSS》中进行过深入的剖析。 这种技术需要一个参考点,一般都是以<body>的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”,这样一来,我们设置字体大小相当于“14px”时,只需要将其值设置为“1.4em”。

为什么“li”的“1.4em”是不是“14px”将是一个问号呢?如果你了解过“em”后,你会觉得这个问题是多问的。前面也简单的介绍过一回,在使用“em”作单位时,一定需要知道其父元素的设置,因为“em”就是一个相对值,而且是一个相对于父元素的值,其真正的计算公式是: 1 ÷ 父元素的font-size × 需要转换的像素值 = em值 这样的情况下“1.4em”可以是“14px”,也可以是“20px”,或者说是“24px”,总之是一个不确定值,那么解决这样的问题,要么你知道其父元素的值,要么呢在任何子元素中都使用“1em”。这样一来可能又不是我们所需要的方法。 这里我只是简单的介绍了一个这两个单位的使用,具体一点的大家可以参阅: Best Practices的站长Kyle的《CSS Font-Size: em vs. px vs. pt vs. percent》 Converting px into percentage and em for relative CSS font sizes Em Vs Percent Widths CSS: Units of Measurement Jennifer Kyrnin的Using Points, Pixels, Ems, or Percentages for CSS Fonts Rem为单位 CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。 […]

龙生   11 Oct 2015
View Details

移动开发规范概述

以下规范建议,均是Alloyteam在日常开发过程中总结提炼出的经验,规范具备较好的项目实践,强烈推荐使用 字体设置 使用无衬线字体

  iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明,华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878), 但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁

  原生Android下中文字体与英文字体都选择默认的无衬线字体

  基础交互 设置全局的CSS样式,避免图中的长按弹出菜单与选中文本的行为

  移动性能 要考虑Android低端机与2G网络场景下性能 注意! 发布前必要检查项 所有图片必须有进行过压缩 考虑适度的有损压缩,如转化为80%质量的jpg图片 考虑把大图切成多张小图,常见在banner图过大的场景 加载性能优化, 达到打开足够快 数据离线化,考虑将数据缓存在 localStorage 初始请求资源数 < 4 注意! 图片使用CSS Sprites 或 DataURI 外链 CSS 中避免 @import 引入 考虑内嵌小型的静态资源内容 初始请求资源gzip后总体积 < 50kb 静态资源(HTML/CSS/JS/Image)是否优化压缩? 避免打包大型类库 确保接入层已开启Gzip压缩(考虑提升Gzip级别,使用CPU开销换取加载时间) 注意! 尽量使用CSS3代替图片 初始首屏之外的静态资源(JS/CSS)延迟加载 注意! 初始首屏之外的图片资源按需加载(判断可视区域) 注意! 单页面应用(SPA)考虑延迟加载非首屏业务模块 开启Keep-Alive链路复用 运行性能优化, 达到操作足够流畅 避免 iOS 300+ms 点击延时问题 注意! 缓存 DOM 选择与计算 避免触发页面重绘的操作 Debounce连续触发的事件(scroll / resize / touchmove等),避免高频繁触发执行 注意! 尽可能使用事件代理,避免批量绑定事件 使用CSS3动画代替JS动画 避免在低端机上使用大量CSS3渐变阴影效果,可考虑降级效果来提升流畅度 HTML结构层级保持足够简单 尽能少的使用CSS高级选择器与通配选择器 Keep it simple […]

龙生   30 Sep 2015
View Details

[转]阻止浏览器记住密码功能干扰表单填充

这里先不说废话,我知道有4种方法,具体可以详细去试试看,针对不同的浏览器有不同的方法: 1.把input type=”password” 改成 input type=”text” 并在后面加上 onfocus=”this.type=’password’”, 2.在文档加载完成后将密码输入框设置为空: window.load = function(){ document.getElementById('密码域ID').value="; }; 3.在用户名和密码之间加上一个隐藏的文本框: <input type="text" name="name"> <input type="hidden">   <input type="password" name="pass"> 4.使用html5的属性: <pre name="code" class="html"><input type="text" name="name" autocomplete="off"> <input type="password" name="pass" autocomplete="off"> from:http://blog.csdn.net/playboyanta123/article/details/43795643

 

龙生   28 Jul 2015
View Details

2015 年最棒的 5 个 HTML5 框架

大多数的 web 开发者一直在用关键点来寻找动态的框架,这样能简化他们的设计和开发工作。

HTML5 框架在所有的 web 浏览器和手机应用上都展现了优秀的性能。它不仅简化了 HTML5 开发中 CSS 开发的沉重负担,还提高了网站的可见性。主要的原因是 HTML5 提供了独有的特征,例如特殊的架构标签,动画,浏览器支持等。

最近,大量的 HTML5 框架在行业内可免费获得,这使得 HTML5 开发者们不知道到底哪一个框架才是最好的。为了避免上述问题,本文在下面会列出 2015 年最流行的 5 个框架,让我们一起以一个简单的方式来开始讨论吧。

如果你是 web 设计者并准备用 HTML5 进行设计工作,现在是时候开始阅读了。

Ionic

http://designlooper.com/wp-content/uploads/2015/05/210.png

Ionic 是一个神奇的框架和强大前端开源系统,使用先进的 web 技术比如 CSS、HTML 和 JS 来创建令人惊叹的手机应用。它已经定制了在所有手机设备上的快速操作,并且确保简单的功能和大量的手机组件。

您可以通过一个命令创建来测试和使用基于任何平台上的 ionic 应用。此外,该框架为它自己的组件提供了一套 Angular 指令(自定义的 HTML 元素),从而使它可以简单的编写一行 HTML 代码。类似指令,它使用视图动画逻辑,异步通信,Angular 的触摸识别和 HTML 清洁处理。

Siimpler 

http://designlooper.com/wp-content/uploads/2015/05/310.png

Siimpler 是一个简单的 HTML 开发框架,他可以通过选择你自己喜欢的部分,来帮助你快速又简单的创建 HTML5 开发结构。根据你的项目需求,你可运用 Siimpler 开发你自己熟悉的前端结构。网络设计者们也可以通过使用 Siimpler 框架类的文件和文件夹来无缝的开始一个 web 项目。

Foundation

http://designlooper.com/wp-content/uploads/2015/05/41.png

Foundation 是世界上最精妙的前端响应框架,同时,它可以兼容所有的浏览器和网络设备。Foundation 拥有移动友好型的用户接口,并且获得了许多的原件来帮助你快速又完美的建立一个响应站点。Foundation 设置了许多关键的特性,例如 HTML,CSS UI 原件,模板,小代码块,含有按钮,表单,字体,导航等功能的响应组件。

LimeJS

针对于所有的最新的桌面浏览器和触屏设备,LimeJS 对于有用户经验的游戏开发者而言是最好的和最强大的开发框架。LimeJS 对于在线游戏开发而言能够带来更好的功能和更快的开发过程,而且适合所有的浏览器和触屏设备。

Enyo

Enyo 是一个开源的 JavaScript 框架,该框架能够让你创建顶级的 HTML5 应用程序,该应用程序能够运行在各种各样的电子设备上,比如说手机,台式机,笔记本,电视,以及 web 应用。对于很多流行的手机公司开发的重要应用都是采用该框架实现的。

最后:

这篇文章谈论的是对于一个 HTML 开发公司的独特的功能,操作,需求,以及 HTML5 框架的最好的表现。

from:http://www.oschina.net/translate/top-html5-frameworks-in-2015

JavaScript超轻量级框架——Nuclear

Nuclear 是腾讯 AlloyTeam 团队开发的一款形似 React 的超轻量级框架(大小16k,gzip后6k)。 纯粹的javascript Nuclear不需要jsx,你只需要使用纯粹的javascript就可以使用面向对象的方式去编写各式各样的组件。Nuclear的目标是让布局、样式、数据、事件、行为完全独立,让程序更加易维护、可扩展。 HTML+CSS Nuclear没有虚拟Dom的概念,完整支持HTML和CSS所有功能,你完全可以使用HTML+CSS进行页面布局排版,放心使用HTML5和CSS3大量的酷炫特性吧! observejs Nuclear使用observejs进行数据变更监听通知视图全部刷新或者局部刷新,以空间换取时间的方式提高应用程序的性能。 简单的示例

Nuclear通过Nuclear.create方法创建结构型组件和非结构型组件,这个例子就是结构型组件。 创建结构型必须包含render()方法,该方法返回渲染的模板,Nuclear使用mustache.js作为模板渲染引擎,创建组件new HelloMessage的第一个参数是组件的容器,第二个参数就是提供给模板引擎的数据,并且可以任何方法都可通过this.option访问该数据。 感谢: observe.js react.js mustache.js class.js   首页:http://alloyteam.github.io/Nuclear/

龙生   09 Jun 2015
View Details

20 款超棒免费的 Bootstrap 管理和前端模板

1. SB Admin 2 Details & Download 2. Admin Lite Details & Download 3. Director Responsive Admin Template Free Details & Download 4. Free Bootstrap Admin Template Dream Details & Download 5. Dashgum – Free Dashboard Details & Download 6. Free Responsive Admin Template – Zontal Admin Details & Download 7. Free Download Bootstrap Admin Template Details & Download 8. Janux – Free Responsive Admin Dashboard Template Details & Download 9. Joli – Free Responsive Bootstrap Admin Dashboard Template Details & Download 10. KAdmin – Free Responsive Admin […]

龙生   18 May 2015
View Details

10 款免费的 jQuery 图像缩放插件

设计电子商务网站必知的十款免费  jQuery 图像缩放插件 Jquery 图像缩放插件不仅简单易用,而且还能够给予用户更好的体验。你只需要在图像或产品上移动鼠标,你将看到图片或产品的详细信息。 今 天,我们来分享一些 jQuery 图像缩放插件。事实上,图像缩放是很多在线购物网站最基本的组成部分。如果你是开发人员,你想在网站中使用图像缩放功能的话,推荐你使用下面十款  jquery 图像缩放插件。你可以根据需要,选择任意你想要的图像缩放插件,而且还免费哦。 EasyZoom Demo | Download EasyZoom 是一个 jQuery 图像缩放和平移插件。它支持触摸屏设备,且能用 CSS 来设计你想要的效果。 zoom.js Demo | Download zoom.js 是一款灵巧的 jQuery 图像缩放插件。点击图片,即可放大/缩小你的图片。更有趣的是,只要你滚动图片即可查看过去浏览过的图片。 picZoomer Demo | Download picZoomer 是一个非常小的 jQuery 插件,通过鼠标悬停放大图像,同时支持缩略图实现导航。你可以在电子商务网站使用该插件创建一个产品浏览页面,它允许访问者通过缩略图查看产品的的不同照片,且支持单独放大照片。 jQuery Zoom Demo | Download jQuery Zoom 是一个易于使用的 jQuery 图像缩放插件,你可以通过点击鼠标、抓取动作和切换动作来实现缩放图像。 WM Zoom Demo | Download WM Zoom 能够在图像中创建一个放大镜,并在旁边显示其高清晰度的图像。此外,它内置一个变焦功能,当你的鼠标悬停在图像上,能够放大图像。 BZoom Demo | Download BZoom 支持创建缩略图导航,并支持鼠标悬停时,在旁边显示特定区域的高清晰度图像。 elevateZoom Demo | Download Elevate Zoom 提供了两种图像缩放模式,一个低分辨率的可见光图像和一个高分辨率缩放的图像。且它支持缩略图导航,同时支持鼠标悬停时放大图像。 magnificent.js Demo | Download magnificent.js 是一个简单的响应式插件,能够提供两种缩放模式: 模式 1: 内部缩放。 悬停时在图像内部显示放大后的图像。 模式 2: 外部缩放。显示放大镜玻璃效果,以展示图像的特定部分。 也支持鼠标滚动来缩放图片。   zoom.js Demo | Download zoom.js […]

龙生   12 May 2015
View Details

为 Web 开发者准备的 15 最棒 AngularJS 工具

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好。 目前越来越多的网站会采用 AngularJS 来开发 Web 交互应用(包括:team.oschina.net),本文收集了 15 个使用非常棒的 AngularJS 相关的工具供你参考。 Karma AngularUI Angular fire Angular Deckgrid Yeoman Generator Angular Code Orchestra SublimeText LUMX NG Table Angular GetText Code Orchestra Videogular WebStorm Angular Kickstart Jasmine via developersfeed from:http://www.oschina.net/news/62235/15-best-used-angularjs-tools-for-web-developers

龙生   08 May 2015
View Details
1 34 35 36 59