这两天看了下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. VmWare问题解决（网络变更后虚拟主机无法上网）
			
    安装 Vmware,并新建一个虚拟机后,当时做好配置(NAT模式)后,虚拟机能够正常上网. 然后将电脑带到另一个地理位置办公时,却无法上网. 本篇探讨问题的缘由和几种解决方式. 一.缘由解析 仅探讨上 ...
    
			
    2. 
						
  2. Qt 文件处理（readLine可以读取char[]，并且有qSetFieldWidth qSetPadChar 等全局函数）
			
    Qt 文件处理 Qt提供了QFile类来进行文件处理,为了更方便地处理文本文件或二进制文件,Qt还提了QTextStream类和QDataStream类,处理临时文件可以使用QTemporaryFil ...
    
			
    3. 
						
  3. java根据本地Ip获取mac地址
			
    import java.net.InetAddress; import java.net.NetworkInterface; import java.net.SocketException; impo ...
    
			
    4. 
						
  4. 根据body的内容 查找h2标签的@class="subtitle"的值
			
    <pre name="code" class="html"><body class="api jquery listing" ...
    
			
    5. 
						
  5. Unity NGUI实现Tabview
			
    unity版本:4.5.1 NGUI版本:3.5 参考链接:http://blog.csdn.net/g__dragon/article/details/17242969,作者:CSDN G_Drag ...
    
			
    6. 
						
  6. Linux日志文件系统(EXT4、XFS、JFS)及性能分析
			
    Ext4 ReiserFS Btrfs 等七种文件系统性能比拼 自上一篇<Ext2 v.s. Ext3 v.s. Ext4 性能比拼> 发布以来,社会各界纷纷来电来函,给出了“Ext4 我 ...
    
			
    7. 
						
  7. COJ 2110 Day7-例3
			
    Day7-例3 难度级别:C: 运行时间限制:5000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述 输入 输入的第一行包含整数n和k,其中n(2 ≤ n ≤100 ...
    
			
    8. 
						
  8. Android 开机自启动
			
    首先实现开机自启动: 第一步创建一个广播接收者,如MyBootBroadcastReceiver.java package com.example; import android.content.Br ...
    
			
    9. 
						
  9. [Locked] Binary Tree Upside Down
			
    Binary Tree Upside Down Given a binary tree where all the right nodes are either leaf nodes with a s ...
    
			
    10. 
						
  10. C++ sizeof
			
    class A{ int a; char c; char b; }; class B{ char c; int a; char b; }; int main(int argc, char* argv[ ...
    
			
    11.