当前位置:  编程技术>WEB前端
本页文章导读:
    ▪21个强大的Javascript框架      我们很早之前介绍过7个常用的Javascript框架,本文则扩展范围,收录21个强大的javascript框架,看看有没有你没听说过的。 1. Dojo (演示地址) Dojo是一个强大的面向对象JavaScript框架。主要由三大.........
    ▪javascript 实用函数      function addFavorite(url, title) { //将网页添加到收藏addFavorite(window.location,document.title) try{ window.external.addFavorite(url, title); }catch(e){ try{ window.sidebar.addPanel(title, url, "");.........
    ▪源码分享之带滑块的滚动条      采用的fd-slider的js代码,该网址是:https://github.com/freqdec/fd-slider 其实这个库可以实现好几种效果,我只取出了一种 效果图: 源码文件有如下列表: 除了index.html之外,其他的都只要下载.........

[1]21个强大的Javascript框架
    来源: 互联网  发布时间: 2013-11-06

我们很早之前介绍过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. Jquery

jquery是一个快速、简洁的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
4. MooTools (演示地址)

MooTools是一个简洁,模块化,面向对象的JavaScript框架。它能够帮助你更快,更简单地编写可扩展和兼容性强的JavaScript代码。 Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的功能要比Prototype.js多,整体设计也比Prototype.js要相对完善,功能更强大,比如增加了动画特效、拖放操作等等。

5. Qooxdoo (演示地址)

qooxdoo是一个用于开发Ajax应用程序的GUI框架。不需要HTML,CSS,DOM知识,采用面向对象的JavaScript API就能够开发出类似于Window桌面风格的Web应用程序。

6. Prototype

prototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。

7. script.aculo.us

script.aculo.us是一个易于使用,支持多种浏览器,用于增强Prototype的JavaScript框架。script.aculo.us包含:动画框架(animation framework),拖放(drag and drop), Ajax控件,DOM工具,单元测试等。

8. ExtJS

ExtJS是一个跨浏览器,用于开发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 Toolkit

Silverlight Toolkit是一组用于增加Silverlight现有功能的控件,组件和工具类。包括:

  • AutoCompleteBox
  • NumericUpDown
  • Viewbox
  • Expander
  • ImplicitStyleManager
  • Charting
  • TreeView
  • DockPanel
  • WrapPanel
  • Label
  • HeaderedContentControl
  • HeaderedItemsControl
12. PHP.JS

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框架 (演示地址)

  • 丰富的组件库
  • 简单,强大,灵活的可编程性
  • 强大的可视化设计支持 : IDE
  • 完善的文档和细致的教程: Api doc
  • 小体积 : javascript   css一共只有100K
  • 专业的团队,强大细致的技术支持 : 全天候的服务, 您可以随时联系我们解决您的疑难杂症.
  • 高级UI : 除常规组件外,提供甘特图,日历,文档管理器和excel这样的高级组件.
  • 极限的性能 : edo做出来的东西,初始化速度达到理论的极限值!组件的操作性能也是极速!
  • 对传统UI框架的突破 : 随着界面的复杂度增加,浏览器内的DOM元素量增多,导致用户操作越来越慢,UI的响应越来越差,甚至导致做出来的界面慢的无法运行. edo天然做了这方面的优化,强大的”动态”机制,即时您需要支持1万行N(N>=100)列的表格组件,在edo中也已经成为现实! 性能!是edo的一大杀手锏!
  • 16. Spinelz

    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
    18. Scripty2 (演示地址)

    Scripty2 一个完全重写的Script.aculo.us 脚本库,增

        
    [2]javascript 实用函数
        来源:    发布时间: 2013-11-06
    function addFavorite(url, title) {
    //将网页添加到收藏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
        
    [3]源码分享之带滑块的滚动条
        来源: 互联网  发布时间: 2013-11-06

    采用的fd-slider的js代码,该网址是:https://github.com/freqdec/fd-slider

    其实这个库可以实现好几种效果,我只取出了一种

    效果图:



    源码文件有如下列表:


    除了index.html之外,其他的都只要下载下来就好,下载路径:  源码下载

    作者:backgarden_straw 发表于2013-3-22 21:31:33 原文链接
    阅读:0 评论:0 查看评论

        
    最新技术文章:
    ▪css white-space:nowrap属性用法(可以强制文字不...
    ▪IE里button设置border:none属性无效解决方法
    ▪border:none与border:0使用区别
    ▪html清除浮动的6种方法示例
    ▪三个不常见的 HTML5 实用新特性简介
    ▪css代码优化的12个技巧
    ▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
    编程语言 iis7站长之家
    ▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
    ▪小技巧处理div内容溢出
    ▪html小技巧之td,div标签里内容不换行
    ▪纯CSS实现鼠标放上去改变文字内容
    ▪li中插入img图片间有空隙的解决方案
    ▪CSS3中Transition属性详解以及示例分享
    ▪父div高度不能自适应子div高度的解决方案
    ▪告别AJAX实现无刷新提交表单
    ▪从零学CSS系列之文本属性
    ▪HTML 标签
    ▪CSS3+Js实现响应式导航条
    ▪CSS3实例分享之多重背景的实现(Multiple background...
    ▪用css截取字符的几种方法详解(css排版隐藏溢...
    ▪页面遮罩层,并且阻止页面body滚动。bootstrap...
    ▪CSS可以做的几个令你叹为观止的实例分享
    ▪详细分析css float 属性以及position:absolute 的区...
    ▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
    ▪CSS小例子(只显示下划线的文本框,像文字一...
    ▪可以给img元素设置背景图
    ▪不通过JavaScript实现的自动滚动视差效果
    ▪div+CSS 兼容小摘
    ▪CSS的inherit与auto使用分析
     


    站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3