EasyUi基础学习(一)—基本组件

一、概述

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

     jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的,同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用,相对于extjs更轻量。

jQuery EasyUI有以下特点:

     (1)基于jquery用户界面插件的集合。

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

     (3)EasyUI支持两种渲染方式分别为javascript方式,$(‘#p‘).panel({...})和html标记方式,lass="easyui-panel"。

     (4)支持HTML5(通过data-options属性)。

 

二、加载UI组件的方式

     有两种加载方式: 使用class方式加载、使用JS调用加载。

1.使用class方式加载

     格式:easyui-组件名

<body style="height: 100%;width: 100%" >

          <div class="easyui-dialog" title="标题" style="height: 200px;width: 400px">
              这里是内容
          </div>

  </body>

效果:

     

 

2.使用JS调用加载

JS代码

	$(function(){

		$("#myDialog").dialog({
			title:‘JS调用‘,
			width:400,
			height:200
		});
	});
时间: 2024-10-25 00:02:34

EasyUi基础学习(一)—基本组件的相关文章

EasyUI基础入门之searchbox&amp;progressbar(搜索框和进度条)

easyui基础部分的学习(八大部分)只剩下searchbox和pargressbar.tooltip了,有点小激动呢.本偏文章将对searchbox和pargressbar做一个学习.鉴于两者的内容都不会太多,这里就直接将之合并在一起啦! searchbox 不用过多解释,只要用于用户对数据的搜索.使用$.fn.searchbox.defaults重载默认值. 依赖组件:菜单按钮. searchbox提示用户输入搜索值.它可以设定一个类别菜单,允许用户选择不同的搜索类别.当用户点击确认按钮时将

EasyUI基础入门之Pagination(分页)

前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组件Pagination pagination覆盖默认$.fn.pagination.defaults.Pagination分页同意用户通过分页的方式来浏览数据,它支持可配置的选项,页面导航和页面长度的选择,并且用户能够加入?分页的右边定制button来增强分页功能. 只是pagination是依赖于

JQuery EasyUI框架学习

前言 新项目的开发前端技术打算采用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,需要我这菜鸟对EasyUI框架进行一些基础的入门学习.之后会在学习的过程中将自己遇到的问题和有用的东西记录下来. 关于EasyUI EasyUI框架式基于JQuery的,使用它帮助我们快捷的构建web网页.EasyUI框架是一个简单.易用.强大的轻量级web前端javascript框架.现阶段来说,在开发web项目时,前端的开发我们更喜欢使用

EasyUI基础入门之Parser(解析器)

前言 JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户可以组合使用这些组件,也可以单独使用其中一个.(使用的形式是以插件的方式提供的) EasyUI体系结构 EasyUI所有的插件主要分为六大部分.Base基础.Layout布局.Menu&Button.Form表单.Window窗口等.从最基础的开始先掌握EasyUI基础部分.Base部分包含了八个基础插件分别为: parser(解析器) easyloader(加载器) draggab

EasyUI基础入门之Easyloader(加载器)

在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单加载器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的加载组件所需的js文件,这体现了EasyUI作为轻量级框架对性能的合理掌握(可以动态的加载所需组件),不过一般而言很少使用到easyloader(会给使用者带来一定的难度).那么使用EasyLoader的场景有哪些呢? EasyLoader使用场景 出于性能的考虑,不一次性的加载easyui核心js.css文件,

EasyUI基础入门之Easyloader(载入器)

在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单载入器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的载入组件所需的js文件,这体现了EasyUI作为轻量级框架对性能的合理掌握(能够动态的载入所需组件),只是一般而言非常少使用到easyloader(会给使用者带来一定的难度).那么使用EasyLoader的场景有哪些呢? EasyLoader使用场景 出于性能的考虑,不一次性的载入easyui核心js.css文件

第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件

jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法,,这个组件不依赖于其 他组件. 一.加载方式 //class 加载方式 <a href="http://www.ycku.com" title="这是一个提示信息!" class="easyui-tooltip">Hover Me <

ASP.Net MVC开发基础学习笔记(3):Razor视图引擎、控制器与路由机制学习

首页 头条 文章 频道                         设计频道 Web前端 Python开发 Java技术 Android应用 iOS应用 资源 小组 相亲 频道 首页 头条 文章 小组 相亲 资源 设计 前端 Python Java 安卓 iOS 登录 注册 首页 最新文章 经典回顾 开发 Web前端 Python Android iOS Java C/C++ PHP .NET Ruby Go 设计 UI设计 网页设计 交互设计 用户体验 设计教程 设计职场 极客 IT技术

第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于 DataGrid(数据表格)组件. 一.加载方式 建立一个 JSON 文件 [ { "id": 1, "name": "系统管理", "date": "2015-05-10", &quo