easy ui 框架
Easy UI 准备工作(搭建)
1.在WebRoot 的目录下创建js 文件夹,在文件夹中倒入一下两个包
Jquery.easyui.min.js
jquery.min.js
2.在WebRoot 的目录下复制整个themes 主题包
3.引入css文件,不限顺序(注意路径:本jsp 是放在webroot 下的html文件夹的根目录)
<link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
4.引入js 文件,有顺序限制
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
5.例子及注意事项
easyui 获取值得方法(与一般的jquery不一样)
取: $("#div的id").组件名("getValue")
设值: $("#div的id").组件名("setValue","设值的值")
组件:
一.layout 布局
布局属性:fit:trrue 使用父容器的大小
区域面板属性: href:
问题
(直接加载图片的话,是加载图片的内容)
解决方案:换成倒入一个 html 页面(期内容就是一张图片),用了绝对路径,相对路径有问题,图片显示不出来
easyui 方法调用
二.Accordion 分类器
容器属性:
selected: 默认选中 0,如果不想显示被选中,则把selected 的值设置为不在范围内
面板属性:(添加移除面板)
三.LinkButton 按钮
Class=’easyui-linkbutton’
属性 group,toggle 同用 实现 radio 的效果
四.tab 选项卡
1.可以判断选项卡是否已经打开,否则添加
2.在选项卡中引入另外一个页面,用href 属性
五.Pagination 分页栏
六 form 表单
1.validatebox 验证框
提示框默认红色,可以在validatebox.css 这把颜色修改
自定义规则(必须为中文)
2.combobx 组合框(可以写,有点类似搜索)
classs=''easy-combobox"
3.datebox 日期输入框
日期获取并且装换为指定的格式
4.numberspinner 数字微调器( 回车键触发事件)
<script type="text/javascript">
$("#ss").keyup(function(xxx){
//将浏览器产生的事件对象设置到myevent变量中
var myevent = xxx;
//获取按键的unicode编码
var code = myevent.keyCode;
//如果按钮是回车
if(code == 13){
//获取数字微调的当前值,因为$(this)此时表示的是文本框,直接获取value属性值即可
var value = $(this).val();
//将当前值设置到span标签中
$("#num").text(value).css("color","red");
}
});
</script>
5.slider 滑动条(场景:身高)
比较少用,如果想快速改变数量,可用这个代替numberspinner
6.progressBar 进度条
<script type="text/javascript">
//获取1到9之间的随机数,包含1和9
function getNum(){
return Math.floor(Math.random()*9)+1;
}
</script>
//定拉按钮,同时提供单击事件
$("#startID").click(function(){
//每隔300毫秒执行update方法
timeID = window.setInterval("update()",300);
//按钮失效
$(this).attr("disabled","disabled");
});
7.window 窗口
8.dialog 对话框
主要是toolbar,buttons,毕业设计管理员端用的就是dialog
9.Messager 消息框
警告框,确认框,输入框,显示框
10.tree 树
如果是静态树,在页面加载是折叠的话,$("#数id").tree("collapseAll")
若是动态树,折叠需要在json 里添加属性 "state":"close"
一.jQueryEasyUI Messager基本使用
jQuery.messager.alert("提示", "请完成必填项","warning");
参考: http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html
//定拉按钮,同时提供单击事件$("#startID").click(function(){//每隔300毫秒执行update方法timeID = window.setInterval("update()",300);//按钮失效$(this).attr("disabled","disabled");});
easy ui 框架的更多相关文章
- Jquery学习---Easy UI 框架
Jquery的easyui 1.1. easyui的目录分析 以 jquery Easy UI 1.3.2 版本学习 demo 实例 locale 国际化信息 plugins 框架一些插件 src 源 ...
- 【JQuery Easy UI】后台管理系统的简单布局分享
重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...
- jquery easy ui 验证框架
引入参考最下面API ) var reg = /^1[3|4|5|8|9]\d{9}$/; return reg.test(value); }, message: '输入手机号码格式不准确.' } } ...
- 关于ExtJS、JQuery UI和easy UI的选择问题
转自百度知道. 问:做企业级应用,比如***管理系统,不需要华丽的特效,只希望简单,风格统一.能用到的只有messagebox.tree.grid大概这几个,其他特效不要,忘大神根据自己的见解以及我这 ...
- facebook开源前端UI框架React初探
最近最火的前端UI框架非React莫属了.赶紧找时间了解一下. 项目地址:http://facebook.github.io/react/ 官方的介绍:A JavaScript library for ...
- jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
- 《开源框架那些事儿22》:UI框架设计实战
UI是User Interface的缩写.通常被觉得是MVC中View的部分,作用是提供跟人机交互的可视化操作界面. MVC中Model提供内容给UI进行渲染,用户通过UI框架产生响应,一般而言会由控 ...
- 常见前端UI框架
祈澈姑娘 程序员一枚 本文作者祈澈姑娘,转载请声明 前端的技术日渐更新,最近得空,将前端常见的框架总结了一下,在开发的过程之中,有了这些,不断能够提高自己的工作效率,还可以在工作之余了解更多. 1.L ...
- spring mvc +easy ui +Mybatis 录入数据
1.itemsEasyui.jsp 应用到的插件及知识点:日期控件My97 ,图片本地预览函数PreviewImage() (1)easy ui 的模态窗口使用时,要指定DIV的属性 data-opt ...
随机推荐
- 在linux中配置安装telnet服务
Telnet 是一种流行的用于通过 Internet 登录到远程计算机的协议.Telnet 服务器软件包为远程登录主机提供了支持.要通过 Telnet 协议与另一台主机通讯,您可以使用名称或 Inte ...
- 谈谈Java面向对象的三大特性
Java面向对象的三大特性就是指封装.继承.多态了. 一.封装: 概念:封装是指隐藏对象的属性和实现细节,仅对外提供公共访问方式. (举例:笔记本电脑就是一个封装体,Java语言中最小的封装体就是函数 ...
- 正则表达式test验证的“bug”
在使用正则表达式对某些字符串进行验证时,我们常常会使用到test方法,而该方法也隐藏着一个陷阱,今天就让我们来看一下这个问题. var str = 'hello jack, hello rose'; ...
- sql参数化查询in的参数
private Query setParameter(Query query, Map<String, Object> map) { if (map != null) { Set<S ...
- EL表达式显示数据取整问题
第一 插入fmt标签库 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%&g ...
- ReactJS学习笔记(三)
需要注意的问题: 1.组件名称开头字母一定要大写.(PS:原因是 React 的 JSX 里约定分别使用首字母大.小写来区分本地组件的类和 HTML 标签.) 2.this.props.childre ...
- 采用TCP协议实现PIC18F97J60 ethernet bootloader
了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). TCP/IP Stac ...
- NHibernate系列文章目录
第一章:NHibernate基础 NHibernate介绍 第一个NHibernate工程 简单的增删改查询 运行时监控 NHibernate配置 数据类型映射 Get/Load方法 NHiberna ...
- C--关键字static
static在C中主要有两个作用: 1.修饰变量 (局部变量.全局变量 都存在内存的静态区) 静态全局变量: 作用域仅限于变量被定义的文件中,其中文件即使用extern声明也无法使用它. 静态局部变 ...
- python基础知识---正则
一.python正则简介 python的re模块,让python能够支持perl正则 perl正则的字符集("." "[abc]" "(abc) ...