WEB前端
云淡风清-北京
在战争中学习如何战斗。GitHub:https://github.com/luqin
展开
-
推荐 10 款 CSS 框架,网页设计就是这么简单
程序开发人员和网页设计人员掐架的事情常有听说,程序员们总是为自己设计不出来漂亮的网页而纠结。不再郁闷,本文即将为你介绍10款相当不错的CSS框架。1、CSS网页布局框架 Elastic简单的 CSS 框架,用于网页布局,可实现各种常见的网页布局,如下图所示:2、(X)HTML/CSS 框架 ThinkCSSTC (”ThinkCSS”) 是一个 (X)HTM原创 2013-06-04 14:47:43 · 3048 阅读 · 0 评论 -
如何编写可维护的JavaScript代码?
PS:本人非前端开发人员,此文为业余兴趣之作,转载请注明出处,谢谢:http://my.oschina.net/feichexia/blog/122217 JavaScript这门编程语言发展至今已经非常流行了,各种名词也层出不穷,我们随便列举下就有一大堆,比如Node.js、jQuery、JavaScript MVC、Backbone.js、AMD、CommonJS、Require转载 2013-04-23 10:54:03 · 1733 阅读 · 0 评论 -
Javascript教程:AngularJS的五个超酷特性
AngularJS是一个超棒的javascript框架,不单单对于开发人员来说非常有吸引力,对于UI设计师来说也同样出色。在这篇教程中,我们将简单的介绍AngularJS几个重量级必备特性,并且介绍它如何能够让你的web应用更加强大!AugularJS简单介绍AngularJS是一个新出现的强大客户端技术,提供给大家的一种开发强大应用的方式。这种方式利用并且扩展HTML,CSS和jav原创 2013-03-22 17:04:13 · 4558 阅读 · 1 评论 -
Javascript MVC架构之旅
本文摘自smashingmagazine的Journey Through The JavaScript MVC Jungle部分内容,因为个人对于框架的应用总结和特点比较感兴趣,这里翻译了部分的内容,希望对于大家有帮助,如果你觉得不过瘾,请阅读原文,谢谢!什么时候你需要使用Javascript的MVC框架?如果你开发的程序可能需要和API或者服务通讯,而且要求大量的视图操作或者数据操作,你原创 2013-03-22 17:01:10 · 1268 阅读 · 0 评论 -
12 款优秀的 JavaScript MVC 框架评估
在最近的几个月中,作者(Gordon L.Hempton)一直在寻求哪种MVC框架最为完美,他将目前能获取到的所有框架都粗略地试了试,然后在文章中列出了每一种框架的情况概要,在文末分享了作者经过对比之后最终的推荐产品。首先要特别说明一下,作者认为以下四个功能是十分重要的:UI Bindings(UI绑定):作者想说的不仅仅是模板,而是想谈一种在底层模型出现变化时,视图层能够自动翻译 2013-03-22 16:54:07 · 1374 阅读 · 0 评论 -
21个强大的Javascript框架
我们很早之前介绍过7个常用的Javascript框架,本文则扩展范围,收录21个强大的javascript框架,看看有没有你没听说过的。1. Dojo (演示地址)Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成:Core、Dijit、DojoX。Core提供ajax,events,packaging,CSS-based querying,animations,JS原创 2013-03-22 16:25:11 · 2458 阅读 · 0 评论 -
国内HTML5前端开发框架汇总
国外很有多优秀的HTML5前端开发框架相信大家都耳熟能详:JQuery Mobile,Twitter Bootstrap, Schena Touch, BackBone等等。同样,也存在很多国内比较优秀的前端开发框架,其中中国互联网三巨头贡献了近一半:腾讯,阿里巴巴,百度。框架不是万能的,选择和项目匹配的框架可以显著提高开发效率,但是也有可能带来代码的臃肿,本着“write less,转载 2013-04-03 09:35:05 · 1034 阅读 · 0 评论 -
图形布局-Layout 之js设计实现
前言定位browser 的 chart, VML,SVG, HTML5 Canvas使用的方式各不一样。如果使用现有的js library (各种实现js 图表的library汇总与比较) , 调用的API方式也肯定不同。举个例子: draw2d 使用addFigure 和 setPosition 都可以设置图的位置。混在特定技术或是特定library 里去layout ,原创 2013-02-18 11:09:49 · 1577 阅读 · 0 评论 -
有趣:256个class选择器可以干掉1个id选择器
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2552我们应该都知道,从选择器得分权重上将,id选择器(#aaa{})和class选择器(.aaa{})完全不是一个数量级的,前者:1-0-0; 而后者为0-1-0.因此:#id { color:d原创 2013-01-29 09:12:06 · 1734 阅读 · 0 评论 -
SVG脚本编程的一些技巧
1、在IE中如何调试SVG中的脚本a、去掉IE设置中的“禁止脚本调试”b、打开注册表,找到“[HKEY_CURRENT_USER\Software\Microsoft\Windows Script\Settings]”,设置"JITDebug"=dword:00000001c、然后就可以用vs.net来进行调试了2、解决IE中需要点击才能激活svg插件的问题编写一个脚本文件原创 2013-01-11 11:31:27 · 2304 阅读 · 0 评论 -
基于dwr2.0的Push推送技术详细解析以及实例
DWR从2.0开始增加了push功能,也就是在异步传输的情况下可以从Web-Server端发送数据到Browser.我们知道,Web的访问机制天生是设计用来pull数据的,也就是只允许Browser端主动发起请求,server是被动的响应.不允许Server向Browser发出一个connection请求,也就是说没有为server向Browserpush数据提供设计实现.虽然原创 2013-04-23 10:55:31 · 1508 阅读 · 0 评论 -
19个带示例的jQuery滚动条插件
1、NiceScroll:可用于桌面、移动与触摸设备的jQuery滚动插件NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式。它支持Div、iFrame、一个body的滚动条效果。适用于iOS设备。在线演示2、Lion样式jQuery滚动条:nanoScrollernanoScroller提供提供了一种简便的方式让你的网站拥转载 2013-04-16 16:43:56 · 1994 阅读 · 0 评论 -
响应式 Web 设计必备的 12 款 CSS 框架
目前接入互联网中的设备的多样性,催生了新的Web布局设计方式——响应式设计。响应式设计的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。这样开发者就无需针对每种设备及分辨率分别创建独立的布局。本文整理12款针对响应式布局设计的CSS框架,可以使你的开发工作变得轻松,并节省你的时间和成本。1. SkeletonSk原创 2013-06-04 14:45:32 · 2016 阅读 · 0 评论 -
27 款经典的CSS 框架
利用 CSS 框架,可以简化你的工作,提高工作效率。CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则等代码块。下面给你推荐了27款优秀的CSS框架,你可以选用。1. 960gs960 像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程,使工作简单高效。原创 2013-06-04 14:49:42 · 1564 阅读 · 0 评论 -
设计师应该拥有的 50 个很有用的 CSS 代码
IT行业每年都有很多新技术出现,作为网页设计师和前端开发者现在必须对 CSS3 深入了解、确定浏览器支持情况以及一些古怪的技巧。但同样也有很多 CSS2 代码片段可以实现这些技巧:这篇文章中,我们列举 50 个 CSS2/CSS3 代码,这些代码都是网页开发中经常要使用到的。 1. CSS Resets html, body, div, span, applet, obje原创 2013-05-24 09:01:30 · 2641 阅读 · 0 评论 -
写了 10 年 Javascript 未必全了解的连续赋值运算
一、引子var a = {n:1}; a.x = a = {n:2}; alert(a.x); // --> undefined 看 jQuery 源码 时发现的这种写法。 以上第二句 a.x = a = {n:2} 是一个连续赋值表达式。 这个连续赋值表达式在引擎内部究竟发生了什么?是如何解释的?二、猜想猜想1:从左到右赋值,a.x 先赋值为 {n:2},但随后 a原创 2013-05-08 17:36:49 · 1424 阅读 · 3 评论 -
细数 javascript 容易被忽略的语法陷阱
JavaScript 可算是世界上最流行的编程语言,它曾被 Web 开发设计师贴上噩梦的标签, 虽然真正的噩梦其实是 DOM API,这个被大量的开发与设计师随手拈来增强他们的 Web 前端的脚本语言, 如今越来越被重视,虽则如此,JavaScript 仍然拥有很多让人费解的东西。## 1. 它以 Java 命名,但并不是 Java它最初叫 Mocha, 接着改名为 LiveScript,原创 2013-05-08 17:44:43 · 1164 阅读 · 0 评论 -
verlet-js:超酷的开源JavaScript物理引擎
verlet-js是一个使用JavaScript编写的物理引擎,支持粒子系统、距离约束、角度约束等,通过verlet-js,你可以在应用中实现一些非常酷的、具备物理特性的效果,比如碰撞、滚动、滑动或弹跳。verlet-js的一些特性如下:Simulation(模拟):包含复合实体的根对象,用于在一个场景中驱动实体的所有物理特性和动画效果Composites(复合实体):用于场景原创 2013-05-08 17:24:55 · 2594 阅读 · 0 评论 -
写给程序猿们的交互设计
编者按:看到此文时恍惚回到自己学习网页的时候,那时候只知有编程,不知有设计。各个论坛大部分时候讨论的也是如何用Frame实现页面的分区,如何做出圆角,以及写一大段javascript代码或者做个flash只为让页面看起来更眩一点。后来css1.0, 2.0陆续出现,html 4.0 4.1 以及如今的html 5也逐渐淘汰掉了表现样式的标签。视觉传达思想开始陆续进入程序猿与产品经理的视线,从网页到原创 2013-05-22 09:10:46 · 857 阅读 · 0 评论 -
如何组织大型JavaScript应用中的代码?
本文作者Cliff Meyers是一个前端工程师,熟悉HTML5、JavaScript、J2EE开发,他在开发过程中总结了自己在应对JavaScript应用越来越庞大情况下的文件结构,深得其他开发者认可。以下为CSDN编译:地板上堆放的衣服首先,我们来看看angular-seed,它是AngularJS应用开发的官方入门项目,其文件结构是这样的:css/img/js/a原创 2013-04-28 08:36:15 · 1126 阅读 · 0 评论 -
21 Useful Scrollbar CSS/JavaScript Styling Tutorials
Posted onAugust 4, 2012 byGinva inDesignwithNo Comments13 Flares13 Flares×Scrollbar is one of element that very often used to navigate the website content. Scroll-bar was also known as a han转载 2013-04-16 16:42:09 · 2160 阅读 · 0 评论 -
SVG DOM常用属性和方法介绍(1)
12.2 SVG DOM常用属性和方法介绍将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的。SVG支持DOM2标准。12.2.1 文档初始化相关— evt属性evt表示事件本身,可以通过evt获取与当前事件相关的信息,用户可以在script中定义响应函数,进行相应的处原创 2013-01-11 16:30:40 · 14608 阅读 · 0 评论 -
了解SVG
教程细节· 语言: JavaScript,HTML, SVG· 难度:中等· 预计阅读时间:30分钟 SVG-可缩放矢量图形,是一个XML风格标记驱动的矢量图形的浏览器渲染引擎。除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG。Canvas也有同样的支持情况,所以问题往往表现为:我们应该使用哪种方案?原创 2013-01-06 21:12:06 · 1415 阅读 · 0 评论 -
如何向网页添加 SVG
本主题介绍了在网页中呈现 SVG 的常见方法,并假定你已掌握有关 HTML 和 JavaScript 的基础知识。简介SVG 的呈现方法内联 HTML5内联 XHTML独立 SVG嵌入插件摘要相关主题简介如果你只了解可缩放矢量图形 (SVG),并希望体验 SVG,则你首先需要解决的问题之一是如何向基本网页添加 SVG。 如果你看一下相对基本的网页模板,便可获知如何开原创 2013-01-07 17:48:11 · 10540 阅读 · 0 评论 -
10 款简单精美的 jQuery/CSS3 表单
表单在网页中扮演着十分重要的作用,从用户登录注册到留言评论,都离不开表单。一个设计精美方便的表单,可以提高用户交互的质量。下面给大家介绍10款设计简单但是外观精美的jQuery和CSS3表单,希望对大家有所帮助。1、发光的HTML5表单这是一款非常漂亮的HTML5登录表单,当表单获取焦点时,表单四周就会呈现出发光动画的效果,并不断地进行颜色渐变;当表单失去焦点时原创 2012-08-09 23:52:12 · 3367 阅读 · 0 评论 -
jquery-validation 学习总结
一、用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/API: http://jquery.bassistance.de/api-browser/plugins.html当前版本:1.5.5需要JQuery版本:1.2.6+, 兼容 1.3.2二、默认校验规则(1)requi原创 2012-07-13 17:41:45 · 1170 阅读 · 0 评论 -
jQuery UI 应用不同Theme的办法
jQuery UI是一套非常好用的jQuery Tools库,目前已经发布的最新版本是1.8.4。在我自己的使用过程中,总有一些不爽。因为我下载的那个包里默认的主题样式是下图这样的,使用起来很难和具体的网页风格去配合。 一开始,我准备去动手,自己修改CSS文件。这被证明是个非常费力不讨好的事情。 有一次在jQuery UI的主页【http://jqu原创 2012-07-13 09:13:07 · 1164 阅读 · 0 评论 -
JS验证正则表达式(大全)
以下函数调用方式: function check() { var bb = document.getElementById("txt_id").value;//txt_id为文本框的ID alert(ismobile(bb));//ismobile 代表以下任何一个函数名称 }HTML代码: JavaScript代码:/**原创 2012-07-11 14:44:13 · 1154 阅读 · 1 评论 -
五款改善用户体验的jQuery插件
改善网页的用户体验,可以从以下几个方面入手:菜单栏,tab,登录/注册,搜索,以及404页面。对于每一方面的优化,Gevin分别向大家推荐一个自己私藏的jquery插件,希望对大家有帮助,也欢迎大家多多交流。1.菜单栏清爽美观的菜单栏既能够向用户提供充分的吸引人的内容,又能让网站得体大方。Cool Animated MenuCool Animated Menu演原创 2012-07-11 14:09:28 · 1127 阅读 · 0 评论 -
javascript动态调用js源文件
javascript运行时动态调用javascript源文件方法如下: function callJs(jsFileName) { var js = document.createElement('script'); js.src = jsFileName; try { document.getElementsByTagName('head')[0].app原创 2012-07-11 15:28:39 · 1099 阅读 · 0 评论 -
用HTML5创建超酷图像灰度渐变效果
原文:http://www.webdesignerwall.com/tutorials/html5-grayscale-image-hover/ 曾几何时,网站上显示的灰度图像必须手动进行转换。现在使用HTML5画布,图像可以被巧妙的转换为灰色,而不必使用图像编辑软件。我下面有一个示例,展示如何使用HTML5和jQuery动态的将彩色图像转换为灰色。贡献者:感谢达西·克拉克(我在T原创 2012-07-09 15:26:58 · 1943 阅读 · 0 评论 -
HTML5本地存储不完全指南
编辑推荐:这篇文章来自于黑客志,对HTML5的本次存储方式进行了非常全面的介绍和分析,对于学习HTML5的开发者来说,不容错过哦。历史在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择:HTTP cookie。HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)。IE us原创 2012-07-11 11:44:26 · 699 阅读 · 0 评论 -
浅析HTML5在移动应用开发中的使用
前言HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间:移动端的IE、Chrome、FireFox、Safari,亦或是新出现的浏览器,谁能达到在移动端对HTML5更好的支持,谁就能在以后的移动应用领域占据更多的市场。现在我们怎么装APP有了HTML5以后怎么装APP更灵活、更方便的app使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一。下面列举原创 2012-07-11 12:46:11 · 2395 阅读 · 0 评论 -
Web 开发者应该注意的一些事项
能否开发出好的产品对Web开发者来说十分重要,开发者应该尽力让开发产品更加完美。然而在开发过程中,所有开发者都会犯一些同样的错误,这些错误会拖慢整个项目的进度,影响其他进程,并且耗费更多的时间和资金。如果开发者能避免这些普遍的错误,会给公司、客户和自己节省许多时间和金钱。文章中介绍了一些注意事项,可以帮助web开发者们更好的完成开发工作,同时增加开发者在开发领域中的名气。保翻译 2012-09-03 11:25:52 · 758 阅读 · 0 评论 -
如何使用 SVG 进行缩放和平移
本主题演示了如何使用可缩放的向量图形 (SVG) 进行缩放和平移,并在结尾处提供了一个可进行缩放和平移的复杂组织结构图示例。假定你掌握了基本的 HTML 和 JavaScript 知识,并能访问可在 HTML5 中呈现内联 SVG 的浏览器(如 Windows Internet Explorer 9)。简介创建 SVG 测试图基于浏览器的 SVG 缩放和平移基于 JavaScript原创 2013-01-07 17:48:44 · 24567 阅读 · 0 评论 -
SVG常见问题汇总
1. SVG背景透明的解决办法 IE中,完全可以支持SVG透明。 条件:使用标签 (自己测试的,其他标签未知) Tip: Internet Explorer supports an additional attribute, wmode="transparent", that let the HTML page background shine through. tip:i原创 2013-01-10 16:47:24 · 2605 阅读 · 1 评论 -
在 SVG 中添加交互性
简介: 可伸缩矢量图(Scalable Vector Graphics SVG)是一种基于 XML 的语言,用于绘制二维图形。不过,它的能力不局限于简单的静态矢量图形。本文展示了如何将交互元素加入到 SVG 文档中,使其可以对用户输入作出响应。SVG 中的交互性可以分为三个领域 --链接、事件和脚本。本文将依次讨论这三个领域。注意:要查看本技巧中的SVG 文档,需要有一个 SVG 查看程序原创 2013-01-06 21:26:17 · 7974 阅读 · 0 评论 -
即时通信与浏览器多TAB通信
摘要 浏览器与服务器端的即时通信技术解决了在线聊天等产品中涉及到的复杂网络环境下的问题;采用多tab通信技术来处理现代浏览器的跨页面通信,分析特定疑难问题的技术解决方案。TAG即时通信,多tab通信内容 关键技术消息推送:通过基于web server的长连接技术实现前端多Tab数据交互:借助Flash的Local Connection和ShareObject技术原创 2012-11-29 23:09:08 · 1877 阅读 · 0 评论 -
2013年Web设计六大趋势
摘要:Web开发人员要保持不断创新,找到最新最时尚的流行元素与趋势并且把这些元素运用到自己的网站中。本文预测了2013年Web设计的6大流行趋势,这6个趋势或许可以帮助你更加明确Web设计未来的发展方向以及帮助你对其他方面的预测。众所周知,科技和虚拟世界都在不停发展,当市场上出现一个新发展趋势的时候,作为Web开发人员首先应该想到这些新趋势何时会运用到Web开发上,并且把这些新元素运用到自转载 2012-09-25 17:44:19 · 992 阅读 · 0 评论 -
极客Style:12款华丽的Admin管理后台模板
摘要:几乎每一款应用或者动态网站都需要后台来管理,后台管理在整个界面设计中占据重要一席,本文我们精心搜集了这些超实用的模板,希望你能喜欢。基于这些模板,你可以创建任意你所喜欢的页面。几乎每一款应用或者动态网站都需要后台来管理,后台管理在整个界面设计中占据重要一席,其中有许多管理屏幕捆绑着该应用(比如WordPress, Magento等),但是自定义的应用需要自定义的后端管理。通常,我翻译 2012-10-12 08:52:20 · 7887 阅读 · 0 评论