EasyUI入门

EasyUI概述

一、解压包中各个目录的说明

1、demo

demo目录是EasyUI各个组件的演示例子。

2、demo-mobile

这个目录是EasyUI各个组件在移动端开发的演示例子。

3、locale

这个目录是EasyUI对于各个国家的语言包。

  • 简体中文的语言包是:easyui-lang-zh_CN.js,
  • 繁体中文的语言包是:easyui-lang-zh_TW.js,
  • 英语的语言包(默认):easyui-lang-en.js

4、plugins

此目录的EasyUI使用的插件js代码

5、src

此目录是部分EasyUI插件的js源码。

6、themes

此目录是EasyUI主题文件。

7、根目录

根目录下的文件有:

文件说明
changlog.txtEasyUI版本更新说明。
easyloader.jsEasyUI的模块加载器,用来自动帮助自动加载EasyUI文件。
jquery.easyui.min.js全部easyui核心和插件的集合文件,一般可以直接加载这个文件而不用一个个加载那些插件。
jquery.easyui.mobile.min.js同上,不同的是适用于移动端的。
jquery.min.jsjQuery库文件,因为EasyUI是基于jQuery的,所以也得加载jQuery文件。
license_freeware.txt免费使用EasyUI的声明(只能用于非盈利目的)。
readme.txt商业用途许可说明。

二、加载EasyUI

通常情况下,我们只需要加载几个文件就够了:

<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>

第一个和第二个是主题的css样式文件,上面的代码是使用默认主题,我们也很容易切换到其他主题,只要修改defult即可。

第三个是jQuery库文件,一般使用EasyUI解压包里面的jQuery文件即可。

第四个是EasyUI核心和组件的集合js文件,加载这个文件会加载所有的EasyUI组件,就不需要一个个导入组件的js文件了。

我们也可以使用EasyUI的EasyLoader插件,这个插件可以帮助我们自定义加载EasyUI模块。

三、使用EasyUI的组件的方法

一般有两种方式来使用EasyUI组件。

1、通过在html元素直接设置class为EasyUI组件预定义的名称即可,EasyUI就会自动在页面加载时为元素渲染样式。

例子:我们来创建一个面板(panel):

<div class="easyui-panel" style="width:500px;height:200px;padding:10px"
    title="我的面板" data-options="iconCls:'icon-ok',collapsible:true">
    创建的第一个面板
</div>

2、通过js代码来使用EasyUI组件。使用方法:

$('selector').plugin();

即先通过jQuery选定要渲染的元素,然后调用相应的组件即可,这里的plugin是组件的名字。

例子:用js使用EasyUI的面板组件:

<div id="my-panel" style="padding:10px">
    创建的第一个面板
</div>

js代码:

$(function(){
    $("#my-panel").panel({
        width:500,
        height:200,
        title:'我的面板',
        iconCls:'icon-ok',
        collapsible:true
    });
});

补充

1、collapsible

boolean 定义是否显示折叠按钮

2、modal: true

窗体分为模式的和非模式的。以模式方式打开一个窗口,你只能在将其关闭以后才能操作另外的窗口,但非模式窗口显示时,你可以同时操作这两个窗口。

3、icon.css

只有引入这个样式文件,才可以显示对应的图标。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值