zoukankan      html  css  js  c++  java
  • EasyUI文档学习心得

    概述

    jQuery EasyUI 是一组基于jQuery 的UI 插件集合,它可以让开发者在几乎完全不需要CSS以及复杂的JS代码情况下完成美观且功能强大的Web界面。

    本文主要说明一些如何利用EasyUI文档快速学习的心得。官网文档介绍的比较详细,也可以使用中文文档。

    官网文档:

    http://www.jeasyui.com/tutorial/index.php

    http://www.jeasyui.com/documentation/index.php

    中文官网文档:

    http://www.jeasyui.net/tutorial/

    各版本中文离线文档整合地址:

    http://download.csdn.net/album/detail/343

    为什么说几乎不需要CSS?

    EasyUI中自带了各个组件的CSS样式,并且有多种主题可选。即使默认提供的几种主题不能满足需要,也可以使用官方的主题编辑器进行修改。官方主题编辑器地址:

    http://www.jeasyui.com/themebuilder/index.php

    浏览器兼容性如何?

    支持所有主流浏览器,支持H5,支持扩展。在1.3.5版本后自带了jQuery2.x,所以如果需要支持低版本IE浏览器请使用1.3.5之前版本。

    比较重要的组件

    EasyUI对自己的组件已有分类:Base(基础)、Layout(布局)、Menu and Button(菜单和按钮)、Form(表单)、Windows(窗口)、DataGrid and Tree(表格和树)、Extension(扩展)。

    快速学习的话,可以直接从具体的分类里直接看。如果不想要书写CSS的话,应从Layout开始看,特别是Layout中的Layout部分(它确实是这么分类的)。Base里面包含提示框、进度条等常用组件。

    个人使用最多的是DataGrid and Tree部分。

    学习EasyUI有哪些条件

    必要条件是需要知道一些HTML的标签、基础知识。最好是有JS和jQuery的基础。

    本文大部分内容是基于有JS和jQuery基础的。

    入门示例

    本文主要介绍文档学习,所以入门我就贴一段HTML代码,效果是实现一个可拖拽的对话框。这个示例没有使用自定义的CSS和JS。

    <!DOCTYPE html>
    <html>
    <head>
    <title>jQuery Easy UI</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
    </head>
    <body>
    <div class="easyui-dialog" style="500px;height:250px"
    data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok'">
    Hello World!
    </div>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
    </body>
    </html>

    属性、事件、方法

     文档首页率先说明了属性、事件、方法。因为EasyUI每个组件几乎都有这三个东西,并且API也是通过这三个东西展示的。开篇介绍里需要记住的,调用方法的语法:

    $('selector').plugin('method', parameter); 

    开篇还介绍了如果添加扩展方法,比如为dialog组件添加一个移动的方法:

    $.extend($.fn.dialog.methods, {    
        mymove: function(jq, newposition){    
            return jq.each(function(){    
                $(this).dialog('move', newposition);    
            });    
        }    
    });  

    调用时:

    $('#dd').dialog('mymove', {    
        left: 200,    
        top: 100    
    });  

    EasyUI中的继承

    EasyUI存在继承,在每个组件的开始都会先介绍其继承关系。比如combo组件:

    扩展自$.fn.validatebox.defaults。使用$.fn.combo.defaults重写默认值对象。

    那么知道这个继承关系有什么用?在某些时候需要这个组件的某些属性、事件、方法,但是文档上却查不到,这里你可以试试从其继承链向上查。

    比如datagrid,继承于panel,我想给datagrid设置标题、高度、宽度,但是在datagrid文档中没找到这些属性,这时可以去panel组件文档上找,由于继承的关系,这些属性也是可用的。

    缺点

    EasyUI一直在以版本更新的方式修正自身的缺点,并且在现在的互联网环境仍然存活,但是有些问题不可避免。

    EasyUI闭源,商业版付费,这导致如果核心出现bug难以调试。而且异步直接重写了jQuery的错误处理方法,导致全局ajaxSetup不可用。

    论坛不活跃,有问题可能难以靠别人或者资料解决。

    总结

    EasyUI个人觉得快速开发小型应用以及企业内部软件系统还是比较合适的。因为其闭源(可维护性、安全性差)、过程化的代码结构,开发大型应用上估计不是很合适。

    以后如果有新的心得会继续在此补充。不过现在工作中其实已经用不到EasyUI了,也不知道其以后发展会如何,但是当初使用的时候真的用的很舒服,遇到bug的时候又十分蛋疼。在此我还是希望其越来越好。

  • 相关阅读:
    React PC端悬浮锚点吸顶导航
    LESS 移动端一像素1px线条CSS解决方案
    React Swiper轮播图
    Win10 虚拟机安装mac系统
    ReactNative Windows环境初始化项目
    Win10 安装AndroidStudio
    Win10 环境安装JDK
    【mysql基础学习篇】mysql服务器架构简介
    uniapp封装小程序雷达图组件实现
    这12道Spring面试题要是还不会的话?就白干了!
  • 原文地址:https://www.cnblogs.com/yaoh/p/5224857.html
Copyright © 2011-2022 走看看