这两天看了下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. j
			
    在Java程序或JSP程序中,其实有很多的代码段是可以重复使用的,比如对数据库的操作.用户的有效性检查及某些项特定功能的实现等.为了很好的解决这个问题,提高开发效率,Sun公司推出了JavaBean, ...
    
			
    2. 
						
  2. HTML5中的 DOM 树
			
    DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.Do ...
    
			
    3. 
						
  3. BZOJ 1019 汉诺塔
			
    Description 汉诺塔由三根柱子(分别用A B C表示)和n个大小互不相同的空心盘子组成.一开始n个盘子都摞在柱子A上,大的在下面,小的在上面,形成了一个塔状的锥形体. 对汉诺塔的一次合法的操 ...
    
			
    4. 
						
  4. SCVMM更换数据库，如何搞？
			
    因为SCVMM和SQL不是集成在同一台机器上的. 所以,当SQL换机器或是换名字后,SCVMM就不能启动了. 并且MS没提供直观的更改数据库连接的工具,只是在安装的时候有选项. 网上找了方法,修改注册 ...
    
			
    5. 
						
  5. Spring boot Mybatis
			
    最近刚接触Spring boot,正是因为他的及简配置方便开发,促使我下定决心要用它把之前写的项目重构,那么问题来了,spring boot怎么整合mybatis呢,下面几个配置类来搞定. 在我的代码 ...
    
			
    6. 
						
  6. java敏感词过滤
			
    敏感词过滤在网站开发必不可少.一般用DFA,这种比较好的算法实现的. 参考链接:http://cmsblogs.com/?p=1031 一个比较好的代码实现: import java.io.IOExc ...
    
			
    7. 
						
  7. Naive and Silly Muggles  （计算几何）
			
    Naive and Silly Muggles Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/ ...
    
			
    8. 
						
  8. （转载）调用ob_end_flush()网页仍旧不能显示有关问题
			
    (转载)http://www.myexception.cn/php/558638.html 调用ob_end_flush()网页仍旧不能显示问题?写了一个简单的demo,理论上调用ob_end_flu ...
    
			
    9. 
						
  9. HDOJ(HDU) 2504 又见GCD(利用最大公约数反推)
			
    Problem Description 有三个正整数a,b,c(0 import java.util.Scanner; public class Main{ public static void ma ...
    
			
    10. 
						
  10. HDOJ 2073 无限的路
			
    Problem Description 甜甜从小就喜欢画图画,最近他买了一支智能画笔,由于刚刚接触,所以甜甜只会用它来画直线,于是他就在平面直角坐标系中画出如下的图形: 甜甜的好朋友蜜蜜发现上面的图还 ...
    
			
    11.