这两天看了下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. Python，遍历目录下TXT
			
    import os #获取根目录,递归得到所以txt文件的路径 list_dirs = os.walk(os.curdir) txtfilenames=[] for root, dirs, files ...
    
			
    2. 
						
  2. 关于SQL server的一些知识点
			
    关于怎么打开xp_cmdshell的方法: exec sp_configure 'show advanced option',1reconfiguregoexec sp_configure 'xp_c ...
    
			
    3. 
						
  3. App的token机制
			
    这只是网上看来的后期可能还会修改. 理论版的描述如下: (1) 服务器接收到app发送的用户名和密码后,验证用户名和密码是否正确. 如果错误则返回错误信息. 如果验证正确,生成一个随机的不重复的tok ...
    
			
    4. 
						
  4. code first基础
			
    随着.NET 4.0时代的到来,开发者越来越关注如何能加快开发效率,从而构建健壮的程序.而微软在.NET 4.0推出的Entity Framework,无疑是值得开发者去学习的,它实际上是微软的ADO ...
    
			
    5. 
						
  5. 151111 sqlite3数据库学习
			
    最近在学习数据库,想起去年做的项目里用到了sqlite3.那时候,没有任何的数据库经验,误打误撞,找到了sqlite3,然后参考网络上零碎的信息,把它嵌入到工程里,并且成功了.可惜,那时候没有好好保存 ...
    
			
    6. 
						
  6. coroutine协程
			
    如果你接触过lua这种小巧的脚本语言,你就会经常接触到一个叫做协程的神奇概念.大多数脚本语言都有对协程不同程度的支持.但是大多编译语言,如C/C++,根本就不知道这样的东西存在.当然也很多人研究如何在 ...
    
			
    7. 
						
  7. BZOJ 1071 [SCOI2007]组队
			
    1071: [SCOI2007]组队 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 1330  Solved: 417[Submit][Status][ ...
    
			
    8. 
						
  8. 网络流(二分)：BZOJ 3993: [SDOI2015]星际战争
			
    Description 3333年,在银河系的某星球上,X军团和Y军团正在激烈 地作战.在战斗的某一阶段,Y军团一共派遣了N个巨型机器人进攻X军团的阵地,其中第i个巨型机器人的装甲值为Ai.当一个巨型 ...
    
			
    9. 
						
  9. HDOJ 2055 An easy problem
			
    Problem Description we define f(A) = 1, f(a) = -1, f(B) = 2, f(b) = -2, - f(Z) = 26, f(z) = -26; Giv ...
    
			
    10. 
						
  10. JavaScript & HTML5 Canvas 概览 更新时间2014-0411-1805
			
    HTML Canvas 坐标体系:矩形区域的左上角为坐标原点(0,0),向右为x轴,向下为y轴. 检测浏览器是否支持Canvas(IE系列从IE9开始支持): <!DOCTYPE html> ...
    
			
    11.