Ui学习笔记---EasyUI的使用方法,EasyLoader组件使用

技术qq交流群：CreDream：251572072
1.使用之前导入文件:
这里用jquery-easyui-1.2.6
2.先导入jquery.easyui.min.js
--------------------------------------
3.新建一个测试文件1.html
4.下面会把整个测试实例给大家
------------------------------
5.如果不想导入整个easyui的模块,只想导入自己用到的部分
那么可以这样做,一会上代码吧,下面有
6.下面是本次学习用的所有代码:
a.首先建立javaweb项目:EasyUITest
b.加入jquery-easyui-1.2.6
/EasyUITest/WebRoot
/EasyUITest/WebRoot/jquery-easyui-1.2.6
/EasyUITest/WebRoot/jquery-easyui-1.2.6/demo
/EasyUITest/WebRoot/jquery-easyui-1.2.6/locale
/EasyUITest/WebRoot/jquery-easyui-1.2.6/plugins
/EasyUITest/WebRoot/jquery-easyui-1.2.6/themes
/EasyUITest/WebRoot/jquery-easyui-1.2.6/changelog.txt
/EasyUITest/WebRoot/jquery-easyui-1.2.6/easyloader.js
/EasyUITest/WebRoot/jquery-easyui-1.2.6/jquery-1.7.2.min.js
/EasyUITest/WebRoot/jquery-easyui-1.2.6/jquery.easyui.min.js
/EasyUITest/WebRoot/jquery-easyui-1.2.6/licence_gpl.txt
/EasyUITest/WebRoot/jquery-easyui-1.2.6/license_commercial.txt
/EasyUITest/WebRoot/jquery-easyui-1.2.6/readme.txt
/EasyUITest/WebRoot/META-INF
/EasyUITest/WebRoot/WEB-INF
/EasyUITest/WebRoot/easyloader.html
/EasyUITest/WebRoot/easyuitest.html
/EasyUITest/WebRoot/index.jsp
------------------------------------
c.新建:easyuitest.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

<script type="text/javascript" src="jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset='utf-8'></script>
<script type="text/javascript" src="jquery-easyui-1.2.6/jquery.easyui.min.js" charset='utf-8'></script>

<link rel="stylesheet" href="jquery-easyui-1.2.6/themes/default/easyui.css" type="text/css"></link>


<link rel="stylesheet" href="jquery-easyui-1.2.6/themes/icon.css" type="text/css"></link>

<script type="text/javascript" src="jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js" charset='utf-8'></script>

    
   <script type="text/javascript" charset='utf-8'>
$(function(){
//这句话取得这个节点
//console.info( $('#dd'))
$('#dd').dialog({modal:true})
//console.info()这句话可以打印出这个节点是什么东西,建议用火狐debug
//用这个可以打印出选择的是个div
//alert这种方式不能体现出你选择的是什么东西
//2.这里想要把这个显示成模式化的dialog,但是dialog没有这个属性
// 这时候可以去他的父类中,window中找,可以找到modal这个模式化控制属性
// 默认是true

/*
dialog()这里的参数有
title       string The dialog title text. New Dialog
collapsible boolean Defines if to show collapsible button. false
minimizable boolean Defines if to show minimizable button. false
maximizable boolean Defines if to show maximizable button. false
resizable   boolean Defined if the dialog can be resized. false
toolbar     array The top toolbar of dialog, each tool options is same as linkbutton. null
buttons     array The bottom buttons of dialog, each button options is same as linkbutton. null
*/
});
</script>
</head>


<body οnlοad=''>


<div   id="dd" title="My Dialog" style="width:400px;height:200px;">
    Dialog Content.
</div>

</body>
</html>
--------------------------------------------
d.新建/EasyUITest/WebRoot/easyloader.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

<script type="text/javascript" src="jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset='utf-8'></script>
<script type="text/javascript" src="jquery-easyui-1.2.6/easyloader.js"></script>


    
   <script type="text/javascript" charset='utf-8'>
$(function(){
/*
1.单独加载一个模块
easyloader.load('dialog',function(){
$('#dd').dialog({
modal:true
});
});
*/
//2.同时加载多个模块,这里把需要加载的模块放到一个数组中
//3.这个时候也可以用class这种方式的
easyloader.load(['dialog','messager'],function(){
//a.这里调用dialog
$('#dd').dialog({
modal:true
});
//b.这里调用messager这种模块
$.messager.alert('title','load ok');
});

});
</script>
</head>


<body οnlοad=''>


<div   id="dd" class='easyui-dialog' modal='true' title="My Dialog" style="width:400px;height:200px;">
    Dialog Content.
</div>

</body>
</html>
-------------------------------------------

Ui学习笔记---EasyUI的使用方法,EasyLoader组件使用相关推荐

Ui学习笔记---EasyUI的EasyLoader组件源码分析
Ui学习笔记---EasyUI的EasyLoader组件源码分析技术qq交流群:JavaDream:251572072 1.问题1:为什么只使用了dialog却加载了那么多的js http: ...
UI学习笔记---EasyUI panel插件使用---03
UI学习笔记---EasyUI panel插件使用---03 UI学习笔记---EasyUI panel插件使用---03 1.panel简单小例子 ------------------- 2.可以自 ...
Ui学习笔记---EasyUI的介绍
Ui学习笔记---EasyUI的介绍 -------------------------- 1.组织: a.EasyUI官方:http://www.jeasyui.com EasyUI是一 ...
《Go语言圣经》学习笔记第六章方法
<Go语言圣经>学习笔记第六章方法目录方法声明基于指针对象的方法通过嵌入结构体来扩展类型方法值和方法表达式示例:Bit数组封装注:学习<Go语言圣经>笔记, ...
js学习笔记2 -- js使用方法
js学习笔记2 -- js使用方法方法一,使用外部js文件(推荐使用) 方法二,写在script标签中方法三,写到标签的onclick属性中方法四,使用超链接方法一,使用外部js文件(推荐使用 ...
Hibernate学习笔记Session.evict(user)方法
@[TOC]Hibernate学习笔记Session.evict(user)方法 Hibernate学习笔记Session.evict(user)方法首先我们要明白Session.flush(use ...
wyy课堂cmos模拟设计课学习笔记-gm/Id设计方法介绍及曲线仿真
wyy课堂cmos模拟设计课学习笔记-gm/Id设计方法及曲线仿真总思路需要的图像曲线软件操作举例说明总思路这在b站上也有教学视频:https://www.bilibili.com/vid ...
凸优化学习笔记 15：梯度方法
前面的章节基本上讲完了凸优化相关的理论部分,在对偶原理以及 KKT 条件那里我们已经体会到了理论之美!接下来我们就要进入求解算法的部分,这也是需要浓墨重彩的一部分,毕竟我们学习凸优化就是为了解决实际当 ...
Flutter学习笔记（18）--Drawer抽屉组件
如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...

Ui学习笔记---EasyUI的使用方法,EasyLoader组件使用

Ui学习笔记---EasyUI的使用方法,EasyLoader组件使用相关推荐

最新文章

热门文章