这两天看了下easyui的教学先说说自己的一些小小理解吧！

----在使用easyui中也遇到了一个问题 ：
　　Uncaught TypeError：cannot call method ‘offset’ of undefined//为方法声明...
　　后来在百度上搜索相关问题经发现，这是easyui 的包被修改了导致一些样式除了问题报的错...

　1.   引入easyui主要文件：

　　

<script type="text/javascript" src="easyword/jEasyUi/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="easyword/jEasyUi/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyword/jEasyUi/locale/easyui-lang-zh_CN.js"></script> 
<link href="easyword/jEasyUi/themes/default/easyui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="easyword/jEasyUi/themes/icon.css" />

　2.　首先布局按照：north（北）、south（南）、east（东）、west（西）、center（中）

　　　　例：

<body class="easyui-layout">
<div data-options="region:'north',上北 title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'下南Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:' 右东East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:' 左西 West',split:true" style="width:100px;"></div>
<div data-options="region:'  中 center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>

　　在写分页插件时 在手册好像没看见这个属性：layout：分页控件布局定义，布局选项可以包含一个或多个值

1.list（页面显示条数列表）、2.sop（页面按钮分割线） 、3.first（首页按钮）、4.prev（上一页按钮）、

5. next（下一页按钮）、6.last（尾页按钮）、7.refresh（刷新按钮）、8.（手工输入当前页的输入框）、

9.links（页面数链接）

例如：<div id="pp" class="easyui-pagination" data-options="total:1000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>

效果如下：

在使用上面layout：里面的 links改变样式

　　

　　

　3.　必须知道的data-options属性的用法（通过这个属性，我们可以对easyui组件的实例化可以完全写入到html中）例如：

结果如下：

4.   easyui的组件属性  也可以写入标签里面去

　　

<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;"

          iconCls="icon-save"  closable="true"

          collapsible="true" minimizable="true" maximizable=true> 等同于：
<div id="p" class="easyui-panel" title="My Panel" data-options="width:500px;height:150px;padding:10px;background:#fafafa;"

          iconCls="icon-save"  closable="true"

          collapsible="true" minimizable="true" maximizable=true> 

----上面是class写法，下面是JS写法 例如：

<div id="login">
      <p>账号：<input class="easyui-numberbox" id="manager" type="text" name="name" value=" " /></p>
      <p>密码：<input class="easyui-numberbox" id="managerpass" type="password" name="name" value=" " /></p>
</div>

