1.基础知识:

  1)Parser解析器:

    div指定了class后能有效果是因为开始时文档时加载DOM但是一些由js动态生成的指定了class的div没有被解析此时就需要手动解析了

    js动态生成的指定了Class的div对象需要手动解析

      $.parser.parse(); // 解析整个页面;$.parser.parse('#cc'); // 解析某个具体节点

  2)Easyloader:加载器:类似与模块加载与requireJS类似

    用这个方式来加载对应的easyui控件很方便,他能自动找到需要的控件

<button onclick="easyLoader()" type="button">点我</button>
<div id="easyloaderId">我是一个easyLoader测试用例</div>
<script>
function easyLoader(){
easyloader.load('dialog',function(){
//通过这种方式就只需要
/*使用JavaScript动态创建EasyUI的Dialog的步骤:
1、定义一个div,并给div指定一个id
2、使用Jquery选择器选中该div,然后调用dialog()方法就可以创建EasyUI的Dialog
*/
//使用自定义参数创建EasyUI的Dialog $("#easyloaderId").dialog({
title: '使用JavaScript创建的Dialog',
width: ,
height: ,
closed: false,
cache: false,
modal: true
});
})
}
</script>

    两种方式加载文件:easyloader.load('插件',function(){//dosomethings});

             using("url相对位置或者绝对位置",function(){//dosomethings})  

  3)easyui-draggable拖动

  4)droppable可放置

  5)easyui-resizable可调整尺寸

  6)easyui-pagination分页

    调用方法:$('#pp').pagination('refresh');

    绑定事件:

$('#pp').pagination({
onSelectPage:function(pageNumber, pageSize){
$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
$(this).pagination('loaded');
}
});

    添加自定义按钮

$('#pp').pagination({
total: ,
buttons: [{
iconCls:'icon-add',
handler:function(){alert('add')}
},'-',{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});

  7)'easyui-searchbox搜索框

<h4>.7Searchbox搜索框</h4>
<script type="text/javascript">
function qq(value,name){
alert(value+":"+name)
}
</script>
<input class="easyui-searchbox" style="width: 300px;"
data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"/>
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div> <input id="searchbox"></input>
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>
<script>
$('#searchbox').searchbox({
searcher:function(value,name){
alert(value + "," + name)
},
menu:'#mm',
prompt:'Please Input Value'
});

  8)ProgressBar进度条

    <div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

  9)easyui-tooltip提示框

    <a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

控件属性

  想要熟练运用控件,每个属性都需要了解到

  class="{pulginsName}",其他控件属性可写在元素内也可写在data-options中

  data-options:支持html5兼容属性,所有相关插件属性都可写在此内

easyui插件功能扩展

  1)插件成员存放jQuery的位置

    jQuery.fn.{plugin}.defaults:存放组件属性事件

      jQuery.fn.{plugin}.methods: 存放组件方法

      调用组件方法:$('selector').plugin('method',parameter);

  2)例子

    为插件dialog添加方法

    思路:为插件添加一个成员(方法),就是给jQuery这个类扩展覆盖原来的静态成员($.fn.{plugins}.methods)覆盖一个新的方法

      $.extends($.fn.{plugins}.methods,newMethods function(){//dosomething})

//扩展方法
$.extend($.fn.dialog.methods, {
mymove: function(jq, newposition){
return jq.each(function(){
$(this).dialog('move', newposition);
});
}
});
//调用方法
$('#dd').dialog('mymove', {
left: ,
top:
});

--------------------------------------------------------------------------------------------------

2.之后看到什么控件直接查看api即可http://www.jeasyui.net/

  

EasyUI学习的更多相关文章

  1. Asp.Net MVC4 + Oracle + EasyUI 学习 序章

    Asp.Net MVC4 + Oracle + EasyUI  序章 -- 新建微软实例 本文链接:http://www.cnblogs.com/likeli/p/4233387.html 1.  简 ...

  2. jQuery EasyUI学习资源汇总

    jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的 ...

  3. EasyUI学习(一)——EasyUI入门

    EasyUI学习总结(一)——EasyUI入门 一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:j ...

  4. 前端框架Easyui学习积累

    前端框架Easyui学习积累 1.easyui textbox 赋值:$("#id").textbox("setValue","xx"); ...

  5. easyUI学习笔记二

    1.  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...

  6. easyUI学习笔记一

    1.引用js文件 <script type="text/javascript" src = jquery-easyui/jquery.min.js> </scri ...

  7. Asp.Net MVC4 + Oracle + EasyUI 学习 第一章

    Asp.Net MVC4 + Oracle + EasyUI  第一章 --操作数据和验证 本文链接:http://www.cnblogs.com/likeli/p/4234238.html 文章集合 ...

  8. easyui学习日记20141213

    一.前言 对于页面的设计一直都不是很懂.看到easyui样式简洁大方的样子,就心里痒痒,趁这段时间工作没什么项目的同时充充电.同时给自己做个笔记吧. 首先需要下载easyui的包,有两种版本,支持GP ...

  9. JQuery EasyUI学习框架

    前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...

  10. easyUI 学习

    )省份-城市-区域三级联动[struts2 + ajax +非数据库版] (1)省份-城市-区域,基于jQuery的AJAX三级联动,用Struts2整合AJAX[非数据库版] $.ajax( { t ...

随机推荐

  1. mongo 过滤查询条件后分组、排序

    描述:最近业主有这么一个需求,根据集合中 时间段进行过滤,过滤的时间时间段为日期类型字符串,需要根据某一日期进行截取后.进行分组,排序 概述题目:根据createTime时间段做查询,然后以 天进行分 ...

  2. poj3481(splay tree 入门题)

    平衡树都能做. // // main.cpp // splay // // Created by 陈加寿 on 16/3/25. // Copyright © 2016年 chenhuan001. A ...

  3. sql server 2008 对字段的操作

    添加,刪除字段 通用式: alter table [表名] add [字段名] 字段属性 default 缺省值 default 是可选参数   增加字段:  增加数字字段,整型,缺省值为0 增加数字 ...

  4. 【转】通过SQL Server 2008数据库复制实现数据库同步备份

    SQL Server 2008数据库复制是通过发布/订阅的机制进行多台服务器之间的数据同步,我们把它用于数据库的同步备份.这里的同步备份指的是备份服务器与主服务器进行实时数据同步,正常情况下只使用主数 ...

  5. 批量索引以提高索引速度 -d --data-binary

    index create update 第1.2行分别为:信息行.数据行,在索引中增加或更换文档delete 移除文档,只包含信息行 Bulk API | Elasticsearch Referenc ...

  6. mock数据(模拟后台数据)

    mock数据(模拟后台数据) - Emily恩 - 博客园 https://www.cnblogs.com/enboke/p/vue.html Mock.js http://mockjs.com/ 前 ...

  7. 【python】-- web框架本质

    web框架 一.web框架简述 所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. import socket def handle_request( ...

  8. 使用mybatis向oracle数据库插入数据异常

    遇到了使用mybatis向oracle数据库插入数据异常的问题, 具体的报错如下:org.springframework.jdbc.UncategorizedSQLException: ### Err ...

  9. 实用 35 个 jQuery 小技巧

    1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return ...

  10. ORACLE中RECORD、VARRAY、TABLE的使用具体解释

     1     说明 1.1       RECORD 定义记录数据类型. 它类似于C语言中的结构数据类型(STRUCTURE).PL/SQL提供了将几个相关的.分离的.基本数据类型的变量组成一个总 ...