有用的jQuery库是设计师和开发者之间一个非常熟悉的短语。这是现在互联网中最流行的JavaScript函数库之一。每个设计师和开发人员都应该知道它的重要性，而且熟悉它的功能和特点。 jQuery几乎可以解决一个网站所有的问题 它可以从做一个有吸引力和创意的网站解决所有那些阻碍你的问题 如果你想解决任何跨浏览器的问题，那就必须收藏使用JavaScript函数库 jQuery库是Web开发人员的重要来源。你会发现很多互联网的jQuery插件都是免费使用的，但发现这些优秀的jQuery插件，需要你花费许多时间，经过许多个站点来了解最新和最流行的jQuery库。 所以，在今天的文章中，我们收集了许多最适合应用在网站中的jQuery库。你可以使用它们来为自己的网站添加很酷的效果。 1. Treed Treed 可以用在你网站上的树形编辑。它是可扩展的，可定制的，功能强大且非常易于使用的插件。 2. jQuery Vibrate 这是专门为移动设备建立的。它允许开发者在一个特定的时间周期的对任何设备进行振动操作。 3. Flight Indicators 这是一个非常容易使用的插件。您可以使用HTML，CSS3，jQuery和SVG图像显示高品质的飞行指标。. 4. jQuery LightSlider Lightslider可以为你网站提供自适应和可触摸的内容滑块。带滑动和淡入淡出效果，它与所有主流浏览器兼容。 5. jQuery GoUp! 这是一个非常简单而且易于使用的插件。它可以让您的网站访问者直接返回到页面的顶部点击。 6. Image Cropper 这个jQuery插件允许你裁剪网站上的图像。它还提供了一些选项和预览。还可以设置高度和宽度。 7. Devrama Slider Devrama是一个自适应图像滑块插件。支持图片和HTML内容。而且带有各种过渡效果。 8. jQFader jQFader是一个非常简单的插件，可以让网站的元素在实现淡出效果。风格朴素而且简单易用，非常适合在您的网站。 9. Forkit Forkit.js是一个展示动画丝带的jQuery插件，可以为访客带来额外的惊喜内容。它通常被放置在右上角。 10. Vertical News Slider 正如其名称所暗示的，是一个基于jQuery和CSS3的滑块，显示新闻标题左侧同时预览的选项，并简要总结。 11. Looking For 这是一个允许在页面上的列表项搜索文本的jQuery插件，它同时也隐藏了那些不匹配的项目。 12. Browser Swipe 这个插件允许你滚动时禁用在网站上触控板刷卡事件。根据鼠标滚轮和上下滚动控制它的反应。 13. Chicken Dinner ChickenDinner是一个独特的jQuery插件。它允许随机从客户端阵列通过图像标记或背景加载图像。 14. Flicker Plate 这是一个自适应和易于使用的jQuery插件。它可以让你在一个页面上翻页浏览网页上的内容。 15. SVGMagic 要SVG图像转换成PNG？使用这个简单的jQuery库。如果你浏览器不支持SVG格式，它可以搜索你网站上SVG图像，并将其转换为PNG图片。 16. lazyYT 这个jQuery插件是用来延迟加载YouTube视频的。在第一次加载时，格将被替换的视频预览图片，点击后，将自动播放。 17. ScrollMagic 有了这个插件，当内容向下滚动到一个特定的位置，你可以控制与用户不同的交互元素，动画炫酷，等等，。 18. RowGrid RowGrid是一个把图片或者其他元素在一条直线排在您的网站的jQuery插件。这是一个小而易用的工具。 19. Remodal 这个jQuery插件用于散列跟踪和声明式状态符号。它是自适应，扁平化，易于定制的插件。 20. Panorama Viewer 这是一个非常有用的jQuery插件。它允许你在网站插入全景照片展示更多的独特的感觉。 21. Floatlabels 这是一个对开发者非常熟悉的jQuery插件。当用户相互关联的任何文本，占位符值向上移动时会显示在上面键入的文本。 22. Fluidbox 这是一个非常有用的jQuery插件。它复制并提高了在它链接到更大的分辨率图像的方式看到介质流体灯箱模块。 23. Headroom Headroom.js可以帮助你保持网站主内容贴近用户的主导航。当网站向下滚动时，它自动缩回；当向上滚动时，它自动显示。 24. A-Slider A-Slider 是一个自适应的简单滑块，它也支持音频，而且非常容易使用，可以高度可配置的使用HTML的功能。 25. CoverflowJS 这是的CoverFlow项目，允许你通过结合jQuery的UI组件和CSS3样式的来创建一个功能齐全的“CoverFlow”的效果。 注：cover flow是苹果首创的将多首歌曲的封面以3D界面的形式显示出来的方式。 26. jQuery URLive 这个jQuery插件非常类似于Facebook帖子的附件功能。它允许你创建任意URL的基于其开放式图形属性实时预览。 27. BttrLazyLoading 这个插件允许Web应用程序只加载那些视窗内的图像。可以有不同版本的图像在四个不同的屏幕尺寸。 28. jQuery Collapser 这个jQuery插件可以让你用文字，字符和线条来灵活的折叠元素的文本。它具有多种函数来实现一个段落的折叠功能。 29. Parallax ImageScroll 这个插件可以创建一个图像的视差效果。它使用简单，并提供了许多选项进行修改。还可以使用动画和CSS3样式。 30. Block Scroll 这个jQuery插件打破了页面中一小部分内容的更好展示。通过一次显示的元素作为一个屏幕，使整个页面自动适应。 31. Full […]
View Details我们收集了 2014 年 25 款最新最棒的 jQuery 插件，帮助大家改善网站的用户体验！ 网络上提供了大量非常有用的 jQuery 插件，帮助大家完善网站的体验。所以我们在这里收集了 2014 年发布的，并且是非常有用的插件，希望能帮助大家找到自己需要并且喜欢的，提升网站的质量！ HAMMER JS PAPA PARSE PAPAPARSE 是强大，浏览器内置的 CSV 解析器。 BLURR Horwheel Component Animsition Animsition 是简单，易用的 jQuery 插件，用来在 CSS 动画隐藏 xs 的页面转换中添加 br 类。 LADDA BLAST Blast.js 可以分离文本，方便排版操作。包括四个分隔因素：字符，词，句子和元素。另外，Blast 可以自定义正则表达式和短语。 MENY Meny 是三维立体和空间特效菜单的概念。 FOKUS Fokus 使用 JavaScript 用黑色半透明覆盖页面的其他部分，强调任意你选择的部分。 SWIP LI CHAFFLE chaffle 是 jQuery 插件，允许用户随机混乱字符。 Valideasy TWINKLE twinkle 是 jQuery 插件，通过可视化的 effects · larsjung.de 来吸引浏览者的注意力。 JQ THUMB QR CODE HEATMAP JS IMAGE FIT BLOCK SCROLL ANIMATED CSS BOXES ROLLER BLADE Simple Sidebar AIM SMOOTH STATE JS VIDE via webdesignmoo.com […]
View Details只看图不说话 Chillbox Visual LightBox Magnific Popup jQuery lightGallery Photo Box iLightBox Featherlight Smoothbox Featured – Likno Web Modal Windows Builder Touch optimized sliders Image Lightbox Swipebox Colorbox Slimbox 2 Highslide JS asPopup Nivo Lightbox Lightview Image Lightbox via webdesigncone from:http://www.oschina.net/news/54692/best-jquery-lightbox-plugins
View Details现在的网页设计很流行全屏背景，就是使用一张大图作为网页的背景，在网页进行滚动时背景不动。本文介绍 10 个在处理全屏背景效果的 jQuery 插件。 BACKSTRETCH VIDE BIG VIDEO SIMPLE VID GAYA DESIGN MOTIO VEGAS OKFOCUS VIDEO FORMSTONE SUPERSIZED via webdesignmoo from:http://www.oschina.net/news/55788/10-useful-fullscreen-background-jquery-plugins-2014
View Details这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件，可以帮助你轻松的实现你网站需要的图像裁剪功能。 Cropit Cropit 是一个 jQuery 插件，支持图像裁剪和缩放功能。Cropit 通过 FileReader 进行本地图片加载，然后使用 canvas 来进行裁剪。 croppic croppic 是图像裁剪的 jQuery 插件，可以满足你的要求，并且有许多额外的特性。 Image Cropper jQuery Image Cropper 是简单的 jQuery 图像裁剪插件。 Fakecrop jQuery-Fakecrop 插件是图像集合，可以自动扫描所有图像，适应一个自定义边界的框。Fakecrop 还可以创建图像的“fake”裁剪效果，可以生成非常漂亮的缩略图。 CropZoom CropZoom 是 jQuery 插件，支持图片裁剪，缩放和旋转。 via hidimba360.com FROM:http://www.oschina.net/news/56782/5-latest-jquery-image-crop-plugins
View Details之前转了一篇关于jQuery获取 select 、radio、checkbox 值的文章。 其中关于获取radio值的方法是： $("input[@type=radio][@checked]").val(); 或者 $("input[name=’radioName'][checked]").val(); 实际上 上面的两种方法在IE中可以正常工作，而FireFox/Chrome浏览器下是无效的，其中第二种方法只能获取到，你在代码中初始化checked="checked"的radio值 之后翻看了一下《jQuery in Action》发现里面的例子的写法为 $("input[name=’radioName']:checked").val(); 其实以前在刚看完《jQuery in Action》时写的方法都是正确的，可时间一长就容易忽略这些小细节了，导致直接从网上找了解决方法。并且一直错误的认为jQuery是没有浏览器兼容问题的，看来以后在看书是一定只要注意一些细节问题了。 from:http://www.thinksaas.cn/group/topic/226414/
View Details目前，网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度，具体实现的技术并不复杂，下面分别对其说明。 首先，在页面中准备一个id为div1的div,在这个div中放一个ul,ul中准备了一些li,然而这些li都有一个data-src的属性，准备着图片的地址，具体结构如下： [html] view plaincopy <div id="div1"> <ul> <li data-src="http://t03.pic.sogou.com/7620cd6e740c3c50.jpg"></li> <li data-src="http://t03.pic.sogou.com/2c67d8e270eb61c3.jpg"></li> <li data-src="http://t01.pic.sogou.com/9c9d058c0c731087.jpg"></li> <li data-src="http://t02.pic.sogou.com/007da8d5456bc0ab.jpg"></li> <li data-src="http://t03.pic.sogou.com/64d939a5456bc0ab.jpg"></li> <li data-src="http://t03.pic.sogou.com/95eb5da5456bc0ab.jpg"></li> <li data-src="http://t04.pic.sogou.com/5c3fa2b5456bc0ab.jpg"></li> <li data-src="http://t03.pic.sogou.com/f6443925456bc0ab.jpg"></li> <li data-src="http://t04.pic.sogou.com/f96780b5456bc0ab.jpg"></li> <li data-src="http://t03.pic.sogou.com/54a75d2e740c3c50.jpg"></li> <li data-src="http://t03.pic.sogou.com/3b173ee50fdad689.jpg"></li> <li data-src="http://t03.pic.sogou.com/95eb5da5456bc0ab.jpg"></li> <li data-src="http://t04.pic.sogou.com/5c3fa2b5456bc0ab.jpg"></li> <li data-src="http://t03.pic.sogou.com/f6443925456bc0ab.jpg"></li> <li data-src="http://t04.pic.sogou.com/f96780b5456bc0ab.jpg"></li> <li data-src="http://t03.pic.sogou.com/54a75d2e740c3c50.jpg"></li> <li data-src="http://t03.pic.sogou.com/3b173ee50fdad689.jpg"></li> <li data-src="http://t01.pic.sogou.com/b0e3d909c131e9cb.jpg"></li> <li data-src="http://t02.pic.sogou.com/27e362d461029a95.jpg"></li> <li data-src="http://t02.pic.sogou.com/ddfb62d6f09be522_i.jpg"></li> <li data-src="http://t01.pic.sogou.com/9448c50e46a53e65.jpg"></li> <li data-src="http://t03.pic.sogou.com/b7e5a7e50fdad689.jpg"></li> <li data-src="http://t03.pic.sogou.com/3825466e4e3b9ce4.jpg"></li> <li data-src="http://t03.pic.sogou.com/1d7d602e740c3c50.jpg"></li> <li data-src="http://t02.pic.sogou.com/085ea3d5456bc0ab.jpg"></li> <li data-src="http://t04.pic.sogou.com/ad61be7270eb61c3.jpg"></li> <li data-src="http://t04.pic.sogou.com/ed7705b270eb61c3.jpg"></li> <li data-src="http://t04.pic.sogou.com/491c4cb461029a95.jpg"></li> <li data-src="http://t03.pic.sogou.com/e603c6ae4e3b9ce4.jpg"></li> <li data-src="http://t01.pic.sogou.com/6b6a148cdc19fbb4.jpg"></li> <li data-src="http://t01.pic.sogou.com/c301bac9f514c378.jpg"></li> <li data-src="http://t01.pic.sogou.com/11a6ce8e4e3b9ce4.jpg"></li> <li data-src="http://t04.pic.sogou.com/41b26435456bc0ab.jpg"></li> <li data-src="http://t03.pic.sogou.com/adb811acdc19fbb4.jpg"></li> <li data-src="http://t03.pic.sogou.com/fbb08be9c131e9cb.jpg"></li> <li data-src="http://t01.pic.sogou.com/b2ecd2ce4e3b9ce4.jpg"></li> <li data-src="http://t04.pic.sogou.com/0509bff02200e0a5.jpg"></li> <li data-src="http://t04.pic.sogou.com/0509bff02200e0a5.jpg"></li> <li data-src="http://t04.pic.sogou.com/e655c4fe49cac8ea.jpg"></li> <li data-src="http://t01.pic.sogou.com/5251ca4e740c3c50.jpg"></li> <li data-src="http://t03.pic.sogou.com/7fe86f66ce211acb.jpg"></li> <li data-src="http://t04.pic.sogou.com/541569b5df134ca6.jpg"></li> <li data-src="http://t01.pic.sogou.com/d34a3f0e46a53e65.jpg"></li> <li data-src="http://t02.pic.sogou.com/78bca85270eb61c3.jpg"></li> </ul> </div> 图片的动态加载就是通过读取li元素，然后获得li元素的data-src属性的值赋予动态创建的图片的src，从而实现了图片的创建。 [javascript] view plaincopy function setImg(index) { var oDiv = document.getElementById('div1'); var oUl = oDiv.children[0]; var aLi = oUl.children; //html5最新属性 if (aLi[index].dataset) { var src = aLi[index].dataset.src; } else { var src = aLi[index].getAttribute('data-src'); } var oImg = document.createElement('img'); oImg.src = src; if (aLi[index].children.length == 0) { aLi[index].appendChild(oImg); } } 那么怎么识别是否在可视区域呢？这里需要一个函数，能够实现获得当前元素距离网页顶部的距离！ [javascript] view plaincopy //获得对象距离页面顶端的距离 function getH(obj) { var h = 0; while (obj) { h += obj.offsetTop; obj = obj.offsetParent; } return h; } 当网页的滚动条滚动时要时时判断当前li的位置！ [javascript] […]
View DetailsJavaScript即将接管Web世界，如雨后春笋版冒出的JavaScript工具更是让web开发者无所适从。 本文我们为大家推荐11款崭露头角但功能强大的JavaScript工具，是追逐web设计新潮流（界面简洁、面向移动、强调互动）中不可或缺的好帮手。 一、Meteor Meteor web应用开发框架定义的七大开发天条为现代软件开发打下良好基础，例如Meteor采用开源社区的方式培育插件资源，其他天条还包括：设计简单的API、仅通过网络传送数据、使用统一的开发语言等。Meteor还开发了一个客户端的本地模拟器。 Meteor是一种新型JavaScript框架，用于WebApp应用程序开发。Meteor的基础构架是Node.JS+MongoDB，它把这个基 础构架同时延伸到了浏览器端，如果App用纯JavaScript写成，JS APIs和DB APIs就可以同时在服务器端和客户端无差异地调用，本地和远程数据通过DDP（Distributed Data Protocol）协议传输。因此部分应用如TODO列表，网络在线和离线下使用功能完全没有差异，动作响应和数据延迟也完全感觉不出来。 二、Epoch 数据可视化是最火的web开发项目，如今已经有很多工具能够在web上展示吸引眼球的数据可视化互动图表，例如D3.js。但Epoch更进一步，在基本的D3代码库的基础上进一步整合，提供更加流畅的体验。通过Epoch你可以向客户展示干净漂亮实时更新的图表。 三、Web Starter Kit 为不同的移动终端开发web应用是一件极为痛苦的事情，Google的Web Starter Kit的目标就是帮助开发者为不同设备开发web应用，例如点击同步、屏幕适配等问题。无论你的用户使用老款iPad还是新款Android手机，代码都能够适应。你只需要勾画出界面，屏幕适配的问题可以交给Web Starter Kit处理，并给出设计建议。 四、Reveal.js Reveal.js 可以看做是HTML5版本的PowerPoint。可以在web页面上以PPT的方式动态呈现信息，如果你的网站想华丽丽地讲故事，那么Reveal能给你最酷的效果。 五、RxJS 静态网页已经成为历史，如今的web设计趋势是预测客户想法并提供更好的互动功能，例如自动填写表单、搜索Wikipedia等。RxJS框架可以很方便地为鼠标和键盘事件提供响应。 六、NodeBB NodeBB是传统BBS论坛的一次进化，提供实时的对话流功能，NodeBB的开发者还增加了很多时髦主题，并支持移动设备屏幕。NodeBB还整合了一些最新的面向触摸屏的web设计功能，例如无限滚动，NodeBB的社区很活跃，不断有新插件出现。 七、GulpJS 从头编写HTML\CSS\Javascript是上个世纪的事情了，如今的JavaScript都是通过CoffeeScript这样的支持句法缩写的编辑器写成的。如果你希望写完JavaScript能够一个工具完成代码清理优化工作，GulpJS就是你的不二之选，GulpJS类似Ant或Maven之于Java。 八、AngularJS Google开发的AngularJS是一个轻量级的，在浏览器中展示信息的框架。ANgularJS从后台服务器收集数据在本地编辑模板用于演示。服务器端代码控制数据存储，而ANgularJS代码负责演示。可以兼容桌面、平板电脑和智能手机浏览器。 九、Odyssey 有了API，如今在网站中加入地图应用变得非常容易，结合地图的内容框互动则需要用到一些工具，CartoDB开发的Odyssey就是一个不错的选择。 十、PlayCanvas 一般来讲，游戏开发与web应用完全是两码事。但先试试，游戏世界的很多工具都可以被用于在网站中增加华丽界面。PlayCanvas就是一个基于WebGL的游戏引擎，结合了物理、光影、音效等工具用于创建一个复杂的界面。 十一、Deb.js 开发中的编码错误无法避免，但不同的解决方法则是决定性的。Deb.js虽然只有1.5KB，但是能够清理控制台窗口，让JavaScript的除错更容易。是Chrome、Opera和Safari内建的除错工具的好搭档。 文章来自IT经理网 from:http://www.oschina.net/news/55219/11-javascript-tools
View Details随着响应式网页设计逐渐进化成每个网站必备的一部分，越来越多的用户界面问题在设计面向手机、平板的网站时涌现。 在下面的展示中，我们展现了15款新生的响应式JQuery代码片段，它们能增强用户在手机、平板或是普通的浏览器上的用户体验， 用户界面类 MultiScroll Multiscroll 是一款强劲的JQuery插件，它能允许你创建分离的、有两个竖直滚动条的页面。它的强劲功效不仅体现在所有现代浏览器上(甚至IE8它也支持)，还适用于移动设备和平板。这款插件能让你即使是在响应式网站上也能利用这个华丽的效果。 如何使用: 实现这个效果很简单。所有你需要做的就是在<head>标签内引入脚本文件，然后把剩下的代码放在<body>标签内。 TourTip TourTip 是一种网页元素的交互式可视化指南。TourTip可以替代静态帮助信息接口或者是解释文本，通过添加一个页面指引，让用户更容易了解产品的新特性和新功 能。TourTip对于那些有关新产品或者介绍服务，又或者是帮助指南的一些介绍性网站或者登录页面都是非常有用的。其直观的界面使其解释任何事情都易如 反掌。 用法： TourTip可以根据用户的需求来定制构建，允许你“玩耍"多个变量，你仅仅只需要根据你的目的或者需求来调整它即可。 jQuery Tilted Page Scroll 这个高级的jQuery代码片段允许你使用一个页面滚动插件来创建一个三维倾斜的滚动效果。这个效果看起来很简单但是它对于你的博客或者是摄影集或者是组合网站来说，是一个非常好的体验。兼容性测试在现在的浏览器都测试通过了，当然不包含IE。 jQuery Tip Cards 该代码片段帮助你创建一个供用户翻阅的卡片布局集合。这个想法是非常有趣，它已经被Google的“Tips”项目实现。这个代码片段有许多不用的用途，你可以用它展示你最新的博客帖子，portfolio items，网页游戏等。 用法： 根据翻转卡的性质，你可以使用栈的方式存储内容，效果非常的棒！在head中连接脚本，同事把回调函数放到footer里。 Slinky.js Slinky.js 是一个用于创建优雅的带堆叠头的滚动导航列表的jQuery插件。当你在浏览器上体验它的时候，它会创建了一个类似移动设备的环境。因为它是轻量级的（大约1KB），它能带给你一个平滑的令人舒适的体验，并且它能与你最喜爱的浏览器的最新版本兼容。 用法： 在jQuery之后，使用script标签引入下载的文件，然后在你想激活Slinky的jQuery元素上调用.slinky()方法。 GoalProgress GoalProgress是一个允许你使用jQuery创建一个动画进度条的插件。填入必填项后，该插件会自动计算你当前的进度，并且用动画效果展示进度条。你可以在显示的数字前后指定显示文字。在各种事件或者活动的捐赠活动上，用该插件来显示捐赠情况是非常棒的。 用法: 你所需要做的就是引用该脚本的样式文件，在页面上创建一个空的html div元素然后初始化该脚本即可。 表单与输入类 Card 如果你在开发一个电子商务项目，这款轻量级却优美的代码片段就是你所需要的。Card 仅仅用一行的代码，你就能展现出用户需要输入的信用卡信息。创建支持4种卡的动画效果，给用户提供直观的体验，所有这一切都是免费与开源的。 如何使用: 在你的HTML中包含并引用需要的文件。初始化脚本然后在你的当前表单中创建或者替换输入的值，从而让它们具有响应式的样式。 Unibox Unibox是一款jQuery插件，它支持通用的搜索框用来提供基于查询的搜索提示。它提供丰富多样的内容展现方式-从链接到图片或者任何其他元数据-这些在用户提交标签后都会被展示。 如何使用： Unibox的安装有一点点复杂但没那么困难。在需要配置的页面引入脚本和CSS文件，并且安装服务端/客户端插件。由于该插件的运行方式是提供搜索提示，所以你除了在客户端安装脚本，在服务端也需要有对应的数据格式来支持。 Vanillabox Vanillabox是一款简单又现代的lightbox式样的JQuery插件，能被用于轻松的建立起一个图像画廊。它有着简单、最小化的设计，适用于所有现代浏览器。它是许多相似功能的插件中安装简单、轻量级的一款，可被用于替换之前已用的插件。 如何使用: 安装非常简单。仅仅把script和css在<head>中导入然后调用脚本就行了。 Media ToneDen Player ToneDen是一款纯js定制的音频播放器。它有一个完全可定制的界面，给你一连串的配置项来提升你的听觉体验。简易简洁的界面是赏心悦目的，并且也不会在页面上带来任何的混乱。 如何使用： 由于展示和播放音乐的方式有许多不同，所以定制播放器的方法也有很多。当谈到播放器的配置项时候，开发者做了一个很棒的工作，使得可以容易的使用它，它确实是相当高级先进。使用脚本来满足基本的需求，或对照文档来使用更多高级的配置。 Pizza Pie Charts 这款代码片段允许你在任何设备上呈现出一个pizza样式的图表。它是一款使用简便的插件，既能和Zurb的响应式框架契合，也能作为单独的脚本而 工作。关于这个插件没有什么可以介绍的，因为它仅有的一个选项就是展示pie或者开发者所称的pizza图表。这款插件十分优秀、方便使用与自定义，以至 于在这篇文章中如果不把它包含进来就是个错误。 用法: 引用css和js文件，然后你就已经拥有了一个基本的pie图表，但是别忘了HTML。 导航类 Fly Side Menu 如果你想创建一个由Airbnb驱动的菜单，这款插件就是你所需要的。它完全免费，兼容主流浏览器与移动设备。 用法: 这款插件给了你一点实验与自定义的空间，但是谨记：基础的选项虽然某种意义上限制不少，但是对于简单场合还是够用了的。 Hashtabber Hashtabber 是一款用于hashchange驱动的标签式内容选择器的JavaScript插件。考虑到它也适用于移动设备，你有多种方式来利用这款插件。它包括了一些预设定的主题以及一些自定义的方法。 用法: 在HTML中分别链接各个文件，然后建立一个HashTabber的section。 Headhesive.js Headhesive.js创建一个按需粘性标题头（ on-demand sticky header）。指定你想要固定的header，剩余的部分就会变得不可思议。使用很简单，有用的代码片段用于创建动画和粘性导航栏。 如何使用： 在你的文件夹里，提供了JavaScript文件和调用它们的脚注。 Anchorific.js Anchorific根据标题标签（header […]
View Details目前来看，JS框架以及一些开发包和库类有如下几个，Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx Dojo （JS library and UI component ）： Dojo 是目前最为强大的j s框架，它在自己的Wiki上给自己下了一个定义，dojo是一个用JavaScript编写的开源的DHTML工具箱。dojo很想做一个“大一统”的 工具箱，不仅仅是浏览器层面的，野心还是很大的。Dojo包括ajax, browser, event, widget等跨浏览器API，包括了JS本身的语言扩展，以及各个方面的工具类库，和比较完善的UI组件库，也被广泛应用在很多项目中，他的UI组件的 特点是通过给html标签增加tag的方式进行扩展，而不是通过写JS来生成，dojo的API模仿Java类库的组织方式。 用dojo写Web OS可谓非常方便。dojo现在已经4.0了，dojo强大的地方在于界面和特效的封装，可以让开发者快速构建一些兼容标准的界面。 优点：库相当完善，发展时间也比较长，功能强大，据说利用dojo的io.bind()可以实现comet，看见其功能强大非一般，得到IBM和SUN的支持 缺点：文件体积比较大，200多KB，初次下载相当慢，此外，dojo的类库使用显得不是那么易用，j s语法增强方面不如prototype。 Prototype （JS OO library）： 是一个非常优雅的JS库，定义了JS的面向对象扩展，DOM操作API，事件等等，以prototype为核心，形成了一个外围的各种各样的JS扩展库，是相当有前途的JS底层框架，值得推荐，感觉也是现实中应用最广的库类（RoR集成的AJAX JS库），之上还有 Scriptaculous 实现一些JS组件功能和效果。 优点：基本底层，易学易用，甚至是其他一些js特效开发包的底层，体积算是最小的了。 缺点：如果说缺点，可能就是功能是他的弱项 Scriptaculous （JS UI component based on prototype）： Scriptaculous 是基于prototype.js框架的JS效果。包含了6个js文件，不同的文件对应不同的js效果，所以说，如果底层用 prototype的话，做js效果用Scriptaculous那是再合适不过的了，连大名鼎鼎的digg都在用他，可见不一般 优点：基于prototype是最大的优点，由于使用prototype的广泛性，无疑对用户书锦上添花，并且在《ajax in action》中就拿Scriptaculous来讲述js效果 缺点：刚刚兴起，需要时间的磨练 yui-ext (JS UI component)： 基 于Yahoo UI的扩展包yui-ext是具有CS风格的Web用户界面组件能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯 javascript代码开发。真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid。许多组件实现了对数据源的支持，例如动态的布局，可编辑的表格控件，动态加载的Tree 控件、动态拖拽效果等等。1.0 beta版开始同Jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。 优点：结构化，类似于java的结构，清晰明了，底层用到了Jquery的一些函数，使整合使用有了选择，最重要的一点是界面太让让人震撼了。 缺点：太过复杂，整个界面的构造过于复杂。 Jquery ： jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优秀的js效果，jQuery可以帮你达到目的！并且简介的语法和高的效率一直是jQuery追求的目标， 优点：注重简介和高效，js效果有yui-ext的选择，因为yui-ext 重用了很多jQuery的函数 缺点：据说太嫩，历史不悠久。 Mochikit ： MochiKit 自称为一个轻量级的js框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发，另外还缓解了浏览器版本之间的不一致性。其中的 MochiKit.DOM 尤其方便，能够以比原始 JavaScript 更友好的方式处理 DOM 对象。MochiKit.DOM 大部分都是针对 XHTML […]
View Details