先给div一个id（“login”）



												


											
刚入门的easyui的更多相关文章
	

    
								
  1. Node.js、express、mongodb 入门(基于easyui datagrid增删改查)
		
    前言 从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...
    
		
    2. 
						
  2. 关于怎么快速学好Android应用程序开发及其其他编程语言(大牛和高手勿喷，此篇文章也适合刚入门小师弟和小师妹)
		
    无论你是从.NET转过来的也好 还是从PHP转过来的等等等,能看到这篇文章的人一般都是想快速转行到Android应用程序开发,希望我的这篇文章能勉励到各位的同时,也能勉励我自己. 1.编程语言基本都会 ...
    
		
    3. 
						
  3. 给外行或者刚入门普及一下关于C#,.NET Framework（.NET框架）,.Net,CLR,ASP,ASP.Net, VS,以及.NET Core的概念
		
    一.概念 1. C# :C#是微软公司发布的一种面向对象的.运行于.NET Framework之上的高级程序设计语言. 2..NET Framework(.NET框架):.NET framework  ...
    
		
    4. 
						
  4. 对于一个刚入门的linux运维来说
		
    干 就完了~ 我觉得 人生的意义在于 不断地学习......
    
		
    5. 
						
  5. linux：scp从入门到刚入门
		
    [温馨提示] 此文和ssh配合食用更佳. 首先请小伙伴们连上你要传文件的那台机,用ssh可以免密登录. [传送文件] 我们一般发文件的话可以scp来发一发,比如说我现在要向多个扔很多tomcat包,我 ...
    
		
    6. 
						
  6. JavaScript进行简单的随即验证码生成（适合和我一样刚入门一本完整的教材书都没看完的弟弟）
		
    (感谢橙旭园给我打开了前端世界的大门) var checkcode = document.getElementById("code"); var btn = document.ge ...
    
		
    7. 
						
  7. 推荐大家自学的java学习网站，生动的讲解适合刚入门
		
    java学习网站(不仅仅是只学习java的知识):http://how2j.cn 首先大家来看看这个网站都有些啥 首页:图中的左侧目录大家看到了,从java基础到高级,从后台技术到前端页面,数据库,还 ...
    
		
    8. 
						
  8. springboot 报错  org.springframework.beans.factory.NoSuchBeanDefinitionException:No qualifying bean of type 'com.example.service.HrService' available:   有没有大佬出个主意，我找了一天，刚入门springboot
		
    话不多说先上图,这是启动类的配置,这里配置了@ComponentScan("我的mapper的接口") 接下来是我的项目结构截图 然后是service 的截图,我在这里加了注解@S ...
    
		
    9. 
						
  9. ABP实践(4)-abp前端vue框架之简单商品增删改查(帮助刚入门的新手快速了解怎么才能加入自己的功能并运行起来)
		
    提示:如有不明白的地方请先查看前3篇ABP实践系列的文章 1,下载及启动abp项目前后端分离(netcore+vue) 2,修改abp数据库为mysql 3,商品系列api接口(本文主要依赖在这个商品 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. springtest+juint开发测试如下：
			
    项目结构目录如下: UserMapper.java 为接口文件.User 为实体类.UserMapper.xml 为对应mybatis的xml文件.test为对应的测试包 applicationtes ...
    
			
    2. 
						
  2. 一定要记住这20种PS技术！！！会让你的照片美的不行！！！
			
    一种简单的数码照片后期润饰 1 打开图片,执行色像/饱和度(-40)降低饱和度. 2 新建一图层,将图层模式改为柔光,用画笔工具将需要润饰的部分画几下,这里可以利用色板方便的提取颜色 3 图片色彩过渡 ...
    
			
    3. 
						
  3. GNU DAEMON THREAD <1>
			
    尝试写一个简单的守护进程 /** @File daemon.c * * Build a daemon process for game * */ #include <unistd.h> # ...
    
			
    4. 
						
  4. BZOJ 1503 郁闷的出纳员
			
    Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常,经常 ...
    
			
    5. 
						
  5. 关于form.item不兼容的问题
			
    form.item()能在IE下运行,在firefox中会报脚本错误,没有这个函数. 可以使用 Form.elements 方法得到 HTMLCollection 后再使用 item 方法获取表单内元 ...
    
			
    6. 
						
  6. 马云专访二：点评阿里雅虎交易、BAT三家、互联网巨头与政府关系
			
    记者:我们不得不要说到你和雅虎之间的事情了.你知道,雅虎对整个互联网业的意义不只是一家公司,它有它象征的意义,重要的是,雅虎对阿里巴巴的意义更加非同寻常,当你最后决定用76亿美元从雅虎“赎身”的时候, ...
    
			
    7. 
						
  7. Samples DataBind   FastJson循环引用问题
			
    Fastjson full support databind, it's simple to use. Encode import com.alibaba.fastjson.JSON; Group g ...
    
			
    8. 
						
  8. 数据结构(主席树)：COGS 2213. K个串
			
    2213. K个串 ★★★★   输入文件:bzoj_4504.in   输出文件:bzoj_4504.out   简单对比时间限制:20 s   内存限制:512 MB [题目描述] 兔子们在玩k个 ...
    
			
    9. 
						
  9. 暴力求解——素环数  Prime Ring Problem ,UVa  524
			
    Description A ring is composed of n (even number) circles as shown in diagram. Put natural numbers i ...
    
			
    10. 
						
  10. www.chenbowenblog.com 博客地址转移
			
    我的新博客地址是 www.chenbowenblog.com 欢迎来访.
    
			
    11.