easyui(1)
使用Easyui
1、引入必要的文件
1)、jquery核心库
2)、easyui核心库
3)、easyui中文提示信息
4)、自己开发的js文件
5)、easyui核心UI文件css
6)、easyui图标文件
引入完毕就可以开始写代码了
加载UI组件的方式
1、使用class方式加载
使用class加载,格式为:easyui-组件名
<div id="box" class="easyui-dialog" title="标题" style="width:400px; height:200px;">
内容部分
</div>
2、通过js调用加载
<div id="box" title="标题" style="width:400px; height:200px;">
内容部分
</div>
$(function(){
$("#box").dialog();
});
一般推荐使用第二种:js调用加载,因为一个UI组件有很多属性和方法,如果使用class的用法将极大的不方便。
使用easyload.js智能加载
easyui算是一个比较重的前端框架了,有些时候可以不向前面一样引入easyui的那些组件,而是引入easyuiloader.js,然后在js中调用加载组件,自动进行动态加载js,可以节约很大部分空间。
<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../easyui/easyloader.js"></script>
<script type="text/javascript" src="../../js/01/t1.js"></script>
<div id="box" title="标题" style="width:400px; height:200px;">
内容部分
</div>
$(function(){
easyloader.load('dialog',function(){
$("#box").dialog();
});
});
这里必须JS调用在easyloader的load方法的对应function内。第一个参数是所用到的组件名,为String数组。
parser解析器
parser解析器是专门解析渲染各种UI组件,一般,我们不需要使用它即可完成。当然,某些环境下我们需要手动解析。
手动解析一般是使用class的情况下有效,比如设置class = “easyui-dialog”
parser属性:
属性名 默认值 说明
$.parser.auto true 定义是否自动解析EasyUI组件
//关闭自动解析功能,放在$(function(){})外
parser方法:
属性名 传参 说明
$.parser.parse 空或JQ选择器 解析指定的UI组件
$.parser.onComplete 回调函数 解析完毕后执行
将其他js回到开始的时候,
div id="box" class="easyui-dialog" title="标题" style="width:400px; height:200px;">
内容部分
</div>
$.parser.auto = false; //关闭自动解析
$.parser.onComplete = function(){ //解析回调
alert("解析完毕!");
}
$(function(){
//$("#box").dialog();
//$.parser.parse(); -- 这个表示解析所有组件
$.parser.parse("box");
});
如果解析指定组件的话,解析的选择器选择的是组件的父容器。
<div id="box">
<div id="box" class="easyui-dialog" title="标题" style="width:400px; height:200px;">
内容部分
</div>
</div>
easyui(1)的更多相关文章
- 前端框架 EasyUI (2)页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- 前端框架 EasyUI (1)熟悉一下EasyUI
jQuery EasyUI 官方网站 http://www.jeasyui.com/ .去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样.但是,广 ...
- 前端框架 EasyUI (0) 重新温习(序言)
几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...
- 定位问题 vue+element-ui+easyui(兼容性)
项目背景:靠近浏览器窗口的各个方向(左上.下.左.右)都有不同的模态框悬浮于窗口,这里针对于底部组件定位的选择(主要针对pc端垂直方向上的定位) 1.百分比:easyui的window窗口定位方式:设 ...
- JQuery easyui (2)Droppable(放置)组件
所谓放置,就是将一个物体放入一个物体内,当然对于easyui来说触发各种效果是必不可少的,同时这个组件也不会依赖于其他组件. Droppable的加载方式 1,class 加载 一直不太喜欢cl ...
- JQuery easyui (1) Draggable(拖动)组件
很不习惯这种强迫式的学习,但谁叫我不是老师了,所以还是决定坚持练习,顺带为博客加点东西.虽然我还是很反感短时间内惯性的去熟悉一个工具. easyui做为一个封装了JQusey的UI插件,其实还是蛮好用 ...
- JQuery easyui (4)Tooltip (提示组件) 组件
ps:先来一波美图 Tooltip的加载方式: 1,class加载 <a href="#" title="tooltip">hello word&l ...
- JQuery easyui (3) Resizable(调整大小)组件
Resizable 动态调整元素大小 不依赖其他组件 Resizable的加载方法 <div class="easyui-resizable"></div&g ...
- JQuery easyui (4)LinkButtion(按钮)组件
居然还有button组件 - - linkButton组件的加载方式 1,class加载 <a class='easyui-linkbtuton'>按钮<a> 2,js加载 $ ...
随机推荐
- Web安全学习笔记之Nmap扫描原理与用法
1 Nmap介绍 Nmap扫描原理与用法PDF:下载地址 Nmap是一款开源免费的网络发现(Network Discovery)和安全审计(Security Auditing)工具.软件名字N ...
- Excel水平线画不直,图形对象对不齐,怎么办
看够了千篇一律的数字报表,不妨添加些图形对象来调剂下,今天小编excel小课堂(ID:excel-xiaoketang 长按复制)给各位分享10个插入图形对象时简单实用的小技巧. 01课题 今天小编e ...
- 学Git,用Git ②
之前介绍了git的最核心功能游戏存档式的本地版本管理.这会我们介绍git剩下的两个核心功能:分支和远程仓库. 1.Git游戏存档进化版--Git分支 git分支的思想很有意思,git允许我们可以随时从 ...
- cogs 547:[HAOI2011] 防线修建
★★★☆ 输入文件:defense.in 输出文件:defense.out 简单对比 时间限制:1 s 内存限制:128 MB 题目描述: 近来A国和B国的矛盾激化,为了预防不测,A国 ...
- 异步:asyncio和aiohttp的一些应用(1)
1. asyncio 1.1asyncio/await 用法 async/await 是 python3.5中新加入的特性, 将异步从原来的yield 写法中解放出来,变得更加直观. 在3.5之前,如 ...
- eclipse中把多个项目放在一个文件夹里
1..Package Explorer 可以在这里打开 2.选择Working sets 3.新建java working set 4.把文件夹显示出来 5.可以把项目移动到文件夹里面了,鼠标左键拖就 ...
- kubectl delete
kubectl delete 通过配置文件名.stdin.资源名称或label选择器来删除资源. 支持JSON和YAML格式文件.可以只指定一种类型的参数:文件名.资源名称或label选择器. 有些资 ...
- Matlab 日期频次统计
一.孕妇建档月份频次统计 源数据样本,为某医院一段时间内的孕妇建档时间 2015-04-22 10:12:522014-11-21 17:16:472013-12-16 17:35:442013-12 ...
- hdu 4825 Xor Sum trie树
Xor Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 132768/132768 K (Java/Others) Proble ...
- ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/usr/local/mysql/tmp/mysql.sock'
查看是否开启服务 # ps -ef | grep mysql root 5605 5457 0 11:45 pts/2 00:00:00 grep mysql 查看my.cnf # cat /etc/ ...