easyUI入门

简介

一种前端框架,类似于bootstrap

引入依赖

下载地址
http://www.jeasyui.com/download/downloads/jquery-easyui-1.7.0.zip
解压缩后将全部插件放进项目的js文件夹
ps:解压后是一堆插件css都在二级目录里了,和bootstrap的引入相比高下立判。。
在这里插入图片描述

写一个测试index.html试一下样式是否引入
注意,如果和上图的项目结构一致,则 src="js/jquery.easyui.min.js
不要写成 /js/…或.js/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--引入jquery的js,EasyUI的执行需要依赖于jQuery  -->
		
	<!--引入jquery的js,EasyUI的执行需要依赖于jQuery  -->
	<script type="text/javascript"
	    src="js/jquery.min.js"></script>
	<!--easyUI的js主文件  -->
	<script type="text/javascript"
	    src="js/jquery.easyui.min.js"></script>
	<!--国际化的js文件  -->
	<script type="text/javascript"
	    src="js/locale/easyui-lang-zh_CN.js"></script>
	<!--引入easyUI的样式  -->
	<link rel="stylesheet" type="text/css"
	    href="js/themes/icon.css" />
	<link rel="stylesheet" type="text/css"
	    href="js/themes/default/easyui.css" />
	
	
	</head>
	<body>
	

		
		
		        <div class="easyui-draggable">拖动DIV</div>
		        <div class="easyui-draggable">测试div</div>
				<div id="p" class="easyui-progressbar" style="width:400px;"></div>
						<input id="b" type="button" value="加载"/> 
						<a id="btn1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back'">返回</a>
							<a id="btn2" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a>
							<a id="btn3" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">编辑</a>
							<a id="btn4" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'">清空</a>
							<a id="btn5" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">移除</a>
						
		    
	</body>
</html>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值