jQueryEasyUI

素颜马尾好姑娘i 2022-08-26 13:21 143阅读 0赞

jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

jQuery EasyUI中文社区：bbs.jeasyuicn.com

例子网站：http://www.open-open.com/news/view/757da6

学习布局篇：http://www.kwstu.com/ArticleView/kwstu\_20139413501290

## 1简介 ##

jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的。一些功能也足够开发者使用，相对于extjs更轻量。

jQuery EasyUI有以下特点：

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

[![d4628535e5dde711b6d317cba5efce1b9d16618d.jpg][]][d4628535e5dde711b6d317cba5efce1b9d16618d.jpg 1]

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

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

4、支持HTML5

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

6、简单，但很强大

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

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

## 2插件 ##

jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的 datagrid（数据网格）、treegrid（树形表格）、 panel（面板）、combo（下拉组合）等等。 用户可以组合使用这些组件，也可以单独使用其中一个。

插件列表如下：

<table> 
 <tbody> 
  <tr> 
   <th align="left">分类</th> 
   <th align="left">插件</th> 
  </tr> 
  <tr> 
   <td align="left">Base（基础）</td> 
   <td align="left"> 
    <ul> 
     <li> 
      <div>
        Parser 解析器 
      </div> </li> 
     <li> 
      <div>
        Easyloader 加载器 
      </div> </li> 
     <li> 
      <div>
        Draggable 可拖动 
      </div> </li> 
     <li> 
      <div>
        Droppable 可放置 
      </div> </li> 
     <li> 
      <div>
        Resizable 可调整尺寸 
      </div> </li> 
     <li> 
      <div>
        Pagination 分页 
      </div> </li> 
     <li> 
      <div>
        Searchbox 搜索框 
      </div> </li> 
     <li> 
      <div>
        Progressbar 进度条 
      </div> </li> 
     <li> 
      <div>
        Tooltip 提示框 
      </div> </li> 
    </ul> </td> 
  </tr> 
  <tr> 
   <td align="left">Layout（布局）</td> 
   <td align="left"> 
    <ul> 
     <li> 
      <div>
        Panel 面板 
      </div> </li> 
     <li> 
      <div>
        Tabs 标签页/选项卡 
      </div> </li> 
     <li> 
      <div>
        Accordion 折叠面板 
      </div> </li> 
     <li> 
      <div>
        Layout 布局 
      </div> </li> 
    </ul> </td> 
  </tr> 
  <tr> 
   <td align="left">Menu（菜单）与 Button（按钮）</td> 
   <td align="left"> 
    <ul> 
     <li> 
      <div>
        Menu 菜单 
      </div> </li> 
     <li> 
      <div>
        Linkbutton 链接按钮 
      </div> </li> 
     <li> 
      <div>
        Menubutton 菜单按钮 
      </div> </li> 
     <li> 
      <div>
        Splitbutton 分割按钮 
      </div> </li> 
    </ul> </td> 
  </tr> 
  <tr> 
   <td align="left">Form（表单）</td> 
   <td align="left"> 
    <ul> 
     <li> 
      <div>
        Form 表单 
      </div> </li> 
     <li> 
      <div>
        Validatebox 验证框 
      </div> </li> 
     <li> 
      <div>
        Combo 组合 
      </div> </li> 
     <li> 
      <div>
        Combobox 组合框 
      </div> </li> 
     <li> 
      <div>
        Combotree 组合树 
      </div> </li> 
     <li> 
      <div>
        Combogrid 组合网格 
      </div> </li> 
     <li> 
      <div>
        Numberbox 数字框 
      </div> </li> 
     <li> 
      <div>
        Datebox 日期框 
      </div> </li> 
     <li> 
      <div>
        Datetimebox 日期时间框 
      </div> </li> 
     <li> 
      <div>
        Calendar 日历 
      </div> </li> 
     <li> 
      <div>
        Spinner 微调器 
      </div> </li> 
     <li> 
      <div>
        Numberspinner 数值微调器 
      </div> </li> 
     <li> 
      <div>
        Timespinner 时间微调器 
      </div> </li> 
     <li> 
      <div>
        Slider 滑块 
      </div> </li> 
    </ul> </td> 
  </tr> 
  <tr> 
   <td align="left">Window（窗口）</td> 
   <td align="left"> 
    <ul> 
     <li> 
      <div>
        Window 窗口 
      </div> </li> 
     <li> 
      <div>
        Dialog 对话框 
      </div> </li> 
     <li> 
      <div>
        Messager 消息框 
      </div> </li> 
    </ul> </td> 
  </tr> 
  <tr> 
   <td align="left">DataGrid（数据网格）与 Tree（树）</td> 
   <td align="left"> 
    <ul> 
     <li> 
      <div>
        Datagrid 数据网格 
      </div> </li> 
     <li> 
      <div>
        Propertygrid 属性网格 
      </div> </li> 
     <li> 
      <div>
        Tree 树 
      </div> </li> 
     <li> 
      <div>
        Treegrid 树形网格 
      </div> </li> 
    </ul> </td> 
  </tr> 
 </tbody> 
</table>

[d4628535e5dde711b6d317cba5efce1b9d16618d.jpg]: /images/20220824/e74271272c9849c8a1e4eed0d4162666.png
[d4628535e5dde711b6d317cba5efce1b9d16618d.jpg 1]: http://baike.baidu.com/picview/4307296/4307296/0/d4628535e5dde711b6d317cba5efce1b9d16618d.html?fr=lemma