16 款最流行的JavaScript 框架
1. jQuery – Javascript框架 jQuery 是最流行的 JavaScript 框架，它简化了HTML 文档遍历、事件处理、动画和Ajax交互。jQuery插件非常之多。 2. Dojo Javascript框架 Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供 Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。 3. Sencha Ext JS4 Javascript框架 Sencha 是由 ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个新项目。是绘画、图表引擎，使用DOM-accessible JavaScript图表和矢量图。 4. Prototype javascript框架 Prototype.js 是一个由Sam Stephenson写的JavaScript包。这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端， 高交互性WEB应用程序的重担。轻松加入Web 2.0特性。 5. Uize Javascript框架 UIZE免费使用、支持移动设备、可CSS更换皮肤。Java (Apache TomCat), C# (IIS / ASP.NET), Visual Basic (IIS / ASP), C/C++, Perl (Perl / Apache), PHP, Ruby (Ruby on Rails), Python, 等等，无论服务器端何种语言，均可使用。具有大量的内置小工具，类似jQuery插件。 6. Qooxdoo Javascript 框架 qooxdoo 是一个用于开发Ajax应用程序的GUI框架，使用它可以开发出类似于Window桌面风格的Web应用程序。使用Qooxdoo并不需要你具备HTML, CSS 和 DOM 的知识。 7. Zepo Javascript 框架 Zepto.js 是支持移动WebKit浏览器的JavaScript框架，具有与jQuery兼容的语法。2-5k的库，通过不错的API处理绝大多数的基本工作。 8. DHTMLX Touch Javascript 框架 它是针对移动和触摸设备的JavaScript 框架。DHTMLX Touch基于HTML5，创建移动web应用。它不只是一组UI 小工具，而是一个完整的框架，可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器，用DHTMLX Touch创建的应用，可以在iPad、iPhone、Android智能手机等上面运行流畅。 9. YUI library Javascript 框架 Yahoo! UI Library […]
View DetailsWeb开发者不可不知的15条编码原则
HTML已经走过了近20的发展历程。从HTML4到XHTML，再到最近十分火热的HTML5，它几乎见证了整个互联网的发展。但是，即便到现在，有很多基础的概念和原则依然需要开发者高度注意。下面，向大家介绍这些应该遵循的开发原则。 1、善用DIV来布局 当开发一个Web页面时，要考虑第一件事就是区分页面重点。将这些内容用DIV标签包含起来，页面的代码会呈现出整洁、缩进良好的风格。 1 2 3 4 5 6 <div id="header"></div> <div id="body-container"> <div id="content"> <!-- Content — > </div> <div id="right-side-bar"> <!-- Right Side Bar Content Area — ></div> </div> <div id="footer"></div> 2、将HTML标签和CSS样式表分割开来 好的页面应该将HTML标签和CSS样式表分割开来。这是每一个Web开发者在首次接触Web开发时就应该知道的一条原则。然而，直到今天，仍然有很多开发者没有严格遵循这一原则。 不要在HTML标签里内嵌样式表代码。开发者应该养成习惯，单独建立文件，用以存放CSS样式表。而这也将方便其他开发者在修改你的代码时，能迅速完成工作。 1 2 <p style="color: #CCC; font-size:16px; font-family: arial"> An example to illustrate inline style in html</p> 3、优化CSS代码 现如今，为网站添加多个CSS文件的做法已经很普遍。但是，当网站包含的CSS文件过多时，会降低网站的响应速度。解决办法是：精简代码并对多个CSS文件进行优化，将其合并成一个文件。这个办法能显著提升网站的加载速度。此外，有很多工具可以用来优化CSS文件，例如CSS Optimizer、Clean CSS等。 4、优化Javascript文件，并将其放到页面底部 和CSS一样，为页面添加多个Javascript文件也是很普遍的做法。但这同样会降低网站的响应速度。为此，开发者应该精简、优化这些Javascript文件。 但有一点和CSS不同，浏览器通常不支持并行加载。这也就是说，当浏览器加载Javascript文件时，将不再同时加载其它内容。而这就导致了网页的加载速度好像变慢了。 一个好的解决办法是：将Javascript文件的加载顺序放在最后。为了实现这一目标，开发者可以把Javascript代码放在HTML文档的底部，而最好的位置是放在接近</body>标签的地方。 5、善用标题元素 <h1> 到 <h6>这些元素用来突出页面的重点内容。这有助于用户更加关注页面的重点部分。对于博客，我（指本文作者）推荐使用<h1>标签来突出博客标题。因为，博客标题几乎是页面中最重要的部分。 1 2 3 <h1>This is the topmost heading</h1> <h2>This is a sub-heading underneath the topmost heading.</h2> <h3>This is a sub-heading underneath the h2 heading.</h3> 6、在合适的地方使用合适的HTML标签 HTML标签是构造规范内容结构的关键。例如，<em>标签用来强调重点内容。<p>标签适用于突出文章段落。如果想要在段落间加空行，就不要使用<br />标签。 1 2 <em>emphasized […]
View DetailsJs判断键盘按键
window.document.onkeydown = disableRefresh; function disableRefresh(evt){ evt = (evt) ? evt : window.event if (evt.keyCode) { if(evt.keyCode == 116){ //do something } } } keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L keycode 19 = Pause keycode 20 = Caps_Lock keycode 27 = Escape Escape keycode 32 = space space keycode 33 = Prior keycode 34 = Next keycode 35 = End keycode […]
View Detailsjs实现判断大写锁定是否开启
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>检测大写锁定键</title> <style type="text/css"> <!-- *{margin:0;padding:0;} body{padding:2em;background:#242424;color:#ccc;} h1{text-align:center;line-height:200%;} h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;} h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;} h3 a:hover{color:#fff;} p{margin:5em;} span{margin:0 0.5em;font-size:85.7%;} --> </style> </head> <body> <h1>检测大写锁定键 </h1> <form action="#" method="post"> <p><label for="password">密码：</label><input type="password" id="password" name="password" /><span style="display:none;">大写锁定键被按下，请注意大小写</span></p> </form> <script type="text/javascript"> //<![CDATA[ function detectCapsLock(event){ var e = event||window.event; var o = e.target||e.srcElement; var oTip = o.nextSibling; var keyCode = e.keyCode||e.which; // 按键的keyCode var isShift = e.shiftKey ||(keyCode == 16 ) || false ; // shift键是否按住 if ( ((keyCode >= 65 && keyCode <= 90 ) && !isShift) // Caps Lock 打开，且没有按住shift键 || ((keyCode >= 97 && keyCode <= 122 ) && isShift)// Caps Lock 打开，且按住shift键 ){oTip.style.display = ";} else{oTip.style.display = 'none';} } document.getElementById('password').onkeypress = detectCapsLock; //]]> </script> </body> </html> from:http://www.cnblogs.com/xiaoao808/archive/2008/07/31/1257624.html
View Details11个超炫的视差滚动网站欣赏（附神器推荐）
目前这种视差滚动效果被越来越多的国内外网站所应用，成为网页设计的热点趋势。 通过一个很长的网页页面，其中利用一些令人惊叹的插图和图形，并使用视差滚动（Parallax Scrolling）效果，让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。完美的展示了一个复杂的过程，让你犹如置身其中。厌倦了千篇一律，呆板网页设计的你不放一试。 视差滚动效果与少即是多的理念相互交融，能带来清新炫目的感受，例如这组网站。 你也可以试试： 网页特效：滚动视差设计指南 利用ADOBE神器十分钟零代码实现HTML5视差滚动特效 Broken Twill theQ camera Srgint Sojourn Network Fall in Tennessee Made by Block Kill your Darlings WAAAC Spotify Serve Seattle Codetex 原文地址：webdesignledger 转摘请注明优设网译文出处，谢谢各位小编。 from:http://www.uisdc.com/inspiring-examples-of-parallax-scrolling-sites
View Details网站运用新趋势！神奇的鼠标滚轴动画（视差滚动）
动画在每一年都是最具影响力和占据主导地位的。Web开发者通过不同的实验来实现动画，从最简单的基础效果到富有开创性的展示结果。毫无疑问，这种雪崩式的动画效果已经被认为是web技术史上最先进的技术。已经被永不满足现状的Web开发者们发展到了一个全新的水平。这些动画缓慢却很清晰，让网页设计师在页面上把交互和视觉都展现结合的淋漓尽致。 如果你想学今天的这些案例，推荐回顾《让网页舞动起来！25个免费的视差滚动插件》和《网页特效：滚动视差设计指南》这两篇文章：） 小伙伴们！最新的最火爆的最给力的网页设计趋势来了！快来看看这个神奇的视差滚动设计趋势！ 小提醒：有些网站效果不能再赞，谷歌、火狐才能打开唷。 新鲜的网站趋势类型好文： 《网页设计新招式：火力全开！引爆网页中的视频应用》 《2014网页菜单新趋势！21例时尚创新的侧边栏菜单网页设计》 Kaipoche 该网站致力于今年的风筝节。通过一个简单的滚动激活动画技术，它有一个真正充满活力和引人瞩目的设计。 Bizbrain 是一个先进的长页面网站。它通过精彩的彩色图熟练地演示了各种数据。各个版块都有各自相应的信息。 Drugs and Alcohol on Campus 这也是一个交互式图表，能够在不知不觉中给你最紧迫的问题提供答案。所有画面都是通过鼠标来激活动画的，使这些问题看起来不那么“干巴巴”的。 Bright Media 该团队利用视觉引导串起所有元素，使用正确的顺序引导用户，每个部分都有装饰的动画元素，你的任务就是顺着线条走就OK了。 Adobe Muse CC 这是一个创新的、干净而复杂的网站，利用艺术方法引导用户来关注自身新产品。主要包括简洁的白色页面、纸张变形模式和滚动动画来实现效果。 Fluger 网站的开发人员在页面上放置了一架小飞机，用户通过滚动鼠标滚轮可以看到小飞机在页面上飞行，实现浏览整个网站的目的。网站是用图片和手绘稿糅合起来的，加上飞机的引导，看起来酷毙了！不过加载时需要等一定的时间。 Fillet 这是一个流行的平面风格网站，拥有很棒的字体。当你向下滚动鼠标时，每个色块都会顺利转化为一串漂亮的字符。整个过程显得很愉快。 NGUMA 这是一个富有魅力的互动机构网站。该网站允许你直接参与它的互动。也是基于滚动动画的设计趋势。 Happy New Year 2014 滚动激活动画模式非常适合于庆祝节日的网站设计。特别是圣诞节。这个网站里面通过一个完整的动画建立起一个温馨的节日气氛，真是让人感到很别致。 Merry Christmallax 和上面的例子一样，这个创意网站的目的就是给用户们一个温暖而衷心的节日祝福。故事开始于一张干净的纸张，最后演变成一个充满活力的插图场景，整个故事就是动过滚动激活动画技术实现的。 Pixelgyar 这是另一个奇妙的和迷人的圣诞故事。圣诞老人的旅程完全取决于你的行动,所以旋转鼠标滚轮,让圣诞老人到达他的目的地吧！ Make Your Money Matters 这是一个宣传网站,生动地展示了加入信用联盟的好处。在整个动画过程中你将成为一个积极参与者。这项技术允许我们持有一个既定主题来实现网站设计，做到和用户之间的良好互动。 The Future of Mobile Phones 正如网站标题所言，该网站就是预测未来的手机的。网站的交互式信息里面充满了各种动画图形，都是定期统计的数据展示。 Camplight 这是一个整洁、干净而时尚的在线展示网站。提供了一个较为新颖的展示方式让用户来熟悉公司。 1McHappy Day 这个网站通过橡皮泥一样的图形设计带给用户返老还童式的体验，心灵上很容易就欢快起来。（我觉得要是来点卡哇伊的背景音乐一定会更给力的！） CEZ 提供了另一个惊人的互动之旅，该技术功不可没啊。 What’s behind the number 网站目的是广泛宣传关于防晒霜的防晒指数及其优势。当你向下滚动时,你会享受到一个整体活泼的故事，试图告诉你使用该产品后，在阳光下你的皮肤依然很安全。 InfoGuest Infographic 如其名字一样，它有大量的信息填充内容，通过图表和动画的有效结合展示出来。 Bolia 和上面的例子稍有不同，该创意团队应用基于照片的滚动激活动画来展示椅子的所有面。 Bam 该公司试图利用长页面布局和各种图纸来实现信息填充。为了避免各部分信息过于统一单调，研究小组决定采用滚动激活动画给网站带来生气。 Areal Plankstadt 这是一个宁静的网站，拥有美丽的氛围。为什么？——蓝白两色，青春一生……通过滚动激活动画技术实现页面之间的切换，非常平静安宁。 结语 这里所列出的这些在线信息展示网站、视觉故事网站、创意机构网站以及投资组合网站都实实在在地利用了滚动激活动画这一崭新的设计技法，构造了一个特定的用户体验模式，希望小伙伴们能够有动力去学习这一项新技术。 我最喜欢Adobe Muse CC和Fluger了，看起来真的是十分赞的！ 原文地址：designmodo 优设网翻译：@sheisjane 本文由优设网uisdc.com原创翻译，转摘请注明优设网译文出处，谢谢各位小编。
View Details超赞！20个创意十足的网页视差滚动效果欣赏
最近大家伙越来越关注视差滚动的网页了，很多同学都在四处寻找相关的案例来赏析学习。此前我们也分享过相关的制作教程及文章。 那么今天我们继续推荐20个创意十足的视差滚动酷站，希望能为你的案例带来灵感：）强烈推荐收藏。 好文推荐： 《无法抗拒的诱惑，美女封面网站设计欣赏》 《敢于尝试！23个有着非同寻常配色的网页设计》 《极好的交互设计：19个创意网页欣赏》 Beatbox Academy Discover Shadow This is Now Sam Markiewicz Erős Balázs Le Tour de France Pi’s Epic Journey Scroll For Your Health TCM Summer Under the Stars TEDxGUC aBenção – Malhas e Tricots Criativos WAAAC De Might of Mister Miller Negative Space Anthelios SPF Sunscreen InfoQuest Infographic Reunite the River Fillet Eone 原文地址：speckyboy.com from:http://www.uisdc.com/20-webpage-parallax-scrolling-design
View Details六款帮助你实现惊艳视差滚动效果的jQuery插件
在网页设计中，视差滚动（Parallax Scrolling）是当下流行的网页设计技术，通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果。下面是一些运用视差滚动效果的优秀网页案例： 视差（Parallax）是指从不同的点看一个物体时形成的视觉差异，这个名词是源自希腊文的παράλλαξις (parallaxis)，意思是"改变"。在网页设计中，视差滚动（Parallax Scrolling）是当下流行的网页设计技术，通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果。下面是一些运用视差滚动效果的优秀网页案例： 相信你非常想知道上面这些网页的精美视差滚动效果是如何实现的，今天这篇文章就和大家分享六款精心挑选的 jQuery 视差滚动效果插件，它们能够帮助你制作出精美的视差滚动效果。 Sequence.js Sequence 是一款非常优秀的 jQuery 滑动插件，能实现多种精美的滑动效果，其中之一就是水平方向的视差滚动。 在线演示 下载源码 jQuery Scroll Path 这款插件用于实现自定义路径的滚动效果。可以显示使用 Canvas 绘制路径线条和弧形，看到非常形象的运动效果。 在线演示 下载源码 Parallax Slider with jQuery 这个视差滚动滑动效果多次在我的博文中出现过，相信关注我博客的朋友一定不会陌生，有非常详细的制作教程。 在线演示 下载源码 jQuery Parallax 这款 jQuery 插件实现了类似 Nikebetterworld.com 产品展示页面的视差滚动效果，代码托管在 Github 上面。 在线演示 下载源码 Scrollorama 这款 jQuery 插件能够帮助你实现非常酷的滚动效果，可以应用飞入、缩放、淡入淡出等多种过渡效果。 在线演示 下载源码 Stellar.js 正如它的口号所说：实现视差滚动效果从未如此容易，的确，它能帮助轻松的实现网页视差滚动效果。 在线演示 下载源码 jParallax 这款基于 jQuery 的视差滚动插件使用简单，官方提供了五种不同的效果演示。 在线演示 下载源码FROM:http://www.jb51.net/article/31259.htm
View Details老祖宗的老话，终于收集全了。
谚语第一缉 ◆夏不睡石，秋不睡板。 ◆春不露脐，冬不蒙头。 ◆白天多动，夜里少梦。 ◆睡前洗脚，胜吃补药。 ◆晚上开窗，一觉都香。 ◆贪凉失盖，不病才怪。 ◆早睡早起，怡神气爽。 ◆贪房贪睡，添病减岁。 ◆夜里磨牙，肚里虫爬。 ◆一天吃一头猪，不如床上打呼噜。 ◆三天吃一只羊，不如洗脚再上床。 ◆枕头不选对，越睡人越累。 ◆先睡心，后睡人，睡觉睡出大美人。 ◆头对风，暖烘烘；脚对风，请郎中。 ◆睡觉莫睡巷，最毒穿堂风。 ◆睡觉不点灯，早起头不晕。 ◆要想睡得人轻松，切莫脚朝西来头朝东。 ◆千学不如一看，千看不如一练。 ◆久住坡，不嫌陡。 ◆马看牙板，人看言行。 ◆不经冬寒，不知春暖。 ◆不挑担子不知重，不走长路不知远。 ◆不在被中睡，不知被儿宽。 ◆不下水，一辈子不会游泳；不扬帆，一辈子不会撑船。 ◆不当家，不知柴米贵；不生子，不知父母恩。 ◆不摸锅底手不黑，不拿油瓶手不腻。 ◆水落现石头，日久见人心。 ◆打铁的要自己把钳，种地的要自己下田。 ◆打柴问樵夫，驶船问艄公。 ◆宁可做过，不可错过。 ◆头回上当，二回心亮。 ◆发回水，积层泥；经一事，长一智。 ◆耳听为虚，眼见为实。 ◆老马识路数，老人通世故。 ◆老人不讲古，后生会失谱。 ◆老牛肉有嚼头，老人言有听头。 ◆老姜辣味大，老人经验多。 ◆百闻不如一见，百见不如一干。 ◆吃一回亏，学一回乖。 ◆当家才知盐米贵，出门才晓路难行。 ◆光说不练假把式，光练不说真把式，连说带练全把式。 ◆多锉出快锯，多做长知识。 ◆树老根多，人老识多。 ◆砍柴上山，捉鸟上树。 ◆砍柴砍小头，问路问老头。 ◆砂锅不捣不漏，木头不凿不通。 ◆草遮不住鹰眼，水遮不住鱼眼。 ◆药农进山见草药，猎人进山见禽兽。 ◆是蛇一身冷，是狼一身腥。 ◆香花不一定好看，会说不一定能干。 ◆经一番挫折，长一番见识。 ◆经得广，知得多。 ◆要知山中事，乡间问老农。 ◆要知父母恩，怀里抱儿孙。 ◆要吃辣子栽辣秧，要吃鲤鱼走长江。 ◆树老半空心，人老百事通。 谚语第二缉 ◆一人说话全有理，两人说话见高低。 ◆一正辟三邪，人正辟百邪。 ◆一时强弱在于力，万古胜负在于理。 ◆一理通，百理融。 ◆人怕没理，狗怕夹尾。 ◆人怕理，马怕鞭。 ◆人横有道理，马横有缰绳。 ◆人多出正理，谷多出好米。 ◆不看人亲不亲，要看理顺不顺。 ◆天上无云不下雨，世间无理事不成。 ◆天下的弓都是弯的，世上的理都是直的。 ◆天无二日，人无二理。 ◆井越掏，水越清；事越摆，理越明。 ◆无理心慌，有理胆壮。 ◆牛无力拖横耙，人无理说横话。 ◆认理不认人，不怕不了事。 ◆认理不认人，帮理不帮亲。水大漫不过船，手大遮不住天。 ◆水不平要流，理不平要说。 ◆水退石头在，好人说不坏。 ◆以势服人口，以理服人心。 ◆让人一寸，得理一尺。 ◆有理说实话，没理说蛮话。 ◆有理的想着说，没理的抢着说。 ◆有理不怕势来压，人正不怕影子歪。 ◆有理不在言高，有话说在面前。 ◆有理不可丢，无理不可争。 ◆有理赢，无理输。 ◆有理摆到事上，好钢使到刃上。 ◆有理走遍天下，无理寸步难行。 ◆有斧砍得树倒，有理说的不倒。 […]
View Details西乔的漫画
在程序员杂志里面，我最喜欢的栏目，就是西乔的漫画。 西乔是一个美女项目经理，真不知道这个项目的成员对于美女作为项目经理作何感想（哈哈。。。。） 她的漫画讲的都是程序员的故事，故事都很简单，但简单的故事却可以看到程序员的甜酸苦辣。 这是西乔的官方博客：http://blog.xiqiao.info/ from:http://tntxia.iteye.com/blog/534128
View Details