jQuery EasyUI 简介

简介

jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。

特点：

①easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。

②easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。

③使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。

④HTML 网页的完整框架。

⑤easyui 节省了开发产品的时间和规模。

⑥easyui 非常简单，但是功能非常强大。

 

当然在使用 EasyUI之前我们需要导入一些必须的css和js文件

<head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css">   
        <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css">   
        <script type="text/javascript" src="easyUI/jquery.min.js"></script>   
        <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script>  
        <link rel="stylesheet" type="text/css" href="easyUI/locale/easyui-lang-zh_CN.js"/>
        <style type="text/css">
            
            
        </style>
    </head>

这样下面我们就可以使用我们的EasyUI了

首先，我们来创建一个简单的面板

<div id="p" class="easyui-panel" title="My Panel"     
        style="width:500px;height:150px;padding:10px;background:#fafafa;"   
        data-options="iconCls:'icon-save',closable:true,    
                collapsible:true,minimizable:true,maximizable:true">   
    <p>panel content.</p>   
    <p>panel content.</p>   
</div>

这样一个简单的可以折叠的面板就创建好了

接下来我们通过简单的js代码来实现面板上的几个工具栏

<div id="p" style="padding:10px;">    
    <p>panel content.</p>    
    <p>panel content.</p>    
</div>    
   
$('#p').panel({    
  width:500,    
  height:150,    
  title: 'My Panel',    
  tools: [{    
    iconCls:'icon-add',    
    handler:function(){alert('new')}    
  },{    
    iconCls:'icon-save',    
    handler:function(){alert('save')}    
  }]    
});

注：几个常用属性

iconCls：这是EasyUI自带的图标，通过该属性可以使用EasyUI为我们提供的各种类型的图标

width、height：用来设置面板的宽和高

tools：使用这个属性我们可以自定义的使用各种工具

面板如下：

同时当加载成功的时候让我们通过ajax加载面板内容并显示一些消息。

$('#p').panel({    
    href:'content_url.php',    
    onLoad:function(){    
        alert('loaded successfully');    
    }    
});

这样，我们通过EasyUI可以很快的实现一个带有数据交互功能的面板

 

posted @ 2017-06-25 21:27  阿呆啊-  阅读(367)  评论(0)  编辑  收藏  举报