EasyUI的下载与使用
来源:互联网 发布:家居网络市场调研目标 编辑:程序博客网 时间:2024/05/18 02:44
官网下载地址
http://www.jeasyui.com/download/index.php
下载以后,我们会得到一个压缩包,解压以后,目录结构是这样的:
解压包中各个目录的说明
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. 根目录
根目录下的文件有:
加载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组件。
第一种是通过在html元素直接设置class为EasyUI组件预定义的名称即可,EasyUI就会自动在页面加载时为元素渲染样式。
例子:我们来创建一个面板(panel):
<div class="easyui-panel" style="width:500px;height:200px;padding:10px;" title="我的面板" data-options="iconCls:'icon-ok',collapsible:true"> 我的CSDN博客地址为: <a href="http://blog.csdn.net/luoluozlb?viewmode=contents">http://blog.csdn.net/luoluozlb?viewmode=contents</a></div>
效果图:
第二种是通过js代码来使用EasyUI组件。使用方法:
$('selector').plugin();
即先通过jQuery选定要渲染的元素,然后调用相应的组件即可,这里的plugin
是组件的名字。
例子:用js使用EasyUI的面板组件:
首先是html:
<div id="my-panel" style="padding:10px;"> 我的CSDN博客地址为: <a href="http://blog.csdn.net/luoluozlb?viewmode=contents">http://blog.csdn.net/luoluozlb?viewmode=contents</a> </div>
js代码:
$('#my-panel').panel({ width: 500, height: 150, title: '我的面板', collapsible:true, });
效果图:
- EasyUI的下载与使用
- 使用Jquery+EasyUI框架开发项目+下载+帮助--EasyUI的简介
- JREX 的使用与下载
- lukeall的下载与使用
- dtree的下载与使用
- 关于easyui的datagrid与combobox结合使用的问题
- 框架笔记---EasyUi Datagrid的JavaScript创建方式与使用
- 使用 jQuery EasyUI 的初步感觉与思考总结
- jquery-easyui的使用
- easyui tabs的使用
- EasyUI的简单使用
- easyUI的使用
- easyui的tooltip使用
- Easyui的使用总结
- easyui Tree的使用
- EasyUI的tabs使用
- easyUI的使用
- 浅谈EasyUI的使用
- 汉诺塔系列2
- oracle-where,group by,having order by 详细使用方法
- HTML常用标签属性(一)
- 集合框架_集合的遍历之迭代器遍历
- 纯CSS代码导航栏渐变下拉菜单
- EasyUI的下载与使用
- 怎么简化caffe(一)
- oracle10g监听
- 豆腐干豆腐干
- qqqqq
- sqlplus常用命令
- oracle-日常笔记
- 怎样写代码
- ”戏“说java—异常及异常处理概述