刚入门的easyui
这两天看了下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的更多相关文章
- Node.js、express、mongodb 入门(基于easyui datagrid增删改查)
前言 从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...
- 关于怎么快速学好Android应用程序开发及其其他编程语言(大牛和高手勿喷,此篇文章也适合刚入门小师弟和小师妹)
无论你是从.NET转过来的也好 还是从PHP转过来的等等等,能看到这篇文章的人一般都是想快速转行到Android应用程序开发,希望我的这篇文章能勉励到各位的同时,也能勉励我自己. 1.编程语言基本都会 ...
- 给外行或者刚入门普及一下关于C#,.NET Framework(.NET框架),.Net,CLR,ASP,ASP.Net, VS,以及.NET Core的概念
一.概念 1. C# :C#是微软公司发布的一种面向对象的.运行于.NET Framework之上的高级程序设计语言. 2..NET Framework(.NET框架):.NET framework ...
- 对于一个刚入门的linux运维来说
干 就完了~ 我觉得 人生的意义在于 不断地学习......
- linux:scp从入门到刚入门
[温馨提示] 此文和ssh配合食用更佳. 首先请小伙伴们连上你要传文件的那台机,用ssh可以免密登录. [传送文件] 我们一般发文件的话可以scp来发一发,比如说我现在要向多个扔很多tomcat包,我 ...
- JavaScript进行简单的随即验证码生成(适合和我一样刚入门一本完整的教材书都没看完的弟弟)
(感谢橙旭园给我打开了前端世界的大门) var checkcode = document.getElementById("code"); var btn = document.ge ...
- 推荐大家自学的java学习网站,生动的讲解适合刚入门
java学习网站(不仅仅是只学习java的知识):http://how2j.cn 首先大家来看看这个网站都有些啥 首页:图中的左侧目录大家看到了,从java基础到高级,从后台技术到前端页面,数据库,还 ...
- springboot 报错 org.springframework.beans.factory.NoSuchBeanDefinitionException:No qualifying bean of type 'com.example.service.HrService' available: 有没有大佬出个主意,我找了一天,刚入门springboot
话不多说先上图,这是启动类的配置,这里配置了@ComponentScan("我的mapper的接口") 接下来是我的项目结构截图 然后是service 的截图,我在这里加了注解@S ...
- ABP实践(4)-abp前端vue框架之简单商品增删改查(帮助刚入门的新手快速了解怎么才能加入自己的功能并运行起来)
提示:如有不明白的地方请先查看前3篇ABP实践系列的文章 1,下载及启动abp项目前后端分离(netcore+vue) 2,修改abp数据库为mysql 3,商品系列api接口(本文主要依赖在这个商品 ...
随机推荐
- BZOJ 1028 麻将
Description 麻将是中国传统的娱乐工具之一.麻将牌的牌可以分为字牌(共有东.南.西.北.中.发.白七种)和序数牌(分为条子.饼子.万子三种花色,每种花色各有一到九的九种牌),每种牌各四张.在 ...
- 【技术贴】解决使用maven jetty启动后无法加载修改过后的静态资源
如何使用jetty自动热部署修改后的所有文件,比如js,jpg,class等,哇咔咔 太爽啦比tomcat舒服多了. jetty模式是不能修改js文件的,比如你现在调试前端js,发现在myeclips ...
- cf C Milking cows
题意:输入n,然后输入n个数,在n个数中0或1,0代表这头牛向左看,1代表这头牛向右看,问最后最少损失多少牛奶. 思路:贪心,连着的0可以不损失,一旦插入1就会损失牛奶. #include <c ...
- Samples DataBind FastJson循环引用问题
Fastjson full support databind, it's simple to use. Encode import com.alibaba.fastjson.JSON; Group g ...
- 海量日志数据提取某日访问百度次数最多的那个IP的Java实现
海量日志数据提取某日访问百度次数最多的那个IP的Java实现 前几天在网上看到july的一篇文章<教你如何迅速秒杀掉:99%的海量数据处理面试题>,里面说到百度的一个面试题目,题目如下: ...
- 基于百度定位SDK的定位服务的实现
转载请标明出处:http://blog.csdn.net/android_ls/article/details/10179013 一.定位模块的需求:我们想知道使用我们应用的用户的大概位置,每隔五分钟 ...
- c++实现委托
#include "stdafx.h" #include <iostream> #include <string> using namespace std; ...
- jQuery Validate 验证,校验规则写在控件中的具体例子
将校验规则写到控件中 <script src="../js/jquery.js" type="text/javascript"></scrip ...
- ASP.NET网站文件上传下载功能
if (!IsPostBack) { if (Application["RaNum"] == null) { Random ra = new Random(); Applicati ...
- [FreeProxy]FreeProxy代理服务器端软件介绍 之 sock 5
首先在FreeProxy上创建一个sock5 service 然后在Client 设置使用sock5