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 框架的更多相关文章

  1. Jquery学习---Easy UI 框架

    Jquery的easyui 1.1. easyui的目录分析 以 jquery Easy UI 1.3.2 版本学习 demo 实例 locale 国际化信息 plugins 框架一些插件 src 源 ...

  2. 【JQuery Easy UI】后台管理系统的简单布局分享

    重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...

  3. jquery easy ui 验证框架

    引入参考最下面API ) var reg = /^1[3|4|5|8|9]\d{9}$/; return reg.test(value); }, message: '输入手机号码格式不准确.' } } ...

  4. 关于ExtJS、JQuery UI和easy UI的选择问题

    转自百度知道. 问:做企业级应用,比如***管理系统,不需要华丽的特效,只希望简单,风格统一.能用到的只有messagebox.tree.grid大概这几个,其他特效不要,忘大神根据自己的见解以及我这 ...

  5. facebook开源前端UI框架React初探

    最近最火的前端UI框架非React莫属了.赶紧找时间了解一下. 项目地址:http://facebook.github.io/react/ 官方的介绍:A JavaScript library for ...

  6. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  7. 《开源框架那些事儿22》:UI框架设计实战

    UI是User Interface的缩写.通常被觉得是MVC中View的部分,作用是提供跟人机交互的可视化操作界面. MVC中Model提供内容给UI进行渲染,用户通过UI框架产生响应,一般而言会由控 ...

  8. 常见前端UI框架

    祈澈姑娘 程序员一枚 本文作者祈澈姑娘,转载请声明 前端的技术日渐更新,最近得空,将前端常见的框架总结了一下,在开发的过程之中,有了这些,不断能够提高自己的工作效率,还可以在工作之余了解更多. 1.L ...

  9. spring mvc +easy ui +Mybatis 录入数据

    1.itemsEasyui.jsp 应用到的插件及知识点:日期控件My97 ,图片本地预览函数PreviewImage() (1)easy ui 的模态窗口使用时,要指定DIV的属性 data-opt ...

随机推荐

  1. 在linux中配置安装telnet服务

    Telnet 是一种流行的用于通过 Internet 登录到远程计算机的协议.Telnet 服务器软件包为远程登录主机提供了支持.要通过 Telnet 协议与另一台主机通讯,您可以使用名称或 Inte ...

  2. 谈谈Java面向对象的三大特性

    Java面向对象的三大特性就是指封装.继承.多态了. 一.封装: 概念:封装是指隐藏对象的属性和实现细节,仅对外提供公共访问方式. (举例:笔记本电脑就是一个封装体,Java语言中最小的封装体就是函数 ...

  3. 正则表达式test验证的“bug”

    在使用正则表达式对某些字符串进行验证时,我们常常会使用到test方法,而该方法也隐藏着一个陷阱,今天就让我们来看一下这个问题. var str = 'hello jack, hello rose'; ...

  4. sql参数化查询in的参数

    private Query setParameter(Query query, Map<String, Object> map) { if (map != null) { Set<S ...

  5. EL表达式显示数据取整问题

    第一 插入fmt标签库 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%&g ...

  6. ReactJS学习笔记(三)

    需要注意的问题: 1.组件名称开头字母一定要大写.(PS:原因是 React 的 JSX 里约定分别使用首字母大.小写来区分本地组件的类和 HTML 标签.) 2.this.props.childre ...

  7. 采用TCP协议实现PIC18F97J60 ethernet bootloader

    了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). TCP/IP Stac ...

  8. NHibernate系列文章目录

    第一章:NHibernate基础 NHibernate介绍 第一个NHibernate工程 简单的增删改查询 运行时监控 NHibernate配置 数据类型映射 Get/Load方法 NHiberna ...

  9. C--关键字static

    static在C中主要有两个作用: 1.修饰变量  (局部变量.全局变量 都存在内存的静态区) 静态全局变量: 作用域仅限于变量被定义的文件中,其中文件即使用extern声明也无法使用它. 静态局部变 ...

  10. python基础知识---正则

    一.python正则简介 python的re模块,让python能够支持perl正则 perl正则的字符集("."  "[abc]"   "(abc) ...