这两天看了下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. Connect mysql on Linux from Windows
			
    ON LINUX: 1 sudo apt-get install mysql-server 2 sudo apt-get install python-dev 3 sudo apt-get insta ...
    
			
    2. 
						
  2. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
			
    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
    
			
    3. 
						
  3. IOS--UIButton的使用方法
			
    设置UIButton的文字显示位置.字体的大小.字体的颜色 分类: iphone界面详解2012-12-21 14:32 27269人阅读 评论(2) 收藏 举报 btn.frame = CGRect ...
    
			
    4. 
						
  4. +=与join的性能测试
			
    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...
    
			
    5. 
						
  5. Javascript系列之js简介
			
    JavaScript是一种网络客户端脚本语言,javascript有三个组成部分: 1)核心(ECMAScript)---描述了语言的基本语法和对象 2)文档对象模型(DOM)---描述了处理网页内容 ...
    
			
    6. 
						
  6. 温习H3C S5500的VLAN配置
			
    这,才是我想要的... ACCESS还是TRUNK TYPE?
    
			
    7. 
						
  7. CF 85D Sum of Medians (五颗线段树)
			
    http://codeforces.com/problemset/problem/85/D 题意: 给你N(0<N<1e5)次操作,每次操作有3种方式, 1.向集合里加一个数a(0< ...
    
			
    8. 
						
  8. Linux Shell编程（7）——变量赋值
			
    =赋值操作符(它的左右两边不能有空白符) 不要搞混了=和-eq,-eq是比赋值操作更高级的测试.注意:等于号(=)根据环境的不同它可能是赋值操作符也可能是一个测试操作符.例子:简单的变量赋值 #!/b ...
    
			
    9. 
						
  9. 【转】github如何删除一个仓库
			
    原文网址:http://jingyan.baidu.com/article/647f0115b031887f2048a85a.html?qq-pf-to=pcqq.group 今天打算删除一个仓库重新 ...
    
			
    10. 
						
  10. 线性规划||网络流(费用流)：COGS 288. [NOI2008] 志愿者招募
			
    [NOI2008] 志愿者招募 输入文件:employee.in   输出文件:employee.out   简单对比 时间限制:2 s   内存限制:512 MB [问题描述] 申奥成功后,布布经过 ...
    
			
    11.