• 热门专题

轻量级开源框架EFW框架Web前端开发之JqueryEasyUI

作者:kakake  发布日期:2014-09-24 21:33:31
Tag标签:框架  轻量级  前端  
  • 回《【开源】EFW框架系列文章索引》       

    EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA

    EFW框架实例源代码下载:http://pan.baidu.com/s/1o6MAKCa

     

           前言:EFW框架主要用于行业软件软件开发,所以软件的界面需要体现专业、漂亮、风格统一的效果;在Web方便这种界面框架还是有不少,如强大的EXT,基于Jquery的JqueryUI,还有一些国产的也都比较漂亮;而EFW框架中推荐的是JqueryEasyUI,为什么选择它了,一是界面风格比较合适,控件也很全,已经满足系统的功能;二是JqueryEasyUI是基于Jquery,对于它的编码方式是非常舒服的,而且整个框架够轻量级;三是它的学习成本低,实例代码很全,花得几个小时熟悉一下就会使用;以前在项目中有用过ExtJS做界面开发,说实话用得比较痛苦,它那种编码方式不是一般人能接受的,界面都是用JS代码编写的,看起来不太直观,特别大家编码又不是太规范,日积月累最后一个页面js也是老长,最后出现对应闭合符号不对都要找半天;现在的项目都是使用JqueryEasyUI开发,那叫一个舒服啊;当然如果还是觉得JqueryEasyUI不够强大,你可以在EFW框架中非常方便的扩展你自己的界面框架;

     本文要点:

    1.JqueryEasyUI介绍

    2.JqueryEasyUI常用控件使用详解

    3.EFW框架中使用JqueryEasyUI开发的编码风格

    4.在JqueryEasyUI基础上自定义的控件

    1.JqueryEasyUI介绍

    jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等等。jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的。一些功能也足够开发者使用,相对于extjs更轻量。

       特点

    1 基于jquery用户界面插件的集合

    2 为一些当前用于交互的js应用提供必要的功能

    3 使用 EasyUI你不需要写很多的javascript代码,通常只需要写HTML标记来定义用户界面即可

    4 支持HTML5

    5 开发产品时可节省时间和资源

    6 简单,但很强大

    7 支持扩展,可根据自己的需求扩展控件

    8 目前各项不足正已版本递增的方式不断完善

     

    2.JqueryEasyUI常用控件使用详解

    接下来我们结合EFW框架来详细讲解JqueryEasyUI的控件如何使用;同时根据自己结合自己对它的理解挑选几个有代表性的控件;页面中使用控件前必须先引用几个JqueryEasyUI的文件;

     

    1)Layout布局控件

    学习一套控件首先要掌握的就是布局控件,分别上下、左右、居中等,还有嵌套布局,比如在居中面板再分为上下布局;布局用得好对以后得界面调整是非常方便,代码也看上去更加清晰漂亮;编写一个<div>标签且class="easyui-layout",这样就表示把div层变成一个布局控件,所有其他控件的代码编写都是这种方式使用;

     

     

    2)datagrid表格控件

    表格控件在系统中用得最多的一个控件,在Winform中就有datagridview表格控件,只需将DataTable数据绑定给DataGridView就可以显示数据非常简单;而datagrid是bs的,肯定没有这么方便,但EFW框架也把它封装得使用起来非常方便;首先编写datagrid界面代码,定义好显示列,然后在js代码中给控件的url属性指定请求地址,利用jquery的ajax发送http请求调用后台WebController,返回Json数据显示在datagrid控件;

     

    3)Dialog弹窗控件

    这个控件也是用的非常多的,比如新增、修改操作的时候更偏向于弹出一个小界面进行操作;

     

    其他更多控件学习参考:http://www.jeasyui.com

    3.EFW框架中使用JqueryEasyUI开发的编码风格

    JqueryEasyUI代码编写有两种风格,一种是用html标签编写界面代码,还有一种可以编写js代码动态生成界面,从上面的控件举例就能看出,个人坚持一定要采用第一种方式编写界面代码,js代码只是一些数据请求操作;

     

    4.在JqueryEasyUI基础上自定义的控件

    介绍两个自己的两个控件,是基于JqueryEasyUI之上扩展的,给需要自己开发控件的提供两个示例,有个参考的东西;一个是在日期控件上的扩展控件,可以按月查、按季度查、按上下半年查、按年度查;另一个是把表格控件用卡片的形式展现;代码放在EFWWeb项目中的WebPlugin目录。

     

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规