我们很早之前介绍过7个常用的Javascript框架,本文则扩展范围,收录21个强大的javascript框架,看看有没有你没听说过的。
1. Dojo (演示地址)Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成:Core、Dijit、DojoX。Core提供ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤,基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件:DateGrid,charts,离线应用,跨浏览器矢量绘图等。
2. Jqueryjquery是一个快速、简洁的JavaScript框架,帮助你简化查询DOM对象,处理事件,制作动画,和处理Ajax交互过程。利用jQuery将改变你编写JavaScript代码的方式。原先用20行代码完成的功能,jQuery用10行就可以轻松搞定。
3. Yahoo! User Interface Library (演示地址)Yahoo! User Interface (YUI) Library是一组采用DOM scripting,Dhtml和Ajax等技术开发的Web UI控件和工具。当前提供的控件有:
- AutoComplete
- Button
- Calendar
- Charts
- Color Picker
- Container(包括:Module、Overlay、Panel、Tooltip、Dialog、SimpleDialog)
- DataTable
- ImageCropper
- Layout Manager
- Menu
- Rich Text Editor
- Slider
- TabView
- TreeView
- Uploader
MooTools是一个简洁,模块化,面向对象的JavaScript框架。它能够帮助你更快,更简单地编写可扩展和兼容性强的JavaScript代码。 Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的功能要比Prototype.js多,整体设计也比Prototype.js要相对完善,功能更强大,比如增加了动画特效、拖放操作等等。
5. Qooxdoo (演示地址)qooxdoo是一个用于开发Ajax应用程序的GUI框架。不需要HTML,CSS,DOM知识,采用面向对象的JavaScript API就能够开发出类似于Window桌面风格的Web应用程序。
6. Prototypeprototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。
7. script.aculo.usscript.aculo.us是一个易于使用,支持多种浏览器,用于增强Prototype的JavaScript框架。script.aculo.us包含:动画框架(animation framework),拖放(drag and drop), Ajax控件,DOM工具,单元测试等。
8. ExtJSExtJS是一个跨浏览器,用于开发RIA(Rich iInternet Application)应用的JavaScript框架。提供:高性,可定制的Web UI控件库。良好的设计、丰富的文档和可扩展的组件模型。
9. Mocha (演示地址)Mocha是一个构建在Mootools Javascript框架上的web应用程序UI库。Mocha GUI组件由canvas标记产生。
10. Rich Ajax Framework (演示地址)Rico是一个面向对象的JavaScript框架,用于开发RIA应用程序。它实现了Grid,Calendar,Tree,Accordion等控件。简化Ajax处理,拖放支持,提供幻灯片展示效果等。
11. Silverlight ToolkitSilverlight Toolkit是一组用于增加Silverlight现有功能的控件,组件和工具类。包括:
- AutoCompleteBox
- NumericUpDown
- Viewbox
- Expander
- ImplicitStyleManager
- Charting
- TreeView
- DockPanel
- WrapPanel
- Label
- HeaderedContentControl
- HeaderedItemsControl
PHP.JS是一个开源项目,它将PHP中的部分函数功能移植到javascript中。只要在你的项目里包括这个php.js库文件,你就可以在客户端浏览器上运行你所熟悉的PHP函数了。比如md5(),date(),mktime(),base64_decode()。
该项目还提供了javascript原生并不支持的一些功能,比如file_get_contents(), mktime(), serialize()等
13. Glow (演示地址)Glow是由BBC广播公司开发的一个开源JavaScript框架,提供的功能与jQuery、MooTools等框架相似。它除了提供一些常用的功能和解决跨浏览器的问题之外,还提供一组Web UI控件.
14. UIZE JavaScript Framework (演示地址)UIZE JavaScript Framework是一个强大、开源、面向对象的JavaScript框架。支持widgets、AJAX、DOM、模板等。
15. EdoJS框架 (演示地址)Spinelz是一个JavaScript库,使Web开发人员创建丰富Internet应用程序。Spinelz基于script.aculo.us 。 提供的功能是利用一些script.aculo.us的ajax和动画效果使价值最大值。
17. June Framework (演示地址)基于Core核心库的一个小巧的JS框架,它的作者是 Kevin Yank 和 Cameron Adams。开发人员可以将这个框架引入自己的项目中,不必担心与其它JS库发生冲突,因为JUNE是它独特的命名空间。
JUNE 具有强大的支持功能:
- DOM 选择 (例如: JUNE.Dom.getByTags/getByClass/getByAttribute),
- DOM 操作 (例如: JUNE.Dom.insertBefore/insertAfter/removeChild
Scripty2 一个完全重写的Script.aculo.us 脚本库,增
//将网页添加到收藏addFavorite(window.location,document.title)
try{
window.external.addFavorite(url, title);
}catch(e){
try{
window.sidebar.addPanel(title, url, "");
} catch (e) {
alert("加入收藏失败,请使用Ctrl+D进行添加");
}
}
}
function setHomepage(obj,url) {
// setHome(this, window.location)
try {
obj.style.behavior = 'url(#default#homepage)';
obj.setHomePage(url);
} catch (e) {
if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert('此操作被浏览器拒绝!\n请在浏览器地址栏输入"about:config"并回车\n然后将 [signed.applets.codebase_principal_support]的值设置为"true",双击即可。');
}
var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
prefs.setCharPref('browser.startup.homepage', vrl);
}
}
}
function boxMove(box){
//可移动的层
var w = box.scrollWidth,h = box.scrollHeight;
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
var moveX = 0,moveY = 0,moveTop = 0,moveLeft = 0,moveable = false;
box.onmousedown = function(e){
moveable = true;
e = window.event?window.event:e;
moveX = e.clientX-box.offsetLeft;
moveY = e.clientY-box.offsetTop;
box.style.zIndex++;
}
document.onmousemove = function(e){
if(moveable){
e = window.event?window.event:e;
var x = e.clientX - moveX;
var y = e.clientY - moveY;
if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight)){
box.style.left = x + "px";
box.style.top = y + "px";
box.style.margin = "auto";
}
}
}
document.onmouseup = function (){moveable = false;};
}
function getHtmlRoot(){
/*获得html文档的根元素*/
if(document.compatMode.toLowerCase()=="css1compat"){
htmlRoot = document.documentElement;
}else{
htmlRoot = document.body;
}
return htmlRoot;
}
function showWindow(boxId, closeId, showBg){//弹窗
htmlRoot = getHtmlRoot();
box = document.getElementById(boxId);
boxId = '#' + boxId;
closeId = '#' + closeId;
showBox = $(boxId);
showBox.show();
z_index = 20;
moveLeft = (htmlRoot.clientWidth- box.clientWidth)/2 + htmlRoot.scrollLeft +'px';
moveTop = (htmlRoot.clientHeight - box.clientHeight)/2 + htmlRoot.scrollTop;+'px';
showBox.css({position:'absolute', left:moveLeft,zIndex:z_index, top:moveTop});
boxMove(box);
if(showBg){
objMask = document.createElement("div");
objMask.className = "BoxMask";
htmlRoot.appendChild(objMask);
objMask.style.cssText += 'position:absolute;top:0; left:0;filter:Alpha(Opacity=50);opacity:0.5;background:#AAA;';
objMask.style.zIndex = z_index -1;
objMask.style.width = htmlRoot.clientWidth + 'px';
objMask.style.height = htmlRoot.scrollHeight + htmlRoot.scrollTop + 'px';
}
$(closeId).click(function(){
showBox.hide();
mybg.style.display = "none";
});
$('.closeBtn').click = function(){
showBox.hide();
mybg.style.display = "none";
};
}
function getFormQuery(formId){
/*生成查询字串*/
formObj = document.getElementById(formId);
var i, queryString = "", and = "", itemValue;
for(i = 0; i<formObj.length; i++ ){
var item = formObj[i];
if ( item.name!='' ){
if(item.type == 'select-one'){
itemValue = item.options[item.selectedIndex].value;
}else if ( item.type=='checkbox' || item.type=='radio'){
if ( item.checked == false ){ continue; }
itemValue = item.value;
}else if ( item.type == 'button' || item.type == 'submit' || item.type == 'reset' || ite
采用的fd-slider的js代码,该网址是:https://github.com/freqdec/fd-slider
其实这个库可以实现好几种效果,我只取出了一种
效果图:
源码文件有如下列表:
除了index.html之外,其他的都只要下载下来就好,下载路径: 源码下载