easyui(一) 初始easyui
分享使我快乐。哈哈~
--WZY
一、什么是easyui?
学习一个东西,最重要的是知道它的定位(是干嘛的,基本的用法是什么,快速入门),其实easyui也非常简单,不要觉得很难。
easyui就是一个前端框架,JQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签,一大段废话,通俗一点,就是简化开发,它是一个框架,和jQuery只是一个js类库,
easyui框架提供了哪些东西让我们用?
看一下easyui的api文档就知道了给我们提供了哪些东西?是如何的方便
看标记的内容,是我们比较常见的,按钮(easyui做的肯定比我们普通按钮什么都没有的更好)、日历、对话框窗口等等,并且对于每一个组件,easyui都会给出我们例子,供我们参考,所以,自学也完全没有问题。哈哈~
为什么后台发开人员还需要用easyui这种前端框架?不是有前端开发人员吗?
如果公司里只有“美工”,没有前端人员,所以一般是程序员兼职前端,所以一 般会找一个好用且功能全的js UI框架(当然,还有免费),这样页面基本就不用花费太多功夫了,与其同名的前端框架还有一个bootstrap,在学习玩easyui之后就可以正式学习一下了。
二、如何使用easyui?
soeasy~ 通过实现resizable组件效果来讲解(教会如何看文档和例子)
第一步:将下载的整个easyui文件赋值到项目下。
解压之后复制
查看easyui的目录结构
第二步:现在就可以使用easyui了。感觉无从下手,那就查看文档
查看resizable文档内容。
还是不懂,在easyui/demo/resizable/basic.html中查看内容(看easyui给出的例子,怎么用,在对照文档就懂了)
给出的例子,重点就两个,6-10行,导入了js类库和一些css。 16行关键代码就是文档中第一个使用案例。还是不懂,没关系,下面就解释给你听。
2.1、简单实现resizable组件的效果的两种方式
方式一:html方式
原理:页面加载完毕之后,EASYUI的文件在页面上寻找那些标签的class名字为easyui-开头,找到之后,将eayui-”name”,name拿到,拿到之后将这些标签处理为(渲染为)可以
拖动改变大小的效果.
<!--resizable实现的第一种方式:html实现原理:class:easyui-resizable页面加载完毕之后,easyui的主文件会扫描页面上所有的HTML标签,看那些标签的class的值以easyui-开头,截取easyui-之后的部分"resizable",那么easyui的主文件就将当前的这个标签处理为"resizable"效果.将当前的标签渲染为resizable组件data-options:该resizable组件的属性。具体看文档,后面详细讲解style:div的一些属性width:200px 该div宽度占200像素height:150px ...高度占150像素border:1px ...边框粗度占1像素solid:red ...边框颜色是红色--><div class="easyui-resizable" data-options="minWidth:50,minHeight:50" style="width:200px;height:150px;border:1px solid red;"></div>
html实现resizable
方式二:html+js方式
原理:页面加载完毕之后,获取页面上id为rr的元素,easyui的resizable函数将其处理为(渲染为)可以拖动改变大小的效果
2.2、使用resizable组件的属性的两种方式
方式一:html方式
<!--resizable实现的属性信息讲解(HTML)data-options:该resizable组件的属性。结合文档的注释disabled:表示是否禁用大小调整功能,true:禁用 false:不禁用(默认)handles:申明调整大小的方向,n, e, s, w, ne, se, sw, nw, alln:north 北部 e:east 东部 w:west 西部 s:south 南部ne:东北,也就是右上角 se、sw、nw类似 all:任意,全部edge:边框边缘大小,这个看注释不好理解,就是设置能显示拉大小的那个箭头的范围,默认是5。maxWidth:当调整大小时候的最大宽度 默认10000maxHeight:当调整大小时候的最大高度 默认10000minWidth:当调整大小时候的最小宽度 默认10minHeight:当调整大小时候的最小高度 默认10style:div的一些属性--><div class="easyui-resizable"data-options="disabled:false,handles:'all',edge:30,maxWidth:400,maxHeight:400,minWidth:40,minHeight:40" style="width:200px;height:150px;border:1px solid red;"></div>
html实现resizable的属性
方式二:html+js方式调用属性
<script type="text/javascript">$(function(){$("#rr").resizable({//设置resizable组件的属性,格式看文档中disabled:false,handles:'all',edge:30,maxWidth:400,maxHeight:400,minWidth:40,minHeight:40 });});</script> </head> <body><!--resizable实现的属性信息讲解(js+html)data-options:该resizable组件的属性。结合文档的注释disabled:表示是否禁用大小调整功能,true:禁用 false:不禁用(默认)handles:申明调整大小的方向,n, e, s, w, ne, se, sw, nw, alln:north 北部 e:east 东部 w:west 西部 s:south 南部ne:北和东 se、sw、nw类似 all:任意,全部edge:边框边缘大小,这个看注释不好理解,就是设置能显示拉大小的那个箭头的范围,默认是5。maxWidth:当调整大小时候的最大宽度 默认10000maxHeight:当调整大小时候的最大高度 默认10000minWidth:当调整大小时候的最小宽度 默认10minHeight:当调整大小时候的最小高度 默认10style:div的一些属性--><div id="rr" style="width:200px;height:150px;border:1px solid red;"></div> </body>
html+js实现resizable属性
2.3、resizable组件对事件的使用
只有一种方式,就是使用html+js
<script type="text/javascript">$(function(){$("#rr").resizable({onStartResize:function(){$("#dv1").html("在开始改变大小的时候触发"); },onResize:function(){$("#dv2").html("我是开始拖动期间触发的事件");},onStopResize:function(){$("#dv3").html("在停止改变大小的时候触发");}});});</script> </head> <body><!--resizable实现的事件信息讲解(HTML)onStartResize:在开始改变大小的时候触发。onResize:在调整大小期间触发。当返回false的时候,不会实际改变DOM元素大小。onStopResize:在停止改变大小的时候触发--><divid="rr"class="easyui-resizable" data-options="disabled:false,handles:'all',edge:30,maxWidth:400,maxHeight:400,minWidth:40,minHeight:40" style="width:200px;height:150px;border:1px solid red;"></div><div id="dv1"></div><div id="dv2"></div><div id="dv3"></div> </body>
htm+js实现resizable事件的使用
2.4、resizable组件对方法的使用
只有一种方式:html+js
<script type="text/javascript">$(function(){ //等待页面加载完在执行以下代码 $("#bt1").click(function(){ $("#rr").resizable("enable"); //enable方法启用调整大小功能。 });$("#bt2").click(function(){$("#rr").resizable("disable"); //disable方法禁用调整大小功能。 });$("#bt3").click(function(){var obj = $("#rr").resizable("options");//options方法,返回调整大小属性$("#dv1").html("最大宽:" + obj.maxWidth+"最大高:"+obj.maxHeight+"最小宽:"+obj.minWidth+"最小高:"+obj.minHeight+"边缘大小:"+obj.edge+"是否不可用:"+obj.disabled+"调整方位:"+obj.handles);});});</script> </head> <body><!--resizable实现的组件调用方法讲解(HTML+js)options 返回调整大小属性。 enable 启用调整大小功能。 disable 禁用调整大小功能。 --><divid="rr"class="easyui-resizable" data-options="disabled:false,handles:'all',edge:30,maxWidth:400,maxHeight:400,minWidth:40,minHeight:40" style="width:200px;height:150px;border:1px solid red;"></div><input type="button" id="bt1" value="启用调整大小功能"/><input type="button" id="bt2" value="禁用调整大小功能"/><input type="button" id="bt3" value="返回调整大小属性"/><div id="dv1"></div> </body>
htm+js实现resizable的方法功能
效果如下
三、总结
算是对easyui的入门把。其他的组件大都类似这样使用。不会的话就使用文档+例子进行查看。也非常的简单,一点都不难,只要有耐心即可。
转载于:https://www.cnblogs.com/whgk/p/7106567.html
easyui(一) 初始easyui相关推荐
- 适用于zTree 、EasyUI tree、EasyUI treegrid
#region System.Text.StringBuilder b_appline = new System.Text.StringBuilder(); Syst ...
- jQuery EasyUI详解-EasyUI环境配置
需要预先说明的一点是,不管是EasyUI也好,Bootstrap也罢,都可以认为是在CSS.Javascript.jQuery上再封装了一层.所以我们来看一个十分简单的例子: <a href=& ...
- php easyui tree 结构,EasyUI Tree树组件无限循环的解决方法
在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环. ...
- ajax与easyui树节点,EasyUI中的tree用法介绍
真的是太忙了,本应该有好多东西可以写,但是没什么闲时间,每次想到写的时候,来点事就又给忘了.10月最后一天了,在忙也得把这篇文章写完,不然又得多一个空白月了. 这是之前带领成员开发一个小模块功能的时候 ...
- easyui select ajax,easyui的combobox根据后台数据实现自动输入提示功能
easyui的combobox根据后台数据实现自动输入提示功能 发布时间:2020-06-11 10:09:41 来源:51CTO 阅读:1981 作者:crackernet adauhuehkek最 ...
- easyui php分页,easyui datagrid分页 4、easyUI-七种布局(layout)
1.为网页创建边框布局 边框布局(border layout)提供五个区域:east.west.north.south.center.以下是一些通常用法: north 区域可以用来显示网站的标语. s ...
- easyui treegrid php,Easyui在treegrid添加控件实例教程
最近看了一个easy感觉里面的树搞得还不错,虽然觉得让人有点不灵活的感觉,我们来说说怎么在树种添加控件效果本文主要介绍了Easyui在treegrid添加控件的实现方法,需要的朋友可以参考下,希望能帮 ...
- easyui treegrid php,Easyui 之 Treegrid 笔记
EasyUI 简介 easyui是一种基于jQuery的用户界面插件集合. easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要 ...
- EasyUI入门9 EasyUI+NPOI+QrCode实现带二维码复杂格式excel文件导出
概述 导出excel文件,而且文件带有复杂的表头格式并有二维码信息.前端界面是easyui,后端是.net(用ashx方式),使用了NPOI和Qrcode,本示例还增加了页面参数传值,实现的思路很简单 ...
最新文章
- 专业的秘密 | 南方医科大学生物信息学专业
- java socket抓取资源_Java 通过 Socket 的形式抓取网页内容
- VMware View 与 Citrix Xendesktop 管理大比拼
- 70 个数据分析常用网址,我先收藏了!
- HDU2067(卡特兰数)
- vue-cli4.0打包之后,页面空白,路由404
- 车座自动排水阀行业调研报告 - 市场现状分析与发展前景预测(2021-2027年)
- java强制gc_java应用性能调优之详解System的gc垃圾回收方法
- ImageMagick---import(截图)
- 第三章:logback 的配置
- 键盘怎么按出计算机,怎么在电脑键盘上打出艾特@键? 原来是这样的
- A - Robot Rapping Results Report
- Java 特殊操作流之标准输出流(system.out.println的底层原理)
- 牛牛的猜球游戏(前缀和+逆交换)
- 我的梦想就是不工作,有什么错?
- python中对数字降序和升序_该程序查找在Python中按升序或降序排列数字的最低成本...
- 用友t3服务器地址在哪里修改,畅捷通T+pos端后续想更换服务器地址链接,怎么操作?...
- kkFileView安装及使用——文件预览解决方案
- 【数据库实验】镶嵌查询
- Java 并发核心机制
热门文章
- springboot security 权限不足_springBoot整合springSecurity(零一)
- php代码里怎么写html代码_菜鸟青铜变白银!Python 项目代码写完了,然后怎么打包和发布?...
- 爬虫之request
- vue-cli@2的原理解析
- 【JZOJ4819】【NOIP2016提高A组模拟10.15】算循环
- shape的简单用法
- 接口Interface和抽象类abstract class的区别
- JAVA求集合中的组合
- Replication--查看未分发命令和预估所需时间
- css--block formatting context