EasyUI系列学习(一)-入门

前面介绍过EasyUI是一个前段框架,开发之前需要导入底层包:我这里采用的是EasyUI 1.4版本~ 今天主要是搭建一个EasyUI的环境,同时做一个登陆页面... 环境搭建 导入需要的文件到项目中,我这里只导入需要用到的一些文件: EasyUI 有两种方式创建一个表单,一种是通过HTML样式创建,另一种则是通过js来创建,这里推荐第二种js创建. 一则js创建实现了分离,而来避免不必要的验证,比如dom没加载完成,用户点击了按钮触发某些事件等... 首先采用第一种方式创建一个form表单(这

jQuery EasyUI不是什么太高级的东西,就是用jQuery写了很多方法.定义了很多属性,通过调用这些方法.属性,可以达到一些特定的效果,然后我们再根据具体需求微调就好了.至少需要导入两个样式表和两个js文件: <link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/default/easyui.css" /> <link type=&

一.加载 1.class加载 <div class="easyui-accordion" style="width:300px;height:200px"> <div title="accordion1">accordion1</div> <div title="accordion2">accordion2</div> <div title="acco

一.创建组件 <div class="easyui-tabs" style="width:500px;height:250px"> <div title="tab1">tab1</div> <div title="tab2">tab2</div> </div> 二.属性 1. <div id="tbs"> <div t

一.创建组件 1.class加载 <div class="easyui-progressbar"></div> 2.js加载 <div id="pb"></div> <script> $(function () { $("#pb").progressbar(); }) </script> 二.属性 <div id="pb"></div&g

一.创建组件 0.Tooltip不依赖其他组件 1.使用class加载 <a href="#" class="easyui-tooltip" title="这是一个提示信息">Hover me</a> 2.使用js加载 <a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <scrip

一.创建拖动组件 0.Draggable组件不依赖于其他组件 1.使用标签创建 <div class="easyui-draggable" id="box" style="width: 200px; height: 100px; left: 100px; background: orange">拖动组件</div> 2.使用js创建 <div id="box" style="width:

一.创建组件 1.使用标签创建可变大小的窗口 <div id="rBox" class="easyui-resizable" style="width: 200px; height: 100px; left: 100px; background:cyan"></div> 2.使用JavaScript创建可变大小的窗口 <div id="rBox" style="width: 200px;

一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.4.1 下载完成之后,得到压缩包,解压后,得到一个[jquery-easyui-1.4.1]文件夹,里面有如下图所示的文件: 二.EasyUI入门 2.1.引入必要的js和css样式文件 要想在页面中使用EasyUI,那么首先要做的就是在页面中引入必要js和css样式文件,以在jsp文件中使用EasyUI为例,文件引