JQuery EasyUI学习笔记】的更多相关文章

转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6690888.html  简介与准备 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. 准备:下载:http://www.jeasyui.com/download/index.php 导入: <link rel="stylesheet" type="text/css" href="easyui/themes/default/e…
jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的添加,修改,删除,查询等基本操作…
jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.noop //返回一个空函数 function noop() { } noop这个函数的功能就是什么也不做,方便在全局使用一个空函数,减少内存开销. 2.error function error(msg) { throw new Error(msg); } 用于统一抛出异常,可以减少代码中使用thro…
前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录在学习过程中的问题,在他们自己的问题和实事后. 关于EasyUI EasyUI框架式基于JQuery的,使用它帮助我们快捷的构建web网页. EasyUI框架是一个简单.易用.强大的轻量级web前端javascript框架.现阶段来说.在开发web项目时,前端的开发我们更喜欢使用JQuery取代原生…
JQuery学习笔记3 2.9属性选择器 属性选择器就是根据元素的属性和属性值作为过滤条件,来匹配对应的DOM元素.属性选择器一般都以中括号作为起止分界符 它的形式如下: [attribute] [attribute=value] [attribute!=value] [attribute^=value]作用:匹配给定的属性是以某些值开始的元素 [attribute*=value]作用:匹配给定的属性是以包含某些值的元素 [attribute$=value]作用:匹配给定的属性是以某些值结束的元…
jQuery学习笔记 Day two Chapter two 选择器 类选择器 语法结构:$(“.classname”) javascript里面没有类选择器所以这个时候使用jQuery会更加的简便 通配选择器 语法结构:jQuery(“*”) 例如下列代码就是匹配body里面的所有的元素 <script type="text/javascript"> $(function() { $("*").css("color","r…
JQuery学习笔记 Chapter one初识jQuery 1.2测试jQuery 在jQuery库中,$是jQuery的别名,如:$()相当于jQuery() 注意:在使用JQuery进行开发的时候如果在做所有事情之前,希望jQuery操作DOM文档,就必须保证在DOM载入完毕后开始执行,应该使用ready事件作为处理HTML文档的开始. 1.4JQuery的核心功能 1.对外接口单一让使用更简单 2.链式语法让编码更加的快速和优雅 3.模仿CSS选择器让选取元素更加的精确的灵活 4.拓展接…
在手风琴中加载其他页面和在表格中加载其他的页面有写类似的,就是请求另外一个页面显示数据. 1.先看看引用的资源文件 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" /&g…
第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和css代码 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href=&quo…
Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特性和插件,感觉原来好多前端设计中感觉非常麻烦的东西.通过Jquery的函数和插件都非常easy的实现了而且效果极佳.这里仅仅是简单的介绍下Jquery有哪些知识点. 1.基础选择器 (1). $("button").attr("disabled","true&…
1.  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <script type="text/javascript" src = jquery-easyui/jquery.min.js> </script> <script type="text/javascript" src = jquery-easyui/…
1.引用js文件 <script type="text/javascript" src = jquery-easyui/jquery.min.js> </script> <script type="text/javascript" src = jquery-easyui/jquery.easyui.min.js> </script> <script type="text/javascript"…
1.   课程介绍 1.  Datagrid组件(掌握) 2.  Dialog.form组件(掌握) 3. Layout.Tabs;(掌握) Datagrid组件 2.1.  部署运行pss启动无错 2.1.1.   记得打勾 2.1.2.   修改server.xml 2.2.  修改datagrid.jsp集成easyui 2.2.1.     拷贝原来easyui1 webapp下面的easyui文件夹 2.2.2.     拷贝原来easyui1 webapp下面的common.jsp里…
大家有四次抢票机会.第一次是放票时间之后的30分钟.第二次机会是开车前的15天.第三个机会是开车前的48小时.第四个机会是开车前的24小时. $("#gys_key").combogrid("getValue") $('#dtpDate').datebox("getValue") 1.导入js 2.datagrid重新加载 3.弹出div,打开新页面 4.实现分页 5.双击 6.嵌套子表格 7.javascript刷新页面 导入JS,CSS   …
这一篇我们来看看标签页的添加和删除动作.我在想看这些例子还不如看文档,文档的内容更加全面,但是文档全部是理论没有实际的操作,看起来很枯燥,文档只能是遇到问题的时候查.easyui的文档写的还是很详细的,这点对开发者很重要. 1.html代码 <div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:aut…
这篇我们看看标签页是怎么实现的,默认情况下要靠点击切换标签,也可以用鼠标切换标签选项,就是鼠标放在标签上切换. 首先看看引用的资源文件 1.资源文件 <head> <meta charset="UTF-8" /> <title>Basic Tabs - jQuery EasyUI Demo</title> <link rel="stylesheet" href="jquery-easyui-1.3.5/…
这一篇中我们将看看如何给手风琴动态的增加,删除格子,怎样选择某一个格子的. 1.先看看引用的资源 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" /> <li…
在这一篇中我们看看如何在手风琴里面显示表格数据的. 1.先看看引用的资源 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="jquery-easyui-…
手风琴也是web页面中常见的一个控件,常常用在网站后台管理中,这里我们看看easyui中基本的手风琴设置. 1.先看看引用的资源 <meta charset="UTF-8" /> <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href=&qu…
上一篇中我们看到了panel的基本实现,没有什么难度,最重要的是data-options和class两个标签属性的定义.这里我们将看一下在panel中如何加载其他的页面. 1.先看看引用的资源文件和html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Load Panel Content - jQuery EasyUI Demo</title&…
这篇看看easyui是怎么实现panel的,就是类似一个容器,里面可以装具体内容或者其他的easyui控件. 1.这里先看看引用的资源文件 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" type="text/cs…
这一篇介绍在一个展开行内进行的增删操作,如果一行很长有很多的数据,在一个展开行内进行编辑将更加方便. 1.先看引用的资源 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css"…
一.layout页面布局 EasyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必须的,而东.西.南.北这四个面板是可选的,如果布局里面不需要东.西.南.北这四个面板,那么可以把相应的div删掉,另外,如果需要创建复杂的easyUI布局,那么可以通过嵌套东.西.南.北.中五个面板来实现.下面简单演示一下EasyUI布局. 1.1 通过div创建easyUI布局 <%@ page contentType="text/html;charset=UTF-8" languag…
一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jquery-easyui-1.7.2 解压后得到如下文件夹: 二.EasyUI入门案例 第一步:新建一个JavaWeb工程,然后将jquery-easyui-1.7.2加入到工程中,将jquery-easyui-1.7.2文件夹中一些不必要的文件删掉,只保留必要的就可以了,如下图所示: 第二步:新建一个demo1.jsp,在demo1.jsp中使…
jQuery EasyUI是一组基于jQuery的UI插件集合体.我的理解:jquery是js的插件,easyui是基于jquery的插件.用easyui可以很轻松的打造出功能丰富并且美观的UI界面. 这两天主要接触了easyui的datagrid组件和dialog组件. easyui的组件都有属性,事件,方法. 先以这几天用到的datagrid组件来讲,后台的php根据条件查出数据,echo json_encode($list) 将数据以json格式传给前台. 前台html根据name从jso…
1.jQuery EasyUI messager使用方式 1.1 alert方法 $(function(){ //1.alert方法---提示框 $.messager.alert("标题","内容","question"); }) 效果: 1.2confirm方法 $(function(){ //2.confirm方法---确认框 /* $.messager.confirm("提示信息","你确定删除吗?"…
1.jquery easyUI动态添加选项卡(查看jquery easyUI手册) 1.1 用于动态添加一个选项卡 1.1.1 选中指定的选项卡和判断某个选项卡是否存在 测试代码: <a id="but1" class="easyui-linkbutton">添加一个选项卡</a> <script type="text/javascript"> $(function(){ //页面加载完成后,为上面按钮绑定事件…
1.主页设计(JQuery EasyUI插件) 下载easyUI开发包: 将easyUI资源文件导入页面中: <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type=&quo…
1.   jQuery EasyUI介绍 1.  创建组件的方式和原理(掌握) 2.  组件三要素(掌握) 3.  Panel.LinkButton.上下文菜单;(掌握) 简介 2.1.  jQuery EasyUI 是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的JavaScript,也不需要对css样式有深入的了解,开发者只有需要了解一些简单的html标签. 2.2.  官方网站 ht…
1.模拟器,IOS:XCODE GENYMOTION  ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role=page 代表一个页面 data-position=fixed 代表固定工具栏 data-transition=slide 跳转动画效果 data-rel=dialog 弹窗口 button:A <button>  B <input type="button" />  C <a class=&qu…